Vue学习2.0

一、指令语法

v-bind：可以给标签里面的任意属性动态绑定一个值，可以简写为： 

Vue模板有2大类：

1.插值语法：

功能：用于解析标签体内容

写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性

2.指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定时间...）

举例：v-bind:hred="xxx"或简写为 :href="xxx",xxx同样要写js表达式，且可以直接读取到data中的所有属性

备注：Vue中的很多的指令，且形式都是:v-？？？，此外我们只是拿v-band举个例子

3.多级指令

 二、数据绑定

1. v-model只能应用在表单类元素（输入类元素）上

输入类元素：input；单选框；多选框；select；多行输入

特点：都有value值

2.Vue中的2中数据绑定的方式：

1）单项绑定（v-bind）

数据只能从data流向页面

2）双向绑定（v-model）

数据不仅能从data刘翔页面，还可以从也米娜流向data

备注：

①双向绑定一帮都应用于表单类元素上（如：input、select等）

②v-model：value可以简写为v-model，因为v-model默认收集的就是value值

3.不一样的图形

4 .普通写法与简写的形式

三、el与data的两种写法 

1. $开头的是vue给程序员用的

2. el和data的两种写法代码展示

el图列

data图例

3.data与el的2种写法 

（1）el有两种写法

1）new Vue时候配置el属性

2）先创建Vue实例，随后再通过vm.$mount('#root')指定el的值

（2）data有两种写法

1）对象式

2）函数式

如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错

（3）以服务重要的原则

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了

 四、MVVM模型

（一）字母解析

1.M:模型(Model):对应data中的数据

2.V:视图(View):模板

3.VM:视图模型(ViewModel):Vue实例对象

图例：

（二） 代码具体展示

（三）观察发现

1.data中所有的属性，最后都出现了vm身上

2.vm身上所有的属性及Vue原型所有的属性，在Vue模板中都可以直接使用

用console.log(vm)可以查看