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

两个版本对应的文件名

完整版的：vue.js

• cdn.bootcdn.net/ajax/libs/v…
  由于以上链接有较多注释，可用：

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>

非完整版的：vue.runtime.js

• cdn.bootcdn.net/ajax/libs/v…
  由于以上链接有较多注释，可用：

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.runtime.min.js"></script>

两个版本的区别

• 完整版里有编译器compiler，有占位符或其他比较复杂的Vue语句时，可以通过分析DOM节点来修改，但是代码体积会比非完整版的大30%。可以从HTML或template直接得到视图。功能更多。

• 非完整版里没有编辑器compiler，体积更小，功能更弱来，用render来编译，但也可以通过vue-loader，用.vue文件翻译成h构建方法。

template 和 render 怎么用

template

写在HTML里或者写在template选项

<template>
  <div id="app">
    {{n}}
    <button @click="add">+1</button>
  </div>
</template>

render

先创建一个.vue文件

<template>
    <div class="red">
        {{n}}
        <button @click="add">+1</button>
    </div>
</template>

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

<style scoped>
.red{color: red;}
</style>

再用render

import Demo from './Demo.vue'
new Vue({
    el:'#app',
    render(h){
      return h(Demo)
    }
})

使用codesandbox.io 写 Vue 代码

1. 打开codesandbox.io , 不需要登录(登录之后只能创建50个项目), 右上角创建一个新的项目

2. 选择Vue

3. 就可以操作啦