1分钟看懂vue的两个版本

1分钟看懂vue的两个版本

完整版：vue.js

我们可以从cdn引用vue.js或vue.min.js链接（bootCDN）

也可以通过import引用。

引入后，他就会变成一个含有vue功能的全局变量。

功能实现直接在html中进行操作，从html得到视图。

其功能非常完整，体积巨大。

语法：

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

使用完整版vue.min.js时我们需要用到template，template可以写在页面里也可以在js中。

非完整版：vue.runtime.js

我们可以从cdn引用vue.runtime.js或vue.runtime.min.js链接（bootCDN）

也可以通过import引用。

引入后，他就会变成一个含有vue功能的全局变量。

功能实现主要通过JS自身，相对独立。

其功能不完整，但是产生的体积要比vue.js小30%。

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

使用vue.runtime.min.js则需使用render()

两者的混合应用vue-loader

通过打包工具（webpack）实现开发时使用完整版，打包后变成runtime版，这样开发时就很快乐，用户打开该页面体积也会变小，实现双重快乐。

vue单文件组件

我们也可以单独开辟一个.vue文件，将其import引入main.js

这样做缺陷挺大，seo不友好

例子

首先我们配置好的src文件夹中创建一个Demo.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>

以上就是HTML视图了。接着我们将这个视图文件引入到main.js

中。

import Demo from "./Demo.vue"; 

new Vue({
  el: "#app",
  render(h) {
    return h(Demo);
  },
});

引入后就可以正常使用了。

codesandbox.io写 Vue 代码

进入官网选择vue，下载后用vscode打开即可，同样可以获得一个配置好的vue模板

codesandbox.io 链接