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。