视频： 007_尚硅谷Vue技术_模板语法_哔哩哔哩_bilibili
笔记参考：Vue - YK菌的专栏 - 掘金 (juejin.cn)
1. 模板语法
html 中包含了一些 JS 语法代码，语法分为两种，分别为：
-
插值语法（双大括号表达式）
-
指令（以 v-开头）
- 插值语法 {{}}
- 功能: 用于解析标签体内容
- 语法: {{xxx}} ，xxxx 会作为 js 表达式解析
- 指令语法
- 功能: 解析标签属性、解析标签体内容、绑定事件
- 举例：v-bind:href = 'xxxx' ，xxxx 会作为 js 表达式被解析
- 说明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子
2. 数据绑定
2.1. 单向数据绑定
-
语法：v-bind:href ="xxx" 或简写为 :href
-
特点：数据只能从 data 流向页面
2.2. 双向数据绑定
-
语法：v-model:value="xxx" 或简写为 v-model="xxx"，因为v-model默认收集的就是value值
-
特点：数据不仅能从 data 流向页面，还能从页面流向 data，比如input框使用v-model后可以通过在input框内输入内容进行修改
-
v-model只能应用在表单类元素（输入类元素）上
3. el与data的两种写法
Vue实例中带$符合的所有内容都是给程序员用的，其他是Vue底层用到的方法
// el的第一种写法
const vm = new Vue({
el: '#root',
data:{}
)
// el的第二种写法
const vm = new Vue({
data:{}
)
vm.$mount('#root')
// data的第一种写法：对象式
const vm = new Vue({
el: '#root',
data:{name:'mike'}
)
// data的第二种写法：函数式
const vm = new Vue({
data(){
// 此处的this是Vue实例对象，
// 但是data必须是普通函数，不能是箭头函数，箭头函数的this是window
retrn {
nmae: 'mike'
}
}
)
vm.$mount('#root')
4. MVVM 模型
在没有Vue的时候，就已经有了MVVM模型，即Model-ViewModel-View-Controller， Vue参考了MVVM模型设计了自己独有的模型
-
M：模型(Model) ：对应 data 中的数据
-
V：视图(View) ：模板，Dom
-
VM：视图模型(ViewModel) ：Vue 实例对象，包括DOM Listeners、Data Bindings
VM（Vue实例）上所有的属性以及原型上的属性都可以在模板中使用插值语法展示
