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。