vue2 几种初始化挂载方式

最新推荐文章于 2024-03-13 21:21:53 发布

四月四日梦

最新推荐文章于 2024-03-13 21:21:53 发布

阅读量2.1k

点赞数 2

分类专栏： JavaScript笔记本文章标签： vue

本文链接：https://blog.csdn.net/MagicWing_zs/article/details/115539499

版权

JavaScript笔记本专栏收录该内容

83 篇文章 0 订阅

订阅专栏

vue2 几种初始化挂载方式

常见的new Vue 传入el和render的方式【在cli创建出的项目中】

el

类型：string | Element
限制：只在用 new 创建实例时生效。
详细：

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

在实例挂载之后，元素可以用 vm.$el 访问。

如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。

提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 <html> 或者 <body> 上。

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

// main.js
import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  store,
  router,
  // 字符串模板的代替方案
  render: h => h(App)
})

new Vue 传入render手动挂载$mount方式【在cli创建出的项目中】

// main.js
import Vue from 'vue'
import App from './App.vue'

new Vue({
  router,
  store,
  render: h => h(App)
  // 这里的$mount 提供了一个挂载节点，所以不用再手动插入某个节点中
  // (会替换 #app)
}).$mount('#app')

ProgressBar 这种手动挂载($mount()) 方式手动挂载需要自己插入body 【在cli创建出的项目中】

import ProgressBar from '~/components/progress-bar.vue'

/**
这里经过webpack的编译后，得到一个对象 对象中含有methods,data等方法
需要做的就是new 出实例，等待挂载
*/
// 得到一个对象 {methods: {…}, staticRenderFns: Array(0), _compiled: true, data: ƒ, render: ƒ, …}
console.log(ProgressBar) 
// 得到一个vue实例 Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
console.log(new Vue(ProgressBar))


// 全局进度条
// 手动挂载 这里的$mount 没有提供一个挂载节点，所以需要手动插入某个节点中
const bar = Vue.prototype.$bar = new Vue(ProgressBar).$mount()
// // 在文档之外渲染并且随后挂载
// 把挂载的el插入到body
document.body.appendChild(bar.$el)

通过extends扩展另一个组件【在cli创建出的项目中】

const baseDom = new Vue({
		// body 每次都应该是一个真实div
    el: body,
    extends: chartFunc,
    // 能传入一些data，以此data为准
    data () {
      return {
        value: defaultValue,
        frontDict: props.data[0],
        timer: '',
        props: props,
        isPositve: true,
        isSelected: 'china',
        selectedYear: '2017',
        // 瓜达尔港图表
        selectedCountry: '巴基斯坦'
      }
    },
    props: {}
  })

根据页面上一个节点传入 el 【html】

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue的基本代码</title>
  </head>

  <body>
    <div id="oneDiv">
      <p>{{ msg }}</p>
    </div>
    <script src="lib/vue-2.4.0.js"></script>
    <script>
      var vue = new Vue({
        // 表示当前我们的new 的这个 vue 实例，要控制页面上的那个区域
        el: '#oneDiv',
        // data 属性中，存放的是el中要用到的数据
        data: {
          // 通过 Vue 的指令，可以哼方便的就把数据渲染到页面上
          // 程序员不在手动操作DOM
          msg: '欢迎学习vue'
        }
      })
    </script>
  </body>

</html>

四月四日梦

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue2 几种初始化挂载方式

vue2 几种初始化挂载方式常见的new Vue 传入el和render的方式【在cli创建出的项目中】el类型：string | Element限制：只在用 new 创建实例时生效。详细：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。在实例挂载之后，元素可以用 vm.$el 访问。如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启
复制链接

扫一扫