Vue 两个版本的使用和区别

一 完整版本

1. 从HTML得到视图
2. 使用方法，引入vue.js或vue.min.js

   //html代码
   <div id="app">
        {{n}}
   </div>
   <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>

   //js代码
   new Vue({
    el: "#app",
    data: {
      return{
          n: 1,
      }
    },
  });

二 非完整版本

1. 用js构建视图，相对来说更加独立
2. 使用方法，引入vue.runtime.js或vue.runtime.min.js

   //html代码
   <div id="app"></div>
   <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.runtime.min.js"></script>

   //js代码
   new Vue({
    el: "#app",
    render(h) {
      return h("div", [this.n, h("button", { on: { click: this.add } }, "加一")]);
    },
    data: {
      return{
          n: 1,
      }
    },
    methods: {
      add() {
        this.n++;
      },
    },
  });
  //可以将此处的h理解为createElement,不过用h表示比较简单而已

三 完整版本与非完整版本的区别

为何完整版本可以使用模板字符串呢？这是因为完整版本中有一个compiler(编译器)。它可以将复杂的模板字符串编译为dom节点，同时当需要修改节点时，他可以直接去寻找对应的节点进行修改。而非完整版则没有这个编译器，无法将模板字符串编译为节点，也因此它的体积比完整版约小40%。 总的来讲，完整版体积大功能强，非完整版，体积小功能弱。

四 webpack中的vue-loader

这个loader可以将模板字符串(<div>{{n}}</div)形式转换为h函数(h("div",this.n))形式。这样，可以在写代码的时候使用前者，也就是模板字符串，但是yarn build的时候，vue-loader将其转译为后者形式，那么用户下载的是h函数形式，这时，用户对vue的依赖就可以使用体积更小的非完整版本。

  //一个vue单文件组件的例子
  //Demo.vue
  <template>
    <div class="num">
      {{n}}
      <button @click="add">加一</button>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        n: 1
      };
    },
    methods: {
      add() {
        this.n++;
      }
    }
  };
  </script>

  <style scoped>
  .num {
    color: pink;
  }
  </style>


  //console.log(Demo.render.toString());

将vue文件翻译成h构建方法

五 总结

六 引用错了会怎样

1. vue.js错用成了vue.runtime.js
   无法将HTML编译成视图
2. vue.runtime.js错用成vue.js
   代码体积变大，因为vue.js有编译HTML的功能

七 Vue实例

1. const vm = new Vue({构造选项})
2. Vue实例的作用
   Vue实例就如同jQuery实例，封装了对DOM的所有操作（监听事件，改变DOM），封装了对data的所有操作（增删改查）。但是没有封装ajax，可以使用axios的ajax功能。