Vue 版本区别

1. 版本文件名

• 完整版 vue.js

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

• 只包含运行时版 vue.runtime.js

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.js"></script>

2. 版本区别

3. template与render

template用于Vue完整版

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

render用于Vue非完整版

import Demo from '../Demo'
new Vue({
  render: h => h(Demo),
}).$mount('#app')

单文件组件

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

<script>
  export default {
  // 使用vue-loader,data必须为函数
    data(){
      return {
        n:0
      }
    },
    methods:{
      add(){
        this.n += 1
      }
    }
  }
</script>
<style scoped>
  .red{
    color:red;
  }
</style>