image
不常用指令
v-text
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
v-html
<div v-html="html"></div>
在网站上动态渲染任意
HTML是非常危险的，因为容易导致XSS攻击。只在可信内容上使用v-html，永不用在用户提交的内容上。
在单文件组件里，
scoped的样式不会应用在v-html内部，因为那部分HTML没有被Vue的模板编译器处理。
v-pre
两个大括号之间不会按变量显示。
跳过这个元素和它的子元素的编译过程。可以用来显示原始
Mustache标签。跳过大量没有指令的节点会加快编译。
<span v-pre> {{ this will not be compiled }} </span>
v-cloak
未编译完成时，页面上不会出现{{ message }}（不加该指令，有时候可能会出现）
<div v-cloak>
{{ message }}
</div>
配合下面的样式一起使用：
[v-cloak] {
display: none;
}
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
- 钩子函数有哪些？
-
bind：只调用一次，指令第一次绑定到元素时调用
-
inserted：被绑定元素插入父节点时调用
-
update：所在组件的 VNode 更新时调用
-
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
-
unbind：只调用一次，指令与元素解绑时调用。
-
钩子函数的参数
image
-
arg:foo&bar，参数可以是动态的，v-mydirective:[argument]="value" -
modifiers:{ foo: true, bar: true } -
oldValue：指令绑定的前一个值，仅在update和componentUpdated中可用。无论值是否改变都可用 -
vnode：Vue编译生成的虚拟节点。 -
oldVnode：上一个虚拟节点，仅在update和componentUpdated中可用。
image
除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。
-
官方案例
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自定义指令的魅力
- 最简单的(无参)
<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>
- 如果能接受参数以便后续更新它的表现或者进行复用的话就会更加灵活。
<!-- 如何实现让这个元素离页面顶部有一定的距离 -->
<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>
- 假设我们想要区分偏离的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>
- 你也可以使用多个值，像自带指令一样用
<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>
- 我们还可以编写更复杂的东西，我们可以根据自定义指令来创建和修改方法。这里，我们简单创建一个滚动动画小例子
<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>
网友评论