VueVue不同版本的基本使用

早睡早起长头发

2024-04-27 帮助1人

一、Vue的版本

1. Vue1.x

几乎被淘汰，不再建议学习与使用。

2. Vue2.x

<scriptsrc=" " target="_blank">https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

3. Vue3.x

<scriptsrc=" " target="_blank">https://unpkg.com/vue@next"></script>

vue2.x 中绝大多数的 API 与特性，在 vue3.x 中同样支持。同时，vue3.x 中还新增了 3.x 所特有的功能、并废弃了某些 2.x 中的旧功能：

新增的功能例如：组合式 API、多根节点组件、更好的 TypeScript 支持等

废弃的旧功能如下：过滤器、不再支持 $on，$off 和 $once 实例方法等

详细的变更信息，请参考官方文档给出的迁移指南：https://v3.vuejs.org/guide/migration/introduction.html

二、Vue的使用方式

传统方式

在html页面中导入vue库。

使用架构工具(专业开发)

vue cli(vue脚手架)、vite(新一代的架构工具)。

三、 Vue的使用

使用Vue2的基本流程

① 导入 vue.js 的 script 脚本文件

② 在页面中声明一个将要被 vue 所控制的 DOM 区域

③ 创建 vm 实例对象（vue 实例对象）

<div id="app">{{ username }}</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
// 创建 Vue 的实例对象
const vm = new Vue({
el: '#app',
data: {
}
})
</script>

2.使用Vue3的基本流程

① 引入Vue库

② 创建视图(view)

③ 创建模型(Model)

④ 创建vue实例，将model挂载到View---实现ViewModel

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个Vue应用</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>{{ count }}</p>
</div>
<script>
const obj = {
// data函数：模型中的数据
data(){
return {
count:1,
}
},
// methods：模型用的方法
methods:{
}
}
// 4，创建vue实例，将model挂载到View---实现ViewModel
Vue.createApp(obj).mount('#app')
</script>
</body>
</html>

注意：

1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象

2.多个容器不能对应一个实例，实例只会找到第一个对应的容器；一个容器不能对应多个实例，只有第一个实例能找到对应的容器。所以，容器和实例只能一个一个地对应！！！

3.真实开发中只有一个Vue实例，并且会配合着组件一起使用

4.Vue2组件中的模板结构必须有根标签，Vue3可以没有根标签

这篇好文章是转载于：学新通技术网

VueVue不同版本的基本使用

一、Vue的版本

1. Vue1.x

2. Vue2.x

3. Vue3.x

二、Vue的使用方式

传统方式

使用架构工具(专业开发)

三、 Vue的使用

使用Vue2的基本流程

2.使用Vue3的基本流程

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开