Vue2的指令

Vue

Vue指令

v-text

<h2 v-text="message+'!'"></h2>

message为data对象中的键值对，不能解析标签,会替换标签内的内容

{{ }}

<h2>深圳{{ message+"!" }}</h2>

插值表达式可以进行字符串拼接，只是内容的占位符，不会覆盖原内容

差值表达式内支持js表达式的运算甚至数组字符串方法操作

只能用在元素的内容节点，不能用在元素的属性节点

除了可以显示表达式，还是可以显示Vue实例上面的属性

v-html

<h2 v-html="message+'!'"></h2>

message为data对象中的键值对

与v-text相似但可以解析标签

v-on

为元素绑定事件

  <div id="app">
    <input type="button" value="事件绑定" v-on:click="dolt">
    <input type="button" value="事件绑定" @click="dolt">
    <input type="button" value="事件绑定" @click="dolt1($event,p2)">
    <input type="button" value="事件绑定" @click="a='我是新的值'">
    <input type="button" value="事件绑定" @keyup.enter="dolt">
  </div>

var app = new Vue({
  el:'#app',
  methods:{
    dolt:function(){
      //code
    }
    dolt1:function(p1,p2){
      //code
    }
  }
})

使用v-on进行绑定或简写成@ 事件执行函数则在Vue实例的methods中

当methods中的函数需要对data中的变量进行修改时，this.变量就能读取

可以携带参数，在调用的函数名后传入形参

也可以在事件帮i的那个当中写简单语句

事件对象

当v-on绑定事件需要使用事件对象时

当调用函数没有传参，那可以在函数内部直接使用e事件对象（与事件监听相同）

当调用函数需要传参时，则需要在传参时使用$event传入并在函数内部进行接收

事件修饰符

事件修饰符	说明
.prevent	阻止默认行为
.stop	阻止事件冒泡
.capture	捕获阶段处理事件函数
.once	只触发一次
.self	只会触发自己范围内的事件，不会包含子元素
.native	监听组件根元素的原生事件
.left	只有点击鼠标左键触发
.right	只有点击鼠标右键触发
.middle	只有点击鼠标中键触发
.passive	以 { passive: true } 模式添加侦听器
` . { keyCode	keyAlias}`

键盘事件修饰符

事件修饰符	说明
.enter	回车键
.tab	制表键
.delete	含delete和backspace键
.esc	返回键
.space	空格键
.up	向上键
.down	向下键
.left	向左键
.right	向右键

鼠标事件修饰符

事件修饰符	说明
.left	鼠标左键
.middle	鼠标中间滚轮
.right	鼠标右键

修饰键

可以用修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应

事件修饰键	说明
.ctrl	ctrl键
.alt	alt键
.shift	shift键
.meta	mac 的 command 键 (⌘)
.exact	控制由精确的系统修饰符组合触发事件（有且仅有加入的修饰符才有效）

<!--eg：-->
<button @click.ctrl.alt.exact= "fn1">
<!-- 有且仅有按住ctrl+alt+点击才能触发fn1 -->

绑定多个事件

<!-- 同类型 -->
<button v-on:click="fn1(),fn2()">按钮</button>
<button v-on:click="fn1();fn2()">按钮</button>

<!-- 不同类型 -->
<button v-on="{click: clickChange, mouseover: mouseChange}">按钮</button>

主动触发click事件

// scroll 标签的ref  <div @click=""></div> 需要绑定click
this.$refs.scroll.$trigger("click")

v-show

根据表达式的真假，切换元素的显示和隐藏

  <div id="app">
    <img src="地址" v-show="true">
    <img src="地址" v-show="isShow">
    <img src="地址" v-show="age>18">
  </div>

v-show后可以接布尔值 data中的变量 表达式等等

v-if

根据表达式的真假，切换元素的显示和隐藏(操纵dom元素)

v-if后可以接布尔值 data中的变量 表达式等等

与v-show类似，区别为v-show是display显示与隐藏 none或非none

v-if则直接在dom文档中将元素注释，因此需要使用更多内存

v-if 引起页面的reflow（重排）v-show 引起页面的redraw（重绘）v-show性能消耗更小

v-else-if

充当v-if的else-if，可以连续使用

必须配合v-if一起使用，否则不会被识别

v-else

当前面 v-if，v-else-if均不符合条件时执行，所以v-else后不需跟判断条件

v-bind

设置元素的属性(比如:src,title,class)

<div id="app">
    <img v-bind:src="imgSrc">
    <img v-bind:tittle="imgtitle+'!!!!'">
    <img v-bind:style="{height:'100px'}">
    <img v-bind:class="isActive?'active':''">
    <img v-bind:class="{active:isActive}">
  </div>
<!--可以简写为-->
<div id="app">
    <img :src="imgSrc">
    <img :tittle="imgtitle+'!!!!'">
    <img :style="{height:'100px'}">   <!-- 代表动态绑定一个样式对象,他的值是一个{}样式对象 -->
    <img :class="isActive?'active':''">
    <img :class="{active:isActive}">    <!-- active类名存不存在取决于isActive真假 -->
  </div>

var app = new Vue({
  el:"#app",
  data:{
    imgSrc:"图片地址",
    imgTitle:"黑马程序员",
    isActive:false
  }
})

设置动态属性

 <a :[myHref]="href">百度</a>

export default {
  data () {
    return {
      myHref: 'href',
      href: 'http://www.baidu.com'
    }
  }
}

class绑定对象

 <div :class="{'active': isActive, 'error': hasError}"></div>

export default {
  data () {
    return {
      isActive: true,
      hasError: false
    }
  }
}

对应为true则添加类 为false则不添加

