其他分享
首页 > 其他分享> > vue中的EL理解

vue中的EL理解

作者:互联网

el 的作用:用于指明 Vue 实例的挂载目标。

那么什么是挂载?

虚拟dom与真实dom建立关系,让Vue实例控制页面中的某个区域的过程,称之为挂载。挂载的方式有:1、通过“el:'css选择器'”语句进行配置;2、通过“Vue实例.$mount("css选择器")”语句进行配置。

 

那么vue里面提到的挂载是什么意思?

让Vue实例控制页面中的某个区域的过程,称之为挂载。

 

挂载的方式:

1、通过 `el:“css选择器” 进行配置

创建Vue时便进行了挂载

<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>
<script>
new Vue({el:'#app'})
</script>

  

2、通过 Vue实例.$mount("css选择器")进行配置

<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>
<script>
new Vue({
  ...
})
Vue.$mount('#app');
</script>

  

创建Vue了之后进行挂载

$ 作用是为了区别 Vue 实例中的数据名称等相同(防止重名)

 

$mount方法是用来挂载我们的扩展的

var judy = Vue.extend({
            template:'<p>{{message}}</p>',
            data: function () {
                return{
                    message:'I am Judy'
                }
            }
 
        });
        var vm = new judy().$mount('#app')
<div id="app">
    {{message}} 
</div>

 

template:模版占位符的意思,Vue推荐此写法,即渲染时不会将此渲染,造成多余的标签。

 优先级说明:https://blog.csdn.net/l1996729/article/details/106297700/

 三种写法:https://www.jb51.net/article/197836.htm

 

标签:EL,vue,实例,mount,理解,Vue,挂载,选择器,css
来源: https://www.cnblogs.com/oocn/p/16611521.html