vue2的使用

本文主要是介绍vue2的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

准备容器
引包（官网） — 开发版本/生产版本
创建Vue实例 new Vue()
指定配置项，渲染数据
1. el:指定挂载点
2. data提供数据

可以把线上的cdn的vue的地址下载到本地进行依赖。

Vue2下载地址

https://v2.vuejs.org/v2/guide/installation.html

vue.js没有经过压缩，适合开发测试Debug时使用，vue.min.js代码经过了压缩，适合发布上线时用，节约些资源。

在html里head添加：  <script src="js/vue.min.js"></script>
或者导入线上地址：<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

VUE3的话, 官方没有直接提供下载地址用VUE脚本架或者VITE为初始项目

https://vuejs.org/guide/quick-start.html

引入cdn提供的在线地址：

如果想下载，可以用浏览器直接打开上面CDN地址，默认会打开3.x最新版代码，直接另存为.js即可。

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/3.0.5/vue.global.js

unpkg：https://unpkg.com/vue@next, 会保持和 npm 发布的最新的版本一致。

cdnjs : vue最新版发布所有版本vue - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

#未压缩：

https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.8/vue.global.min.js

已压缩：

https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.8/vue.global.js

vue3的使用：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
const { createApp, ref } = Vue

createApp({
setup() {
const message = ref('Hello vue!')
return {
message
}
}
}).mount('#app')
</script>