vue.js简介

Vue

MVVM模式

M表示模型（机器可读性强的数据）

V表示视图（页面）

VM表示视图模型（Vue实例化对象）

Vue实例化对象

通过Vue类创建的对象叫Vue实例化对象，这个对象就是MVVM模式中VM层，模型通过它可以将数据绑定到页面上，视图可以通过它将数据映射到模型上

El 定义容器元素

容器元素是用来限制我们可以操作的元素的，写在容器内部的元素才是我们可以操作的元素

定义容器元素，通过el属性，它的值是css选择器，类选择器，id选择器，元素名称选择器

Data 为视图模型（Vue实例化对象）绑定数据的

它的值是一个对象，可以通过一个变量赋值

插值

将模型上的数据，渲染到页面中，这一过程叫做插值，

插值的语法是{{数据名称}}

属性插值 插值不仅仅可以插入的元素的内容中，好可以插入到元素属性中，语法跟内容插值语法是一样的，

单次插值 我们只允许插入一次，当再次插入时候失效，当数据更改的时候对单次插值是无效的

语法是：{{*数据名称}}

过滤html元素 我们有时候想插入文案包含html元素，同过插值的语法无法将这些元素渲染到页面中，因此要用过滤html元素插值语法

语法 {{{数据名称}}}

过滤html元素插值，我们可以应用单次插值语法

插值表达式 我们在插值可以对插值的内容做处理，也就是说我们可以应用插值表达式

例如 加减乘除等运算，js中方法等等

表达式插值这种逻辑无法复用，修改起来麻烦，因此可以使用动态插值来解决，或者插值过滤器

插值过滤器 对于插入的数据，如果想进行处理，我们可以使用插值过滤器

语法 {{数据名称 | 过滤器的名称 参数}}

过滤是一种处理数据可复用的方法

双向绑定

通过模型到视图模型再到视图中这一过程是单向的，也就是数据到视图的一个数据绑定绑定的。

通过视图到视图模型再到模型中的这一个过程也是单向的，视图到数据的一个dom监听的过程

双向绑定就是这两个过程的组合

V-model 实现的是一个从视图到模型的dom监听的一个指令

V-model是一个指令，它提供了一个js环境，在他的属性之中我们可以使用js（vue实例化对象）中的变量

动态插值

动态插值的优先级要高于静态插值的优先级

Computed 他的值是一个对象，对象中叶子节点是一个函数，函数的返回值就会作为插值的结果

类的绑定 类绑定有三种方式

第一种 属性插值 （不推荐使用）

第二种 v-bind指令

语法 v-bind:class=”对象”

对象 的属性名称表示类的名称，他的值是boolean值，

True表示 在该元素上保留该类

False表示在该元素上删除该类

第二种 v-bind指令

语法 v-bind:class = “数组”

数组的每个成员代表了一个类，成员的值就是类的名称（值内不能出现空格）

样式绑定 三种方式

第一种 属性插值 （不推荐的）

第二种 v-bind指令

语法 v-bind:style=”{}”

对象的属性名称表示css中样式属性名称，推荐使用驼峰式命名，（也可以直接书写css的属性要加引号，否则，css中属性名称中的 - 是无法解析）

第三种 v-bind指令

语法 v-bind:style = “[]”

数组中每一个成员表示一组css样式，这组样式我们要在绑定的数据中定义它

模板 在vue中是通过vue的指令实现的

条件判断模板

在Underscore中条件模板是直接在模板中书写js的if语句实现

在Vue中条件模板是通过v-if指令实现的（v-if只能处理一个元素，不能处理与他同级兄弟元素，但是可以控制他的子元素）

V-if值为true，该元素会渲染到页面中

V-if值为false，会将该元素在页面中删除

在vue中如果想控制多组兄弟元素，我们可以通过template自定义元素实现，此时实现元素是将这些兄弟元素作为template子元素来处理的，

Template元素在渲染的会删除，

Dom元素在渲染时候会保留

循环模板

在underscore中循环模板是通过在模板中书写for循环语句实现的

在vue中，循环模板是通过v-for指令实现的（v-for只能处理一个元素，不能处理与他同级的兄弟元素，但可以处理他的子元素）

V-for=“item in list”

Item是循环指令提供的一个临时变量（只能在循环访问，在循环外部访问不了，但是underscore中循环中定义的变量在外部可以访问）

List是数据绑定的变量（在Vue实例化对象中获取）

在vue中想循环多个兄弟元素要通过template自定义元素实现，实现原理是将这些兄弟元素作为tempalte元素的子元素来实现的，渲染后template会被vue删除