1分钟看懂vue的两个版本

发布于 2022年 05月 01日 07:09

1分钟看懂vue的两个版本

完整版:vue.js

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

也可以通过import引用。

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

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

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

语法:

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

使用完整版vue.min.js时我们需要用到templatetemplate可以写在页面里也可以在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 链接

推荐文章