（5）vue.js 基础语法—el选项

最新推荐文章于 2024-06-12 12:19:55 发布

泽哥ins

最新推荐文章于 2024-06-12 12:19:55 发布

阅读量1.5k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_36213140/article/details/122663331

版权

Vue 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

一、el选项介绍

• 用于选取一个 DOM 元素作为 Vue 实例的挂载目标。
• 只有挂载元素内部才会被 Vue 进行处理，外部为普通 HTML 元素。
• 代表 MVVM 中的 View 层（视图）。

• 可以为 CSS 选择器格式的字符串或 HTMLElement 实例，但不能为 html 或 body。

常见报错：Uncaught ReferenceError: Vue is not defined。

该报错表示vue.js没有引入或者没有引入成功。

解决方法：检查vue.js文件是否引入或者引入成功。

二、el选项示例1—通过选择器直接挂载方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05.el选项</title>
</head>
<body>
  <div id="app"></div>
  <script src="js/vue-2.6.14.js"></script>
  <script>
    var vm = new Vue({
      el: '#app'
    })
    console.log(vm.$el);
  </script>
</body>
</html>

• 挂载完毕后，可以通过变量名vm.$el 进行访问。

三、el选项示例2—通过原生js获取元素挂载方式

<body>
  <div id="app"></div>
  <script src="js/vue-2.6.14.js"></script>
  <script>
    var app = document.querySelector('#app')
    var vm = new Vue({
      el: app
    })
    console.log(vm.$el);
  </script>
</body>

四、el选项示例3—通过vm.$mount()方法挂载

• 未设置 el 的 vue 实例，也可以通过 vm.$mount() 进行挂载，参数形式与 el 规则相同。

<body>
  <!-- 挂载元素 -->
  <div id="app"></div>
  <script src="js/vue-2.6.14.js"></script>
  <script>
    var vm = new Vue({});
    vm.$mount('#app')
    console.log(vm.$el);
  </script>
</body>

<body>
  <!-- 挂载元素 -->
  <div id="app"></div>
  <script src="js/vue-2.6.14.js"></script>
  <script>
    var app = document.getElementById('app');
    var vm = new Vue({});
    vm.$mount(app);
    console.log(vm.$el);
  </script>
</body>

五、通过el选项直接挂载和使用$mount()方法的区别

其实这种挂载方式都可以实现挂载到某个元素上，只是挂载的方式不同，一个是再实例化创建就挂载到指定元素上，一个我们实例化创建之后再进行指定元素挂载。

泽哥ins

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
（5）vue.js 基础语法—el选项

一、el选项介绍• 用于选取一个 DOM 元素作为 Vue 实例的挂载目标。• 只有挂载元素内部才会被 Vue 进行处理，外部为普通 HTML 元素。• 代表 MVVM 中的 View 层（视图）。• 可以为 CSS 选择器格式的字符串或 HTMLElement 实例，但不能为 html 或 body。常见报错：Uncaught ReferenceError: Vue is not defined。该报错表示vue.js没有引入或者没有引入成功。解决方法：检查vue.js文件是否
复制链接

扫一扫