一、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()方法的区别

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

（5）vue.js 基础语法—el选项相关推荐

Vue.js 基础语法入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验响应式:数据一旦改变,视图就会响应改 ...
（6）vue.js基础语法—插值表达式
一.vscode插件介绍在我们演示插值表达式之前,我们先安装这一个VScode给我们提供的插件,它可以将我们书写好的网页通过服务端口的方式进行访问,同时它的好处还有:再修改代码后,不需要我们手动点击 ...
vue js基础语法
什么是vue vue是目前前端主流的js框架,它和库的区别在于: 库是更多是一个封装好的特定的集合,提供给开发者使用,而且是特定于某一方面的集合(方法和函数),库没有控制权,控制权在使用者手中,在库中 ...
（4）vue.js 基础语法
Vue 实例是通过 Vue 函数创建的对象,是使用 Vue 功能的基础.我们想要使用Vue的功能,必须要实例化创建一个Vue的对象. <script>var vm = new Vue({/ ...
# vue.js 之对vue.js基础理解
vue.js 之对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数,编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化 3 ...
小汤学编程之JavaScript学习day01——认识JS、JS基础语法
一.认识JS 1.JavaScript的组成 2.浏览器执行js简介 3.JavaScript是什么? 4.扩展内容二.JS基础语法 1.代码书写位置 2.变量 ...
前端三刺客---JS(基础语法)
文章目录 JS初识 JavaScript和HTML和CSS的关系 JavaScript代码运行过程 JavaScript的组成 JS 第一个Hello World JavaScript的书写格式 JS ...
html input dropdown,Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
带下拉选项的输入框 (Textbox with Dropdown) 是既允许用户从下拉列表中选择输入又允许用户自由键入输入值.这算是比较常见的一种 UI 元素,可以为用户提供候选项节省操作时间,也可以 ...
Vue.js基础知识
一.Vue.js是什么? 它是一套用于构建用户界面的渐进式框架.其设计为自底向上逐层应用.Vue只关心视图层. 二.声明式的渲染 1. Vue.js的核心是采用简洁的模板语法来声明式地将数据渲染到DO ...

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