Vue的基础理解(六)
<h4>Vue中 v-html有什么作用？会导致什么问题？</h4>
<ul>
<li>v-html可以用来识别HTML标签并渲染出去。</li>
</ul>
<p><strong>导致问题：</strong>在网站上动态渲染html,很容易导致xss攻击，所以只能在可信内容上使用v-html，且永远不能用于用户提交的内容上。</p>
<hr />
<h4>keep-alive在vue中的作用是什么？</h4>
<ul>
<li>keep-alive是Vue提供的抽象组件，用来对组件进行缓存，从而节省性能，</li>
<li>当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行</li>
<li><strong>被包裹在keep-alive中的组件的状态将会被保留</strong>，例如我们将某个列表类组件内容滑动到第100条位置，那么我们在切换到一个组件后再次切换回到该组件，该组件的位置状态依旧会保持在第100条列表处</li>
</ul>
<hr />
<h4>如何新增自定义指令？</h4>
<p>除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。</p>
<ul>
<li>注册全局指令</li>
</ul>
<pre><code class="language-javascript">//自定义全局指令 v-focus
Vue.directive('focus',{
//当绑定元素插入到DOM中
inserted:function(el,binding,vnode){
}
})</code></pre>
<ul>
<li>注册局部自定义指令，组件中接受directives的选项。</li>
</ul>
<pre><code class="language-javascript">var app = new Vue({
el: '#app',
data: {
},
// 创建指令(可以多个)
directives: {
// 指令名称
focus: {
inserted(el) {
// toDo
}
}
}
})
</code></pre>
<ul>
<li>指令使用：</li>
</ul>
<pre><code class="language-javascript"><input v-focus></code></pre>
<hr />
<h4>如何自定义过滤器？</h4>
<p>为了方便使用，Vue.js 允许使用者通过简单的方式来自定义过滤器，即，利用管道 “ | ” 来完成过滤。</p>
<ul>
<li>全局注册</li>
</ul>
<pre><code class="language-javascript">Vue.filter('reverse',function(value){
return value.split('').reverse().join('')
})</code></pre>
<ul>
<li>局部注册</li>
</ul>
<pre><code class="language-javascript">var app = new Vue({
el: '#app',
data: {
},
// 创建指令(可以多个)
filters: {
// 指令名称
reverse:function(value){
// toDo
return value.split('').reverse().join('');
}
}
})</code></pre>
<ul>
<li>过滤器使用</li>
</ul>
<pre><code><span>{{message | reverse}}</span></code></pre>