目录
插值语法：
一般用两对花括号包裹数据
如下实例：
<body>
<div id="app">
<h1>插值语法</h1>
<p>你好啊，{{msg}}</p>
</div>
<script>
new Vue({
el:'#app',
data(){
return{
msg:"叮叮车"
}
}
})
</script>
</body>动态绑定数据，而不是写死
指令语法：
v-bind可以给标签里的任何一个属性动态的去绑定值
v-bind可以简写成 ：
如果不绑定直接写属性值则无法读取数据
如下：
<body>
<div id="app">
<h1>插值语法</h1>
<p>你好啊，{{msg}}</p>
<hr>
<h2>指令语法</h2>
<a v-bind:href="url">点我去CSDN学习技术</a>
<a href="url">点我去CSDN学习技术</a>
</div>
<script>
new Vue({
el:'#app',
data(){
return{
msg:"叮叮车",
url:'https://www.csdn.net/?spm=1001.2014.3001.4476'
}
}
})
</script>
</body>
小结：插值语法往往只用于标签体内容中，可以直接读取 data中的所有属性
指令语法用在管理标签体属性，
数据绑定
单向数据绑定 （v-bind）：数据只能从data流向页面
双向数据绑定 （v-model）：数据不仅可以从data流向页面，也能从页面流向data
注意：
单向数据绑定可简写为 ：value=‘data中的属性名’’
双向绑定（v-model）一般用在表单系列标签中 由于v-model监视的是表单中的值一般可简写成 v-model=‘data中的属性名’’
<body>
<div id="app">
单向数据绑定:<input type="text" v-bind：value='msg' />
<!-- 双向数据绑定:<input type="text" :value='msg' /> -->
<br />
双向数据绑定:<input type="text" v-model:value='msg' />
<!-- 双向数据绑定:<input type="text" v-model='msg' /> -->
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return{
msg:'永劫无间'
}
}
})
</script>
</body>解释：改第第二个input值为什么第一个会发生改变
在更改双向绑定的输入框的数据时 控制台的属性数据会发生变化 这是因为双向绑定的缘故， 而单向数据绑定的值发生改变是由单向数据绑定的值是依赖于data属性中的数据的 因此发生了连锁反应
