Vue的基础理解(六)

Vue中 v-html有什么作用？会导致什么问题？

v-html可以用来识别HTML标签并渲染出去。

导致问题：在网站上动态渲染html,很容易导致xss攻击，所以只能在可信内容上使用v-html，且永远不能用于用户提交的内容上。

keep-alive在vue中的作用是什么？

keep-alive是Vue提供的抽象组件，用来对组件进行缓存，从而节省性能，
当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行
被包裹在keep-alive中的组件的状态将会被保留，例如我们将某个列表类组件内容滑动到第100条位置，那么我们在切换到一个组件后再次切换回到该组件，该组件的位置状态依旧会保持在第100条列表处

如何新增自定义指令？

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

注册全局指令

//自定义全局指令 v-focus
Vue.directive('focus',{
	//当绑定元素插入到DOM中
	inserted:function(el,binding,vnode){
		
	}
})

注册局部自定义指令，组件中接受directives的选项。

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        focus: {
            inserted(el) {
                //  toDo
            }
        }
    }
})

指令使用：

<input v-focus>

如何自定义过滤器？

为了方便使用，Vue.js 允许使用者通过简单的方式来自定义过滤器，即，利用管道 “ | ” 来完成过滤。

全局注册

Vue.filter('reverse',function(value){
	return value.split('').reverse().join('')
})

局部注册

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    filters: {
        // 指令名称
        reverse:function(value){
            // toDo
	    return value.split('').reverse().join('');
        }
    }
})

过滤器使用

<span>{{message | reverse}}</span>

来源：oschina

链接：https://my.oschina.net/u/4461771/blog/3182863

标签

vue