数据绑定-插值语法{{值}},v-bind,v-model
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>这里填写标题</title>
<meta name="keywords" content="这里填写关键词" />
<meta name="description" content="这里填写说明内容" />
<script type="text/javascript" src="./vue.js"></script>
<!--
1.想让vue工作就需要创建vue对象,且传入参数
2.vue接管的元素依旧符合html规范,但是要同时满足vue语法
3.vue接管的元素叫root容器,内叫做【vue模板】
-->
<style type="text/css">
<!--CSS样式代码位置-->
</style>
</head>
<body>
这里填写HTML代码
<div id="root">
<h1 >
Hello,{{name}}<!--使用双花括号作为vue的数据变量,范围仅限vue接管的元素-->
年龄:{{age}}
<a :href="url" target="_blank" >{{name}}</a>
</h1>
</div>
<script type="text/javascript">
<!--JS代码位置-->
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
const a = new Vue({
el:'#root', //el指定哪个元素作为vue的使用元素
data:{//暂时使用data作为数据源
name:"派大星",
age:21,
url:'https//www.baidu.com'
}
})
</script>
</body>
</html>
使用v-bind:src="变量"进行单项绑定数据。后续简写为 : ,只有一个冒号加正常的属性名
使用v-model:src="变量"进行双项绑定数据(但只能作用于form表单)
数据写在data里,因为vue中data做了数据代理;