【vue学习】指令

image

不常用指令

1. v-text

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

2. v-html

<div v-html="html"></div>

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理。

3. v-pre

两个大括号之间不会按变量显示。

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

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

4. v-cloak

未编译完成时，页面上不会出现{{ message }}（不加该指令，有时候可能会出现）

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

配合下面的样式一起使用：

[v-cloak] {
  display: none;
}

5. v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

自定义指令

官网案例

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

//如果想注册局部指令，组件中也接受一个 directives 的选项：
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

//使用
<input v-focus>

钩子函数

image

1. 钩子函数有哪些？

• bind：只调用一次，指令第一次绑定到元素时调用

• inserted：被绑定元素插入父节点时调用

• update：所在组件的 VNode 更新时调用

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

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

2. 钩子函数的参数
   image

• arg: foo&bar，参数可以是动态的，v-mydirective:[argument]="value"
• modifiers:{ foo: true, bar: true }
• oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 中可用。无论值是否改变都可用
• vnode：Vue 编译生成的虚拟节点。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 中可用。
  image

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

3. 官方案例
   image
   image

不关心是哪个钩子

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

binding绑定的value是个对象

image

自定义组件怎么用v-model

（原生表单不用自己另外写一遍）

不同的表单控件，这里绑定的事件不同，下图中的value和input注意下。

image
现在 v-model 就应该可以在这个组件上完美地工作起来了：
image
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

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

典型案例scroll

来自：vue自定义指令的魅力

1. 最简单的(无参)

<script>
Vue.directive('tack',{
    bind(el,binding,vnode){
        el.style.position = 'fixed'
    }
})
</script>
<!--相对应的HTML就是：-->
<p v-tack>I will now be tacked onto the page</p>

2. 如果能接受参数以便后续更新它的表现或者进行复用的话就会更加灵活。

<!-- 如何实现让这个元素离页面顶部有一定的距离 -->
<script>
Vue.directive('tack',{
    bind(el,binding,vnode){ 
        el.style.position = 'fixed'; 
        el.style.top = binding.value + 'px'; 
    } 
}) 
</script>
<!--相对应的HTML就是：-->
<div id="app">
   <p>向下滚动页面</p> 
   <p v-tack="70">我固定在离顶部70px的地方</p> 
</div>

3. 假设我们想要区分偏离的70px是在顶部还是左侧

<script>
Vue.directive('tack',{ 
    bind(el,binding,vnode){ 
        el.style.position = 'fixed'; 
        const s = (binding.arg == 'left'?'left':top); 
        el.style[s] = binding.value + 'px'; 
    } 
})
</script>
<p v-tack:left="70">
    现在我会在距离左侧70px的地方
</p> 

4. 你也可以使用多个值，像自带指令一样用

<script>
Vue.directive('tack',{ 
    bind(el,binding,vnode){ 
        el.style.position = 'fixed'; 
        el.style.top = binding.value.top+'px'; 
        el.style.left = binding.value.left+'px'; 
    } 
})
</script>
<p v-tack="{top:'40',left:'100'}">
    我固定在离顶部40px、左侧100px的地方
</p>

5. 我们还可以编写更复杂的东西，我们可以根据自定义指令来创建和修改方法。这里，我们简单创建一个滚动动画小例子

<script>
Vue.directive('scroll',{ 
    inserted:function(el,binding){ 
        let f = function(evt){ 
            if(binding.value(evt,el)){ 
                window.removeEventListener('scroll',f); 
            } 
        } 
        window.addEventListener('scroll',f); 
    } 
}); 
//main app 
new Vue({ 
    el:'#app', 
    methods:{ 
        handleScroll:function(evt,el){ 
            if(window.scrollY>50){ 
                TweenMax.to(el,1.5,{ y:-10, opacity:1, ease:sine.easeOut }) 
            } 
            return window.scrollY>100; 
        } 
    } 
}); 
</script>

<div class="box" v-scroll="handleScroll"> 
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit..
    </p> 
</div>