作用于HTML元素的Vue.js指令

我在这里学习内置指令

• v-model
• v-if
• v-show
• v-else
• v-for
• v-bind
• v-on

---

v-model表单数据模型双向绑定

example：
① 表单文本输入框效果
<input type="text" v-model.trim="myValue"> {{ myValue }}

export default {
  data () {
    return {
      myValue: '',
     }
}

1. v-model.lazy 延迟，当我们完成了输入后按enter键才会有输出。
   <input type="text" v-model.lazy="myValue"> {{ myValue }}
   输入内容没有即刻显示:
   点击Enter键后:
   

---

2. v-model.number 强制我们输入的值是数字
   <input type="text" v-model.number="myValue"> {{ myValue }}
   此时测试时，会发现效果和什么都不加即
   <input type="text" v-model="myValue"> {{ myValue }} 没有任何区别

但实际上改变的是所输入内容的类型，我们可以对Mustache的输入内容稍作修改，改为{{ typeof myValu }}看看有什么不同之处

1.v-model时，无论是空白、还是纯字母、纯数字或者是数字字母混合，其类型都是string
<input type="text" v-model="myValue"> {{ typeof myValue }}

2. v-model.number时
当文本框内容为空白或者是输入的第一个字符是非数字是，都是String类型

当输入的内容为纯数字或者是以数字开头的都是number类型。
对于以数字开头的数字字母混合按理来说应该是String类型，但我们可以看到下图第2,3两个文本框， 当鼠标不再聚焦到文本框时，数字后面的内容就会自动删除。

3. v-model.trim 文本框前后输入的空格会被忽略掉。

---

② 复选框效果

     <input type="checkbox" value="apple" v-model="myBox">apple
     <input type="checkbox" value="banana" v-model="myBox">banana
     <input type="checkbox" value="pinapple" v-model="myBox">pinapple
     {{ myBox }}

export default {
  data () {
    return {
      myBox: []
      /*因为复选框中有不同的元素，所以给myBox初始化为一个空的数组*/
  }
}

v-if

v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。

v-show

条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。

v-if 是html代码中有没有被选中的内容
v-show是没有被选中的内容display为none但它是存在的。

v-else

v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。

v-for

指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似
v-for="item in items" (items是一个数组，item是当前被遍历的数组元素。)

v-for 数组渲染和对象渲染的区别

① 数组渲染

export default {
data () {
    return {
      hello: 'hello vue.js',
      list: [
        {
          name: 'apple',
          price: 34
        },
        {
          name: 'banana',
          price: 56
        }
      ]
}

<template>
  <div id="app">
     <ul>
       <li v-for="(item, index) in List">{{ item.name }} + {{ item.price }} + {{ index }}</li>
     </ul>
  </div>
</template>

结果演示为：

• apple + 34 + 0
• banana + 56 + 1

②对象渲染

 data () {
    return {
      objList: {
        name: 'apple',
        price: 34,
        color: 'red',
        weight: '2kg'
      }
    }
}

<template>
  <div id="app">
     <ul>
       <li v-for="(value, key) in objList">{{ key }} + {{ value }}</li>
     </ul>
  </div>
</template>

结果演示：

• name + apple
• price + 34
• color + red
• weight + 2kg

提示：
      上面所用到的item,index,value,key都是自定义变量。
      数组渲染可以显示下标如index，对象渲染可以显示对象名如key

---

v-bind

绑定标签属性。
v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class （可以给这个class添加新的属性）

example:用v-bind绑定class
①class 为一个字符串时
<a v-bind:class = "classStr">to baidu</a>

/*给a标签加上class为red-font的js代码*/
export default {
       data () {
            return{
                classStr: 'red-font'
            }
       }
}

②加上的类名也可以是一个对象。
<a v-bind:class = "className">to baidu</a>

/*给a标签加上class为red-font的js代码，根据布尔值判断是否加入*/
export default {
       data () {
            return{
                className: {
                     'red-font'/*这是类名*/ : true,
                     'blue-font': false
                 }
            }
       }
}

③以数组的方式添加类名
<a v-bind:class = "className">to baidu</a>

/*数组里面全部的类名都会被加入到a标签中*/
export default {
       data () {
            return{
                className: [red-font, big-font, blue-font]
            }
       }
}

④在标签中直接输入要添加的calss
<a v-bind:class = [classA, classB,{red-font: hassErr}]>to baidu</a>

/*同时将classA和classB渲染到了a标签中*/
export default {
       data () {
            return{
               classA: 'isClassA',
               classB: 'isClassB',
               hassErr: true
            }
       }
}

或者<a v-bind:class = [classA, {red-font: true }]>to baidu</a>

---

v-on

v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的
v-on可以是自定义事件也可以是浏览器的默认事件。

example：
    浏览器默认事件<a v-on:click="doSomething">
    自定义事件：<a @my-event="onComaMyEvent">

v-bind和v-on的缩写
Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。