Vue--DOM渲染的方式

DOM渲染

1. 指定被掛載元素

el選項用於指定Vue實例的掛載目標，其方式大概有以下3點

• CSS選擇器方式

let app = new Vue({
            el:'#app',  //選擇器
            data(){
                return{
                    msg:'掛載成功。。。'
                }
            }
        });

• DOM節點方式

let app2 = new Vue({
            el:document.getElementById("app2"),  //DOM節點
            data(){
                return{
                    msg:'掛載成功。。。'
                }
            }
        });

• 手動掛載

let handleMount = function () {
            app3.$mount('#app3');
        }

2. 渲染函數render

render函數同樣也可以用於渲染視圖，它提供了回調方法createElement以供我們創建Dom節點。

render(createElement){
    return createElement('p','Hello World')
}

事件修飾符前綴

修飾符	前綴	說明
.passive	&	yidongduan
.capture	!	當事件觸發時，阻止事件捕獲
.once	~	事件被觸發一次後即解除監聽
.capture.once/ .once.capture	~!	事件被觸發一次後即解除監聽並阻止事件捕獲

部分事件修飾符與原生js的對照表

修飾符	原生JS
.stop	event.stopPropagation()
.prevent	event.preventDefault()
.self	if(event.target !== event.currentTarget) return
.enter / .13	if(event.keyCOde != 13) return
.ctrl	if(! event.ctrlKey) return

選項的優先級

el、template、render這三個選項的功能是一致的—獲取實例模板（指定或者是創建），當這三個選項同時存在時：
render優先被執行，其次是template。