目录
VUE2下载网址
VUE2使用示例:
VUE3下载与使用
VUE3示例:
在官网上下载vue.js或者是vue.min.js。并用
或者直接引用官方网址
此官方地址也是入门文档。
VUE2使用示例:
直接在 new Vue(){}一个实例出来 ,即可使用vue来开发了。
我是{{message}} - 码龄:{{age}}
const app = new Vue({
el:"#app", //#id
data:{
message:"Lani",
age:10
}
});
浏览器运行效果:
VUE3下载与使用
VUE3的话, 官方没有直接提供下载地址用VUE脚本架或者VITE为初始项目
VUE3官方文档地址:Quick Start | Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://vuejs.org/guide/quick-start.html
html页面引用
按官方说法,使用CDN直接引用服务器上的即可:
VUE3下载
浏览器直接打开上面CDN,默认会打开3.x最新版代码,直接另存为.js即可
vue3脚本名称
参考School3下载:打开对应的页面,然后另存到本地即可。名字不叫vue.js了,叫
vue.global.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这个源码也可以直接引入在HTML里用。
VUE3示例:
div {
height: 30px;
line-height: 30px;
}
导出数据
Object.assign(window, Vue);
const vue3Composition = {
setup() {
const data = reactive({
// 虚拟实验id
exp_id: '',
// 生成随机数(true/false)
randomScore: false,
// 日期时间
dateTime: [],
// 60-100分人数比例
upRatio: '',
// 学校id
school_id: '',
});
const exportExcel = () => {
console.log("导出数据事件,randomScore",data.randomScore)
}
const dataRef = toRefs(data);
return {
exportExcel,
...dataRef
}
},
}
const app = createApp(vue3Composition).use(ElementPlus).mount("#app");
运行效果:
VUE2-baidu分享更新永久下载链接:
链接: https://pan.baidu.com/s/1VvFsA8cE2Td448n5BJfVMQ?pwd=67yh 提取码: 67yh 复制这段内容后打开百度网盘手机App,操作更方便哦
VUE3.js源码下载baidu永久下载:
链接:https://pan.baidu.com/s/18EMGEDC4b3KjIesftOPBRQ?pwd=2ady 提取码:2ady
扩展:
从0开始创建vue2项目_新建vue2项目_Lan.W的博客-CSDN博客
vue2入门基础-笔记_Lan.W的博客-CSDN博客
在 WebStorm 中开发 uni-app - 用vue2实现手机APP(apk) + 微信小程序项目开发方案_webstorm运行uniapp_Lan.W的博客-CSDN博客
jquery的项目,html页面使用vue3 +element Plus的简单入门使用_html使用vue3+elementplus2-CSDN博客
webstorm 创建vue3 vite 项目-CSDN博客
vue3 + vite 项目可以使用纯Js开发吗?-CSDN博客