二、vue常用指令

vue常用指令

官网详细api

一、v-cloak

作用：解决浏览器在加载页面时因存在时间差而存在的闪动问题，隐藏未编译的nustache标签直到实例准备完毕

<div id="app">
  <div>{{message}}</div>
  <div v-cloak>{{message}}</div>
</div>
<script src="./js/vue.js"></script>
<script type='javascript'>
  setTimeout(function(){
      const vm = new Vue({
      el: '#app',
      data: {
          message: '你好世界'
      }
      })
  },1000)
</script>

<style>
  /*在样式中加入，让前1秒不显示内容*/ 
  [v-cloak] {
    display: none;
  }
</style>

<div v-cloak>
  {{ message }}
</div

二、v-once

作用：只渲染元素和组件一次，之后元素和组件将失去响应式

注意：该指令后面不需要跟任何表达式（比如v-for后面跟的是表达式）

如何理解响应式：

1、布局响应式：随着终端设备的屏幕尺寸的变化而改变布局

2、数据响应式：数据变化后页面随之变化，页面中的数据变化代码中的数据也跟着变化（双向数据绑定）

<div id="app">
  <h3>{{message}}</h3>
  <!-- 添加v-once后，修改data中的message，页面展示的内容将不会发生改变 -->
  <div v-once>{{message}}</div>
</div>
<script src="./js/vue.js"></script>
<script type='javascript'>
  const vm = new Vue({
      el: '#app',
      data: {
          message: '你好世界'
      }
  })
</script>

三、v-html

作用：将内容按照html插入

例：将字符串作为链接在页面进行展示（如下）

<div id="app">
  <h1>{{url}}</h1>
  <h1 v-html="url"></h1>
</div>
<script src="./js/vue.js"></script>
<script type='javascript'>
  const vm = new Vue({
      el: '#app',
      data: {
          url: '<a href="http://www.baidu.com">百度一下</a>'
      }
  })
</script>

四、v-text

作用：将内容按照文本插入，可以代替mustache语法

缺点：不够灵活，不如mustache（双大括号）语法后面可以跟其他内容

<div id="app">
  <h1>{{url}},可以拼接内容</h1>
  <!-- 以纯文本进行展示，并且标签内的内容（如果有）不会展示 -->
  <h1 v-text="url"></h1>
</div>
<script src="./js/vue.js"></script>
<script type='javascript'>
  const vm = new Vue({
      el: '#app',
      data: {
          url: '<a href="http://www.baidu.com">百度一下</a>'
      }
  })
</script>

五、v-pre

作用：跳过这个元素和它的子元素的编译过程，可用来显示原始的mustache标签

例：页面展示为{{ this will not be compiled }}

<span v-pre>{{ this will not be compiled }}</span>

六、v-bind

作用：动态的绑定一个或多个attribute，或一个prop

简写：：（冒号）

应用场景：

1、比如动态的绑定a元素的href属性

2、比如动态的绑定img元素的src属性

<div id="app">
  <a v-bind:href="url"></a>
  <!-- 简写 -->
  <a :href="url"></a>
</div>
<script src="./js/vue.js"></script>
<script type='javascript'>
  const vm = new Vue({
      el: '#app',
      data: {
          url: '<a href="http://www.baidu.com">百度一下</a>'
      }
  })
</script>

3、比如动态的绑定class

<style>
    .active{
        color: red;
    }
</style>
<div id="app">
    <h1 v-bind:class="active">{{msg}}</h1>
    <h1 v-bind:class="{active: isActive}">{{msg}}</h1>
</div>
<script src="./js/vue.js"></script>
<script type='javascript'>
  const vm = new Vue({
      el: '#app',
      data: {
          msg: '你好',
          active: active,
          isActive: true
      }
  })
</script>

七、v-on

作用：绑定事件监听器（事件绑定）

简写：@

<!-- 常规写法 -->
<button v-on:click="btnFun"></button>
<!-- 缩写 -->
<button @click="btnFun"></button>

事件处理函数传参

<!-- 事件处理函数调用：直接写函数名 -->
<button @click="say"></button>

