Vue el与$mount的区别

最新推荐文章于 2024-07-05 09:48:05 发布

xxxxyp

最新推荐文章于 2024-07-05 09:48:05 发布

阅读量1.2k

点赞数 3

分类专栏： vue 文章标签： vue html

原文链接：https://editor.csdn.net/md?articleId=116760134

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue el与$mount的区别

先阅读官网：

https://cn.vuejs.org/v2/api/#el
https://cn.vuejs.org/v2/api/#vm-mount

同：均是用来挂载对象的，作用相同，但是使用方法有所差异（如下实例）；
异：el是vue的一个option，$mount是vue的一个实例方法；

/* 此时是未挂载状态，页面是不显示的 */
//此时可以使用下面A或B来挂载，都可以
new Vue({
  router,
  store,
  render: h => h(App)
})

//A指定el option
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
//B使用$mount实例方法
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

/* 但是下面这种情况只能使用$mount挂载 */
//在vue实例化之后，再进行挂载

//这种方式是错误的，查看el限制（上面picture-el）
const vm = new Vue({
  router,
  store,
  render: h => h(App)
})

vm.$el = '#app';

//可以使用$mount来挂载
const vm = new Vue({
  router,
  store,
  render: h => h(App)
})

vm.$mount('#app')

#如果 render 函数和 template property 都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板，此时，必须使用 Runtime + Compiler 构建的 Vue 库

普通html使用vue（在一个html文件中）

<div id="app">{{msg}}</div>

//在普通的html中把vue通过script标签导入的，很好理解：
//此时vue实例中，没有template模板字符串或render函数
//此时就把 <div id="app">{{msg}}</div> 提取出来做模板
//而导入的vue就是 runtime-compiler 的

new Vue({
  el: '#app',
  data: {
    msg: 'Hello 生命周期！'
  }
})

脚手架使用vue（脚手架版本4，在两个文件中）

<!-- public/index.html文件 -->
<!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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">{{msg}}</div>
    <!-- built files will be auto injected -->
  </body>
</html>

//main.js
//在下面中，因为没有指定template模板字符串或render函数
//所以el把目标的DOM元素提取出来做模板，也就是public/index.html中的 <div id="app">{{msg}}</div>
//其实这种就是有点绕，原理都是一样的
//el也可以换成 $mount()
//也可以注册router和store
//一般在脚手架中，public/index.html文件是不应该被改变的，所以不会采用这个方法来渲染
new Vue({
  el: '#app',
  router,
  store,
  data() {
    return{
      msg: 'Hello 生命周期！'
    }
  }
})