VUE

==
vue.js 轻量级的MVVM框架
数据驱动+组件化的开发
==

基本指令

1

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：
v-if=”expression”

2

v-show根据表达式的真假来删除和插入元素
v-if=”expression”

3

可以用v-else指令为v-if或v-show添加一个“else块”。
v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。
v-if和v-else连用时，不执行else时，else里面的HTML不渲染
v-if和v-show连用时，不执行else时，else里面的HTML渲染，只是display：none隐藏了

4

v-for=”item in items” items是一个数组，item是当前被遍历的数组元素。
总是key配合v-for使用

<ul>
    <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
    </li>
</ul>

5

v-bind 指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的
特性（attribute–专门用来绑定属性），例如：v-bind:width=""
v-bind:argument="expression"
简写形式如下：
:argument="expression"

另外可以绑定类名
用法1：
:class="[className1,className2,className3]" 其中，className1、2、3是数据 放在data中的
用法2：
:class="{className1:true,className2:false}" 其中，className1、2是真正的类名
用法3：
:class="json" json是data里面的json
可以绑定style
:style="[c]" c是json形式的数据
:style="[c,d]" c和d都是json形式的数据，多个样式的写法
:style="json" json是data中的数据

6

v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：
<a v-on:click="doSomething">
v-on 有简写形式，如下：
<a @click="doSomething">

7.模板

数据更新模板变化-->v-text="msg" 后面的方法可以防止闪烁

{{*msg}}

数据只绑定一次

{{{msg}}}

将HTML转译输出–>v-html=”msg” 后面的方法可以防止闪烁，前面的方法v2.0已经删掉了

8.过滤器

过滤模板数据 系统提供一些过滤器:

{{msg| filterA}}
{{msg| filterA | filterB}}