<!-- 事件处理函数调用：常规调用 -->
<button @click="say('hi',$event)"></button>

在不传递自定义参数的时候，上述两种用法均可以使用；但是如果需要传递自定义参数的话，则需要使用第2种方式。

事件对象的传递与接收注意点：

1、如果事件直接使用函数名并且不屑小括号，那么默认会将事件对象作为唯一参数进行传递

2、如果使用了常规的自定义事件调用（只要写了小括号），需要使用事件对象必须作为最后一个参数进行传递，且事件对象的名称必须是“$event”

事件修饰符：处理事件的特定行为

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

更多事件修饰符请参考官方文档：https://cn.vuejs.org/v2/api/#v-on

八、循环分支指令

作用：根据一组数组或者对象的选项列表进行渲染

循环指令：v-for

数组遍历

<!-- 模板部分 -->
<ul>
    <!-- 直接取值 -->
    <li v-for='item in fruits'>{{item}}</li>
    <!-- 带索引下标 -->
    <li v-for='(item,index) in fruits'>{{item}}{{index}}</li>
</ul>

<!-- JavaScript部分 -->
......
data: {
    fruits: ['apple','pear','banana','orange']
}
......

遍历key的作用：提高性能，不影响显示效果（如果没有id，可以考虑采用索引）

<ul>
    <li :key='item.id' v-for='(item,index) in fruits'>{{item}}</li>
</ul>

对象遍历

<!-- 模板部分 -->
<ul>
    <li v-for='(value,key,index) in obj'>{{value + '-' + key + '-' + index}}</li>
</ul>

<!-- JavaScript部分 -->
......
data: {
    obj: {
        username: 'zhangsan',
        age: 18,
        gender: 'male'
    }
}
......

分支指令：根据表达式的布尔值（true/false）进行判断是否渲染该元素

1、v-if，v-if可以单独使用，也可以配合v-else、v-else-if一起使用

2、v-else

3、v-else-if

4、v-show，根据表达式的真假，切换元素的display属性

<!-- 模板部分 -->
<div v-if="score >= 90">
  优秀
</div>
<div v-else-if="score >= 80 && score < 90">
  良好
</div>
<div v-else-if="score >= 70 && score < 80">
  一般
</div>
<div v-else>
  不及格
</div>
<!-- v-show -->
<div v-show='flag'>测试v-show</div>

<!-- JavaScript部分 -->
......
data: {
    score: 88,
    flag:false
}
......

v-if和v-show的区别：

1、v-if控制元素是否渲染

2、v-show控制元素是否显示（已经渲染，display：none，显示内容高频切换时使用）

九、v-model

作用：表单元素的绑定，在表单控件或者组件上创建双向绑定

v-model会忽略所有表单元素的value、checked、selected特性的初始值，而总是将Vue实例的数据作为数据来源，应该在data选项中声明初始值。

1、修饰符

.lazy：取代 input 监听 change 事件，默认情况下Vue的数据同步采用input事件，使用.lazy将其修改为失去焦点时触发

 

.number：自动将用户的输入值转为数值类型（如果能转的话）

.trim：自动过滤用户输入的首尾空白字符

2、普通文本上使用

<div id='app'>
  <p>{{message}}</p>
  <input type='text' v-model='message'>

  <!-- v-model其实是`语法糖`,它是下面这种写法的简写,这种语法对语言的功能并没有影响，但是更方便程序员使用 -->
  <input type='text' :value='msg' @input='msg=$event.target.value'/>
</div>

<script type='text/javascript'>
new Vue({
  el: '#app',
  data: {
    msg: 'message默认值'
  }
})
</script>

3、多行文本上使用

<div id='app'>
    <textarea v-model="message"></textarea>
</div>

<script type='text/javascript'>
new Vue({
    el: '#app',
    data: {
        message: '我是多行文本内容'
    }
})
</script>

注意：在多行文本框中使用插值表达式无效（此时，其只能接受数据，不能改变数据）

4、单个复选框上使用

<div id='app'>
    <input type="checkbox" v-model="checked">
</div>

<script type='text/javascript'>
new Vue({
    el: '#app',
    data:{
        checked:true
    }
})
</script>

