首页 > 其他分享> 文章详细

vue中的EL理解

2022-08-22 01:04:44 阅读：141 来源： 互联网

标签：EL vue 实例 mount 理解 Vue 挂载选择器 css

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue中的EL理解