Vue 两个版本的区别和使用方法

Vue两个版本的区别和使用方法

1.名字

非完整版：vue.runtime.js

完整版：vue.js

2.特点

非完整版：无编译器(compiler)

完整版：有编译器(compiler)

所以完整版体积比非完整版大40%

3.视图

vue 非完整版单文件组件 template 用法：

vue/cli 默认创建的就是 非完整版vue，借助 render 函数渲染视图，而 vue 单文件组件则是借助vue-loader得到render函数，render函数里面的内容就是 template 里面的内容，内容格式也是经过vue-loader处理后的 h('内容')，可以使用console.log( HelloWorld.render,toString ) 打印出来。

// 通过 vue-loader 会把vue文件里的 HTML 转为 h 函数
Demo.vue文件
<template>
视图
  <div id="app">
    {{n}}
    <button @click="add">+1</button>
  </div>
</template>

<script>
export default {
  data(){
  return{
      n:0
  }
  },
  methods:{
  add(){
      this.n+=1
      }
  }
</script>

<style scoped>
#app {
  html样式
}
</style>


//main.js文件
import Demo from './Demo.vue'
new Vue({
  el: '#app',
  render(h){ //默认函数名为h
      return h(Demo)
  }
})

vue 非完整版 render 使用方法：Vue 实例中的渲染函数

//main.js
new Vue({
    el:'#app',
render(h){
    return h('div',[this.n,h('button',{on:{click:this.add}},'+1')])
},
data:{
    n:0
},
methods:{
add(){
    this.n += 1;
    }
  }
})

vue 完整版视图

vue 完整版 template 的使用方法：

//直接写在 HTML 页面上，通过 compiler 编译器执行
<template>
    <div id="app">      
        {{n}}
        <button @click="add">+1</button>   
   </div> 
</template>

// 写在 JS 上面
new Vue({
  el: '#app',
  template: `<div>{{n}}</div>`,
  data:{
    n:0
  }，
  method:{
      add(){
          this.n+=1
      }
  }
})

用 codesandbox.io 写 Vue 代码

第一步:打开 codesandbox.io/
第二步:点击右上角
第三步:点击Vue即可创建一个运行版的 Vue 项目
第四步:创建好后即可随意发挥
第五步:保存写完的代码

总结

Vue完整版和非完整版的区别: