vue两个版本及开始使用

关于不同构建版本

  1. 完整版vue.js的视图是写在HTML里或template选项的,由于有 compiler(编译器)的存在,完整版运行时,用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

  2. 运行时版本vue.runtime.js,用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

一般是配置: vue运行时+ vue-loader 等编译器的时候,*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的,所以只用运行时版本即可。
运行时runtime版本相比完整版体积要小大约 30%,所以项目中,应该尽可能使用这个版本。
当然如果仍想使用完整版,则需要在打包工具里做相应的配置看官方怎么说

// 需要编译器
new Vue({
    el: "#app",
    template: `
    <div @click="add">{{n}} <button>+1</button></div>
   `,
    data: {
      n: 0
    },
    methods:{
    add(){
      this.n += 1
    }
  }
})

// 不需要编译器
new Vue({
  render(h){
    return h("div", [this.n, h("button", {on:{click: this.add}}, "+1")])
  },
  data: {
    n: 0
  },
  methods:{
    add(){
      this.n += 1
    }
  }
})

在线编辑器

  1. codesandbox上,可以很方便的新建编写vue项目
  • 进入选择“Vue”
  • 然后直接在components=> Helloworld下面一系列CRM操作,
  • 右侧就会随之更新视图
  • 点击File下的Export to ZIP ,导出到你想要存储的文件夹
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容