Vue 2.0 由浅入深-指令

指令

指令是可以写在DOM元素的小命令，他们以v-为前缀，Vue就能识别这是一个指令并保持语法的一致性。如果你需要对HTML进行底层操作的话，这种方式是非常有用的。

1. v-text

v-text 更新元素的文本内容，不解析html 相当于更新元素的 innerText文本内容

html 代码

javascript 代码

new Vue({
  el:"#app",
  data:{
    txt:"b标签"
  } 
})

页面渲染结果（不解析b标签，原格式输出）
b标签

2. v-html

v-text 更新元素的html，解析html 相当于更新元素的 innerHTMLhtml代码内容

html 代码

javascript 代码

new Vue({
  el:"#app",
  data:{
    html:"b标签"
  } 
})

页面渲染结果(解析b标签输出加粗的文本)
b标签

查看演示

3. v-show

v-show 根据表达式之真假值，切换元素的 display CSS 属性,元素即使隐藏也存在DOM中

html 代码

 根据flag的布尔值切换 元素的display

javascript 代码

new Vue({
  el:"#app",
  data:{
    flage:true
  } 
})

页面渲染结果
此时 div 的display css 不做改变，v-show只会在表达式 为 false 时 改变display=none，为true不做改变

4. v-if

v-if 根据表达式的值的真假条件渲染元素,也就是说元素会被销毁或重新创建

html 代码

 根据flag的布尔值，来控制元素是否被 创建或销毁，销毁后不再存在DOM中

javascript 代码

new Vue({
  el:"#app",
  data:{
    flage:false
  } 
})

页面渲染结果
此时 div 的将不被渲染出来，div 不存在于 DOM中

5. v-else

v-else v-if的else语句 代表表达式为false 的时候渲染元素
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

html 代码

A
  如果flage为 `trun`则创建元素
B
  如果flage为`false`则创建元素

javascript 代码

new Vue({
  el:"#app",
  data:{
    flage:false
  } 
})

页面渲染结果
此时 div B 将被创建

6. v-else-if

v-else-if v-if的else-if语句
v-else-if 元素必须紧跟在带 v-if的元素的后面，否则它将不会被识别。

html 代码

 如果type == A 则创建 divA元素 并中断执行
  A

 如果type == B 则创建 divA元素 并中断执行
  B

 如果type == C 则创建 divA元素 并中断执行
  C

  如果条件都不满足 执行
  Not A/B/C

javascript 代码

new Vue({
  el:"#app",
  data:{
    type:'C'
  } 
})

页面渲染结果
此时 div c 将被创建

v-show与v-if 实例演示

7. v-for

v-for 基于源数据多次渲染元素或模板块

创建 vue实例

new Vue({
  el:"#app",
  data:{
    arr:["张","王","李","赵"],
    arr2:["张","王","李","张"],
    obj:{'key1' : 'val1','key2' : 'val2','key3' : 'val3'}
  },
})

输出数组arr

//输出arr 的值
{{val}}
张 王 李 赵
//输出 arr 的下标和值 (第一个参数是val  第二个是key)
{{index}}:{{val}}
0:张  1:王  2:李  3:赵

输出对象obj

//输出obj的值
{{val}}
val1   val2   val3
//输出 obj的key 和 val (第一个参数是val  第二个是key)
{{key}}:{{val}}
key1:val1   key2:val2   key3:val3

vue 2.0 可以输出对象重复的对象 比如 arr2 有两个 张

//输出obj的值
{{val}}
张 王 李 张

当我们在使用v-for进行渲染时，尽可能使用渲染元素自身属性的id给渲染的元素绑定一个 唯一key值，这样在当前渲染元素的DOM结构发生变化时，能够单独响应该元素而不触发所有元素的渲染。提高性能

{{val}}
张 王 李 张

查看v-for实例演示

8. v-on

v-on 用来绑定事件 用法 v-on:事件="函数"；函数可传入$event参数获取事件对象

   点击 //点击button执行push方法
   {{arr}} //展示数据