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>