Vue--DOM渲染的方式

深藏阁楼爱情的钟 2023-02-12 08:27 13阅读 0赞

# 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')
    }

> 事件修饰符前缀

<table> 
 <thead> 
  <tr> 
   <th>修饰符</th> 
   <th>前缀</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>.passive</td> 
   <td>&amp;</td> 
   <td>yidongduan</td> 
  </tr> 
  <tr> 
   <td>.capture</td> 
   <td>!</td> 
   <td>当事件触发时，阻止事件捕获</td> 
  </tr> 
  <tr> 
   <td>.once</td> 
   <td>~</td> 
   <td>事件被触发一次后即解除监听</td> 
  </tr> 
  <tr> 
   <td>.capture.once/ .once.capture</td> 
   <td>~!</td> 
   <td>事件被触发一次后即解除监听并阻止事件捕获</td> 
  </tr> 
 </tbody> 
</table>

> 部分事件修饰符与原生js的对照表

<table> 
 <thead> 
  <tr> 
   <th>修饰符</th> 
   <th>原生JS</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>.stop</td> 
   <td>event.stopPropagation()</td> 
  </tr> 
  <tr> 
   <td>.prevent</td> 
   <td>event.preventDefault()</td> 
  </tr> 
  <tr> 
   <td>.self</td> 
   <td>if(event.target !== event.currentTarget) return</td> 
  </tr> 
  <tr> 
   <td>.enter / .13</td> 
   <td>if(event.keyCOde != 13) return</td> 
  </tr> 
  <tr> 
   <td>.ctrl</td> 
   <td>if(! event.ctrlKey) return</td> 
  </tr> 
 </tbody> 
</table>

### 选项的优先级 ###

el、template、render这三个选项的功能是一致的—获取实例模板（指定或者是创建），当这三个选项同时存在时：  
render优先被执行，其次是template。