vue中的el方法详解-- Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训

类型：string | HTMLElement

条件：只有在new创建的实例中遵守

详情：

提供一个在页面上存在的DOM元素做为vue实例的挂载目标，可能是css选择器，也可能是一个HTMLElement实例
在实例挂载之后，元素可以用vm.$el访问
如果这个选项在实例化时有作用，实例将立即进入编译过程，否则，需要显示调用vm.$mount()手动开启编译
提供的元素只能作为挂载点，不用于vue 1.x,所有的挂载元素会被vue生成的DOM替换，因此不推荐挂载root实例到<html>或者是<body>中
如果render函数和template属性都不存在，挂载DOM元素的HTML会被提取出来作为模板，此时，必须用Runtime+compiler构建的vue库

运行时+编译器vs.只包含运行时

如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版：


// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})
当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。
因为运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。如果你仍然希望使用完整版，则需要在打包工具里配置一个别名：

webpack


module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
    }
  }
}

Rollup

const alias = require('rollup-plugin-alias')


rollup({
  // ...
  plugins: [
    alias({
      'vue': 'vue/dist/vue.esm.js'
    })
  ]
})

Browserify


添加到你项目的 package.json：
{
  // ...
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » vue中的el方法详解