Vue2.x学习笔记：第3章-2： 指令讲解

指令是Vue.js 中一个重要的特性，主要提供了一种机制将数据的变化映射为DOM 行为。Vue.js 本身提供了大量的内置指令来进行对DOM 的操作，我们来讲解比较常用的指令。

1、v-bind 指令

1.1 v-bind用来绑定数据和属性以及表达式，缩写为’：’

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

比如为标签绑定title属性，代码如下：

<template>
  <div id="app">
     <h1 v-bind:title="title">{{msg}}</h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
      return {
          msg: "binge",
          title: "我是title"
      }
  }
}
</script>

在这里title是参数，告知 v-bind指令将该元素的title attribute 与表达式title的值绑定。

小技巧：v-bind 指令应用场景

v-bind:title  鼠标移上的显示

v-bind:src  绑定图片路径

v-bind:class 绑定类样式

v-bind:style  动态绑定样式

2、v-model 指令

v-model多在表单中使用，在表单元素上创建双向绑定，根据控件类型选择正确的方法更新元素，可以绑定text、radio、checkbox、selected。

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked
属性和 change 事件； select 字段将 value 作为 prop 并将 change 作为事件。

2.1 绑定text

代码如下，p标签内容的值和val 数据进行了绑定，input的值使用v-model和val也进行了绑定，因此在改变输入框的值时，val数据会变化，同时在p标签显示的值也会变化。

<template>
  <div id="app">
      <input type="text" v-model="val" />
      <p> {{val}} </p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
      return {
          val: "binge"
      }
  }
}
</script>

2.2 绑定radio

<template>
  <div id="app">
    <input type="radio" id="male" value="Male" v-model="gender"> Male
    <input type="radio" id="female" value="Female" v-model="gender"> Femalea

    <p>{{gender}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      gender: ''
    }
  }
}
</script>

gender的值随着选择单选框的值，会变成Male或者 Female

2.3 绑定checkbox

单个勾选框，最终的值为逻辑值true和false

<template>
  <div id="app">
  <input type="checkbox" v-model="checkVal"/>
   <p for="checkbox">{{checkVal}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      checkVal: ''
    }
  }
}
</script>

2.4 绑定select

<template>
  
  <div id="app">
    <select v-model="selecteData">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <p>{{selecteData}}</p>
  </div>
 
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      selecteData: ''
    }
  }
}
</script>

3、{{}}和v-text指令、v-html

3.1 表达式

<template>
  <div id="app">
      {{msg + 1}}
  </div>
</template>
 
<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 1,
    }
  }
}
</script>

显示应该是：2

3.2 v-text指令绑定文本

<template>
  <div id="app">
      <div v-text="msg"></div>
      {{msg}}
  </div>
</template>
 
<script>
export default {
  name: 'app',
  data () {
    return {
      msg: "您好，斌哥"
    }
  }
}
</script>

这两种绑定效果是一致的。

3.3 绑定html标签文本

<template>
  <div id="app">
      <div v-html="raw_html"></div>
  </div>
</template>
 
<script>
export default {
  name: 'app',
  data () {
    return {
      raw_html: "<h1>您好，斌哥</h1>"
    }
  }
}
</script>

这样就是可以绑定html内容。

小技巧：{{{ }}} 指令在vue2.x中废弃了

<div>{{{ raw_html }}}</div>  

4、v-on 指令

绑定事件：

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

实例如下：

<template>
  <div id="app">
    <!-- Vue 中提供了 v-on: 事件绑定机制 -->
    	<input type="button" value="按钮"  v-on:click="item+=1">{{item}}
    	<input type="button" value="按钮" v-on:click="show">
    	<input type="button" value="按钮" @click="show">
      
  </div>
</template>
 
<script>
export default {
  name: 'app',
  data () {
    return {
      msg: "您好，斌哥",
      item: 1
    }
  },
  methods: {
      // 这个 methods属性中定义了当前Vue实例所有可用的方法
      show: function () {
         alert('Hello')
      }
  }
}
</script>

小技巧：支持表达式：v-on:click=“item+=1”

5、v-if 指令

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。

<template>
  <div id="app">
   <input type="button" value="按我切换"  v-on:click="awesome=!awesome">
   <h1 v-if="awesome">Vue is awesome!</h1>
   <h1 v-else>Oh no 😢</h1>
  </div>
</template>
 
<script>
export default {
  name: 'app',
  data () {
    return {
      awesome: true
    }
  }
}
</script>

点击按钮，可以控制文本的显示。

小技巧：也可以用 v-else 添加一个“else 块”

6、v-show 指令

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

<h1 v-show="awesome">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

小技巧： v-if vs v-show
注意，v-show 不支持 元素，也不支持 v-else。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

7、v-for 指令

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<template>
  <div id="app">
    <ul id="example-1">
      <li v-for="item in items">
        {{ item.message }}
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: 'app',
  data () {
    return {
      items: [
        { message: 'Foo' },
        { message: 'Bar' }
      ]
    }
  }
}
</script>

显示效果：

在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。

<template>
  <div id="app">
    <ul id="example-1">
     <li v-for="(item, index) in items">
      {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: 'app',
  data () {
    return {
      parentMessage: 'Parent',
      items: [
        { message: 'Foo' },
        { message: 'Bar' }
      ]
    }
  }
}
</script>

显示效果：

你也可以用 v-for 来遍历一个对象的属性。

<template>
  <div id="app">
    <ul id="v-for-object" class="demo">
      <li v-for="value in object">
        {{ value }}
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: 'app',
  data () {
    return {
      object: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      }
    }
  }
}
</script>

显示效果：