class绑定多个动态属性

 <!-- class绑定对象 -->
 <div :class="{'active': isActive, 'error': hasError}"></div>
 <!-- class与v-bind:class 一起使用 -->
 <div class="blue" :class="{'active': isActive}"></div>
 <!-- class绑定数组 -->
 <div :class="[errorClass, baseClass]"></div>

class数组结合三目

 <div :class="[isActive? activeClass:errorClass]"></div>

export default {
  data () {
    return {
      isActive: true,
      activeClass: 'active',
      errorClass: 'error'
    }
  }
}

对应为true则添加类 为false则不添加

v-for

根据数据生成列表结构

 <div id="app">
    <ul>
      <li v-for="(item,index) in arr" :title="item">
        {{index}}{{item}}
      </li>
      <li v-for="(item,index) in objArr">
        {{index.name}}
      </li>
    </ul>
  </div>

var app = new Vue({
  el:"#app",
  data:{
    arr:[1,2,3,4,5],
    objArr:[
		{name:"jack"},
		{name:"rose"}
	]
  }
})

注：

将v-for标签循环生成，遍历多少次生成多少个

item为遍历的每个元素（如果数组中存的对象则item为整个对象），index为索引

使用v-for必须要配合:key使用，提升性能，防止列表状态紊乱

key的值只能是字符串或数字，且必须具有唯一性

建议把id作为key，使用index作为key没有意义（index会变动）

v-for可以遍历字符串 遍历生成字符串长度的结构 （‘abc’，生成3个结构且item分别为a，b，c）

v-for可以遍历整数 遍历生成数字大小的结构 （3，生成3个结构且item，index相同）

v-for与v-if无法连用 如果需要一起使用需要模板

 <template v-for="(item, index) in arr" :key="index">
      <li  v-if="item.checked">
        <input type="checkbox">
      </li>
    </template>

v-model

获取和设置表单元素的值（双向数据绑定）

 <div id="app">
   <input type="text" v-model="message">
 </div>

  const app =new Vue({
    el:"#app",
    data:{
      message:"ccc"
    }
  })

通过v-model绑定后表单修改值会同步到data中，可以进行调用，data中值修改同样作用在表单中

与普通元素也能绑定但没意义

v-model修饰符

对用户输入的内容进行处理

事件修饰键	作用
.number	自动将用户输入的值转为数字类型
.trim	自动过滤用户输入的首尾空格
.lazy	在’change’时而非’input’时更新

与checkbox双向数据绑定

 <ul>
      <li v-for="(item, index) in arr" :key="index">
        <input type="checkbox" v-model="item.checked">
      </li>
    </ul>

v-once

数据只绑定一次，后续数据修改不更新

<div v-once>{{ a }}</div>

v-pre

跳过这个元素和他的子元素的编译过程 用来显示原始的Mustache标签

跳过大量没有指令的节点会加快编译速度

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

页面中直接显示标签内的内容（不进行vue的编译）

{{ this will not be compiled }}

v-cloak

这个指令保持在元素上知道关联实例结束编译

和css规则一起使用时，这个指令可以隐藏未编译的Mustache标签直到实例准备结束

[v-cloak]{
	display:none;
}

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

不会显示 直到编译结束

自定义命令

Vue自定义指令

在每个vue组件中，可以在directives节点下声明私有自定义指令

<h1 v-s>hello vue</h1> //v-为命令前缀 本质上命令为s

<h1 v-s="'red'">hello vue1</h1>
//可以通过=后面进行命令函数的传参
//可以为变量，如果是字符串则需在嵌套单引号（v-bind）


new Vue({
    directives:{
      s:{
        bind(el,binding,Vnode,oldVonde){
        // 接收四个参数 第一个为当前指令所挂载的元素 
        // 第二个为当前指令的参数 为一个对象，包含了命令的信息，.value才是具体传入的值（指令的传参）
        // 第三个为Vue 编译生成的虚拟节点 通过 .context可以获取到Vue实例
        // 第四个为一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用
        
        //code
      }
      }
    }
  }).$mount('#app')

钩子函数

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中，因为DOM节点插入是异步的)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
指令的值可能发生了改变，也可能没有。
但是可以通过比较更新前后的值来忽略不必要的模板更新。
先触发update再触发componentUpdated

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

注：

在自定义指令的钩子函数中不能通过访问this的形式来获取组件实例自身

只能通过传参中的Vnode虚拟节点下的context获取当前组件实例

directives: {
    s: {
	  // bind函数只调用一次，当指令第一次绑定到元素时调用，当DOM更新时bind函数不会被触发
      bind(el,binding,Vnode,oldVonde) {
        el.style.color = binding.value
      },
      // update函数会在每次DOM更新时被调用
      update(el,binding,Vnode,oldVonde) {
        el.style.color = binding.value
      },
      inserted(el,binding,Vnode,oldVonde){ ... },
      componentUpdated(el,binding,Vnode,oldVonde){ ... },
      unbind(el,binding,Vnode,oldVonde){ ... },
    }
  }

函数简写

当bind函数与update函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式

directives: {
	//在insert和update时，会触发相同的业务逻辑
    s(el,binding) {
        el.style.color = binding.value
      }
  }

全局自定义指令

全局共享的自定义指令需要通过"Vue.directive()"继续声明

//参数1：字符串，用来表示全局自定义指令的名字
//参数2：对象，用来接收指令的参数值

Vue.directive('s', function(el,binding,Vnode,oldVonde) {
  el.style.color = binding.value
})

Vue.directive('ani',{
    inserted(el,binding,Vnode,oldVonde){
      el.classList.add('ant')
    }
})

此时用的为简写函数形式，也可以写成对象形式