Vue模板语法
上节学过：容器里的代码被称为Vue模板，Vue模板有自己的一些语法规则。
Vue模板语法有两大类：
插值语法
- 功能：用于解析标签体内容。
- 写法：
{{xxx}}，xxx是js表达式，且可以直接读取到Vue实例对象中的data对象中的所有属性。
<!-- 准备好一个容器--> <div id="root"> <h1>插值语法</h1> <h3>你好，{{name}}</h3> </div>
new Vue({ el:'#root', data:{ name:'jack', } })
指令语法
- 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
- 举例：
v-bind:href="xxx"可简写为:href="xxx"，xxx同样要写js表达式，且可以直接读取到Vue实例对象中的data对象中的所有属性。 - 备注：Vue中有很多的指令，且形式都是：
v-????，此处的简写我们只是拿v-bind举个例子。
<!-- 准备好一个容器--> <div id="root"> <h1>指令语法</h1> <a v-bind:href="school.url.toUpperCase()">点我去{{school.name}}学习1</a> <a :href="school.url">点我去{{school.name}}学习2</a> </div>
new Vue({ el:'#root', data:{ school:{ name:'xaut', url:'https://www.xaut.edu.cn/', } } })
tip：href是Hypertext Reference的缩写，意思是超文本引用。读音 /hīːˈref(ə)/
数据绑定
Vue中有2种数据绑定的方式：
- 单向绑定：
v-bind:value，数据只能从data流向页面
v-bind:value可以简写为:value，省略v-bind
- 双向绑定：
v-model:value，数据不仅能从data流向页面，还可以从页面流向data
v-model:value可以简写为v-model，省略:value，，因为v-model默认收集的就是value值。- 双向绑定一般应用在表单类元素上（如：
input、select等）
<div id="root"> <!-- 普通写法 --> <!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/> 双向数据绑定：<input type="text" v-model:value="name"><br/> --> <!-- 简写 --> 单向数据绑定：<input type="text" :value="name"><br/> 双向数据绑定：<input type="text" v-model="name"><br/> <!-- 如下代码是错误的，因为v-model只能应用在输入类元素上 --> <!-- <h2 v-model:x="name">你好啊</h2> --> </div>
new Vue({ el:'#root', data:{ name:'wyatt' } })
在双向数据绑定的输入框中修改值为wyatt.Wang，可以看到data中相应数据发生改变。
该数据的改变也引起单向数据绑定输入框中值改变。
相对的，在单向数据绑定的输入框中修改值为wyatt.Wang，data中相应数据不会发生改变，双向数据绑定的输入框中值也肯定不会发生改变。
el的两种写法
new Vue时配置el属性- 通过
v.$$mount('#root')指定el的值。
tip: mount有挂载的意思
const v = new Vue({ //el:'#root', //第一种写法 data:{ name:'wyatt' } }) console.log(v) v.$$mount('#root') //第二种写法
data的两种写法
- 对象式
- 函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
由Vue管理的函数（例如Vue实例的data()函数），一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
tip：什么是箭头函数
new Vue({ el:'#root', //data的第一种写法：对象式 /* data:{ name:'wyatt' } */ //data的第二种写法：函数式 data(){ console.log('@@@',this) //此处的this是Vue实例对象 return{ name:'wyatt' } } })