5、多个复选框上使用

<div id='app'>
    <input type="checkbox" value="html" v-model="checkedNames">
    <input type="checkbox" value="css" v-model="checkedNames">
    <input type="checkbox" value="js" v-model="checkedNames">
</div>

<script type='text/javascript'>
new Vue({
    el: '#app',
    data:{
        // 如果数组中有对应的value值，则此checkbox会被选中
        checkedNames:[]
    }
})
</script>

注意：此种用法需要input标签提供value属性，并且需要注意属性的大小写要与数组元素的大小写一致

6、单选按钮上使用

<div id='app'>
    男<input type="radio" name="sex" value="男" v-model="sex">
    <!-- 注：使用v-model后可以省略name属性 -->
    <!-- 男<input type="radio" value="男" v-model="sex"> -->
    女<input type="radio" name="sex" value="女" v-model="sex">
</div>

<script type='text/javascript'>
new Vue({
    el: '#app',
    data: {
        sex: '女'
    }
})
</script>

7、下拉框上使用

<div id='app'>
    <!-- select中multiple属性：进行多选 -->
    <select v-model="selected">
        <option>请选择</option>
        <option>HTML</option>
        <option>CSS</option>
        <option>JS</option>
    </select>
</div>

<script type='text/javascript'>
new Vue({
    el: '#app',
    data: {
        selected: 'JS'
    }
})
</script>

8、v-model是语法糖

v-model是v-bind和v-on的语法糖

<div id='app'>
    <input type="text" v-model="message">
    <input type="text" :value="message" @input="valueChange">
    <h2>{{message}}</h2>
</div>

<script type='text/javascript'>
new Vue({
    el: '#app',
    data: {
        message: '你好'
    },
    methods:{
        valueChange(event){
            this.message = event.target.value
        }
    }
})
</script>

十、自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。

在 Vue2.0 中，代码复用和抽象的主要形式是组件。

然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

自定义指令分为：全局指令和局部指令，当全局指令和局部指令同名时以局部指令为准。

 

自定义指令常用钩子函数有：

1、bind：在指令第一次绑定到元素时调用

2、inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)

3、update：数据更新时调用

注意：不管在定义全局还是局部自定义指令时，所提及的指令名均是不带v-前缀的名称。

// 无参(v-once/v-cloak)
Vue.directive('指令名',{
    钩子函数名: function(el[,....]){
      // 业务逻辑
      // el参数是挂载到的元素的DOM对象
    }
}
// 传参(v-text/v-html/v-model)
Vue.directive('指令名',{
    钩子函数名: function(el,binding[,....]){
        let param = binding.value
        // 业务逻辑
    },
    ....
}            

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

全局自定义指令不能写在Vue实例中（或者某个组件中）。

如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
  指令名: {
    // 指令的定义
    钩子函数名: function (el,binding) {
      // 业务逻辑
    }
  }
}

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus property，如下：

<input v-focus>

案例：

1、使用全局指令定义自定义的v-red（不传参）和v-color（传参）

2、使用局部自定义指令实现v-mobile（不传参）验证用户输入的是否是合法的手机号

<div id="app">
  <!-- 全局自定义指令 -->
  <div v-red>v-red指令的效果{{msg}}</div>
  <div v-color="'green'">v-color指令的效果</div>

  <!-- 自定义指令 -->
  <input type="text" v-model='phone' v-mobile>
</div>

<script src="./js/vue.js"></script>
<script>
  // 全局自定义指令 v-red 、 v-color
  Vue.directive('red',{
    inserted: function(el){
      // 给元素加上红色
      el.style.color = 'red'
    }
  })
  Vue.directive('color',{
    inserted: function(el,binding){
      el.style.color = binding.value
    }
  })

  new Vue({
    el: '#app',
    data: {
      msg: '123',
      phone: ''
    },
    // 局部自定义指令
    directives: {
      mobile: {
        update: function(el){
          //console.log(el.value);
          if(!(/^1[3-9]\d{9}$/.test(el.value))){
            el.style.color = 'red'
          }else{
            el.style.color = 'black'
          }
        }
      }
    }
  })
</script>