vue中的EL理解

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

那么什么是挂载？

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

 

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

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

 

挂载的方式：

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

创建Vue时便进行了挂载

?
1
2
3
4
5
6
7
<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>
<script>
new Vue({el:'#app'})
</script>

　　

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

?
1
2
3
4
5
6
7
8
9
10
<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

 

posted on   越哲  阅读(1111)  评论(0)  编辑  收藏  举报

相关博文：
· VUE VANT H5项目总结
· API网关
· 【Vue】el 和 $mount 的区别
· Vue实例的两种挂载方式
· vue源码学习-实例挂载的实现
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示