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 链接