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时我们需要用到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模板