Vue 完整版和非完整版的区别以及使用方法

vue完整版

该版本同时包含了编译器和运行时的版本，bootCDN引用，对应的文件名为vue.js或vue.min.js（最好是在生产环境下使用）

图中所示为vue完整版

该版本有编译器，占用代码体积，所以比runtime版大40%的体积。

该版本可以让你直接将内容写在HTML中查看视图效果，或者使用template渲染到HTML，用webpack引入，则需要配置alias，@vue/cli引入也需要额外配置

new Vue({
    template:'<div>{{hello}}</div>'
})

runtime运行时版本

该版本只包含了运行时版本，不包含编译器，bootcdn引用对应的文件名为vue.runtime.js或者vue.runtime.min.js

运行时版本无编译器，故占用代码体积小，但无法直接实现页面渲染，需要利用 render 里的 h 函数来创建 HTML 节点，vue.js的webpack引入和@vue/cli 引入都默认使用此版本。

new Vue({
    render(h){
        return h('div',this.hello)
    }
})

在实际开发中，由于h函数的参数比较复杂，可以使用vue-loader把vue文件里的HTML转为h函数。

如将vue.js错引用为vue.runtime.js，则无法将HTML编译为视图；如将vue.runtime.js错引用为vue.js，代码体积会变大，具体大家可以使用Codesandbox.io实践一下。

template怎么用

template只有在完整版中有用

//vue文件中的template标签
  <template>
      <div id="#app">      
          {{n}}
          <button @click="add">+1</button>   
     </div> 
  </template>

//js中的template
    template : `
        <div id="app">      
          {{n}}
          <button @click="add">+1</button>   
        </div> 
    `

render的使用方法

//不完整版在js中构建视图
  render(h){ 
       return h('div', [this.n,h（'{on:{click:this.add}','+1'])}

//不完整版使用vue-loader

//先创建一个demo.vue文件，在里面构建视图
    import demo from "./demo.vue"
     new Vue({
       el: "#app",
       render(h) {
         return h(demo)
       }
     })

如何使用codesandbox.io来创建vue项目

codesandbox.io是一个在线编辑器，可以快速创建你的项目。

这里要注意的是不要登录账户，登录了就只能创建50个项目，不登录则没有限制。

点击中间的按钮，就可以创建项目了。

选你要创建的项目类型就可以创建对应的项目。