阅读 85

Vue 指令总结

准备

  • 什么是vue指令?
  • 怎么使用vue指令?

什么是vue指令?

  • 在vue中提供了一些对于页面+数据的更为方便的输出,这种操作就叫指令,vue中以 v-xxx 表示,类似html页面中的属性 <div v-xxx></div>
  • 在vue中以 v-xxx 开头的就叫做指令
  • 指令中封装了一些DOM行为,结合属性作为一个暗号,暗号对应的值,根据不同的值,框架会进行相关的DOM操作和绑定

vue中常用的指令

  • v-text 元素的innerText属性,必须是双标签
  • v-html 元素的innerHTML属性
  • v-if 判断是否插入这个元素 (族群:v-if | v-else-if | v-else)
  • v-show 隐藏元素,如果确定要隐藏,会给元素的style加上display:none;
v-text 只能用在双标签中 其实就是给元素的innerText赋值
v-html 其实就是给元素的innerHTML赋值
v-if 如果值为false,会留下一个<!---->作为标记,万一未来v-if的值是true了,就在这里插入元素,如果有if和else就不需要单独留坑了,如果全部用上 v-if 相邻 v-else-if 相邻 v-else,否则 v-else-if可以不用,v-if 和 v-else-if 都有等于对应的值, 而v-else是直接写,v-if 家族都是对元素进行插入和移除的操作
v-show 表示是否显示
复制代码

v-bind的使用

  • 给元素绑定动态属性
  • 语法在元素上 v-bind:属性名="常量||变量",简写形式 :属性名="常量||变量"

v-on的使用

  • 给元素绑定事件
  • 普通使用 v-on:事件名="表达式||函数名"
  • 简写方式 @事件名="表达式"

v-model的使用

  • 数据双向绑定
    • vue实例中data数据变化会直接更新input的value值,用户输入的value能直接更新绑定实例中的值
  • 使用 <input v-model="data中定义的变量" />
  • v-bind (单向) 与 v-model(双向)
    • v-bind 对属性的简单赋值,当实例中的值改变,会触发重新渲染
    • v-model 实例中的值与input的value值相互影响

v-for的使用

  • 语法 <div v-for="item in arr"></div>
  • 对象的操作 <div v-for="item in obj"></div>
  • 如果是数组没有id v-for="(item, index) in arr" :key="index" :class="index"

vue中动态class与style

// 如何将下面的样式或class动态绑定
.red {background-color: red; }
.big { font-size: 50px; }
// class动态写法
<div :class="{'red': true, 'big': ture }" ></div>
// style动态写法
<div :style="`background-color: red;font-size: 50px;`" ></div>
<div :style="{'background-color': 'red', 'font-size': '50px' }" ></div>
复制代码

自定义指令

如果需要直接操作DOM,那么就会用到自定义指令啦

1. 注册

注册自定义指令分为全局注册与局部注册两种

2. 全局注册
  Vue.directive('xxx', {
      inserted: function (el) {
         //指令属性
      }
  });
复制代码
3. 局部注册
  var app = new Vue({
    el: '#app',
    directives: {
        xxx: {
            //指令属性
        }
     }
  });
复制代码
4. 属性

自定义指令属性包括这些钩子函数

钩子函数说明
bind只调用一次,第一次绑定指令到元素时调用,我们可以在此绑定只执行一次的初始化动作。
inserted被绑定元素插入父节点时调用(父节点只要存在即可调用,不必存在于 document 中)。
componentUpdated被绑定元素所在模板完成一次更新周期时调用。
unbind指令与元素解绑时调用,只调用一次。

假设我们需要自定义一个v-focus指令,即在input或者textarea标签初始化获取焦点

<!-- html -->
<div id="app">
    <input type="text" v-focus>
</div>
复制代码
// javascript
//全局注册
Vue.directive('focus', {
    inserted: function (el) {
    	// el 表示当前元素
        el.focus();//聚焦
    }
});
复制代码

这些钩子函数入参如下:

入参说明
el指令所绑定的元素,可利用它直接操作 DOM
binding绑定对象。
vnode编译生成的虚拟节点。
oldVnode上一个虚拟节点,仅在 update 与 componentUpdated 中可用。

绑定对象属性(binding)说明:

属性说明示例
name指令名,不包含前缀 v-。v-focus 中的 focus。
value指令所绑定的值(计算后)。v-focus=“1 + 2” 中的 3。
oldValue指令所绑定的前一个值,无论值是否改变都有值,且仅在 update 与 componentUpdated 中可用。 -
expression绑定的值的字符串形式(不计算)。v-focus=“1 + 2” 中的 1 + 2。
arg传递给指令的参数。v-focus:xxx 中的 xxx。
modifiers包含修饰符的对象。v-focus.a.b 中,为 {a:true, b:true}。

实例如下:

<!-- html -->
<div id="app">
    <div v-directive:content.a.b="content"></div>
</div>
复制代码
// javascript
Vue.directive('directive', {
    bind: function (el, binding, vnode) {
        var keys = [];
        for (var i in vnode) {
            keys.push(i);
        }
        el.innerHTML =
            'names:' + binding.name + '<br>' +
            'value:' + binding.value + '<br>' +
            'expression:' + binding.expression + '<br>' +
            'arg:' + binding.arg + '<br>' +
            'modifiers:' + JSON.stringify(binding.modifiers) + '<br>' +
            'vnode keys:' + keys.join(', ');
    }
});
var app = new Vue({
    el: '#app',
    data: {
        content: '退休一起送外卖'
    }
});
复制代码

渲染结果:

names:deniro-directive
value:退休一起送外卖
expression:content
arg:content
modifiers:{"a":true,"b":true}
vnode keys:tag, data, children, text, elm, ns, context, functionalContext, key, componentOptions,
componentInstance, parent, raw, isStatic, isRootInsert, isComment, isCloned, isOnce
复制代码
文章分类
前端
文章标签