当前位置：首页 > news >正文

Vue3知识详解(一)(基础知识部分)

news 2025/10/12 8:03:29

在学习Vue之前,先安装一个开发环境,我推荐使用VsCode,安装好之后下面我们一起来学习Vue.

Vue3过渡知识

1.Vue的helloword程序.

学习一个新的语言,我们同样也从helloword这个开始.
初学阶段我们还是用传统的方式来写,后面再用其他的方式.

1.引入vuejs

这个和我们之前学习前端一样,要引入vue3的源代码,可以下载后在本地引入,也可以引入在线的.我们可以来打印一下,结果如下图:

可以看到都是一些对象,这里就简单打印一下,具体的后面再说.

2.准备容器

这里说的容器在上面代码中已经写过了,就是那个div.

3.创建应用

上面就是创建应用的代码,这里注意一下就是返回的代码我写的是简写的形式,如果不简写,写法如下

return {

msg : msg

}

还有就是这个mount这个方法,作用就是我想将这个msg渲染到哪里,里面参数写了#app,这里就会渲染到app这个容器中.

4.渲染数据

渲染数据听着很高大上,其实就是一个表达式,这个语法要记住,后面还会学到其他的语法,直接看代码

我圈红圈的就是将数据渲染到浏览器页面上,效果如下图

这样就完成了第一个helloword程序.

2.setup函数和插值表达式

这两个我们在上边都用了,这里我们详细来讲一下它的用法.
首先说一下setup这个函数,这是vue3代码的入口和起点,我们以后写的代码都是写在这里面的.标签中用到的数据需要在setup中声明并返回.还有一点要注意的是在setup中是不会出现this的,我们在学习java的时候,this表示当前对象的实例,这里不适用,要是觉得有疑问可以自己打印一下.

然后该说插值表达式了,也可以叫声明式渲染,就是我们上面代码中写的两个双花括号:{{}}.这里要注意一下就是,这个只能用在双标签中,需要被包裹住,但单标签是不行的.下面我用代码来演示:

上面是准备工作,后面忘了加mount这个函数,要加上的.既然说是表达式,当然还有其他写法,下面的代码我会写好注释,直接看代码即可.

上面就是插值表达式的用法,目前我只能想到这么多,够用了.最后用到了一个方法split(),我写的msg的值中间有一个空格,就用空格来进行分割,这个方法返回是一个数组,然后再求数组长度.

3.安装调试工具和数据响应式

安装工具当然是安装到浏览器上了,这里建议使用谷歌浏览器,当然我们要科学上网,直接通过极简插件下载,网址为:https://chrome.zzzmh.cn/index 直接搜Vue,下载这个

将下载后的文件进行解压,里面有一个文件,将这个文件拖拽到谷歌浏览器的扩展程序即可.记得打开开发者模式,还有就是在详情里面将允许访问文件网址打开这样就完成了.

有这个就说明安装成功了.

下面来介绍数据相应式:

什么是数据相应式,简单来说就是:数据变了,视图也会跟着变.这里的数据指的就是setup里面返回的数据,视图就是页面上显示的东西.

看我们上面写的,在调试工具中是无法更改数据,也就是说不具备数据相应.要想让数据具备相应式,要用到相应式函数,有两个reactive和ref,下面就着重来讲解这两个函数.

先说reactive这个函数,先看代码怎么写:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><div id="app"><p>我叫 {{ obj.name }}, 今年 {{ obj.age }} 岁</p></div><script>// 解构出 reactive 响应式函数const { createApp, reactive } = VuecreateApp({setup() {// 接收一个对象作为参数// 返回一个响应式对象(当对象的属性值变了, 视图会跟着变)const obj = reactive({name: '小vue',age: 9})return {obj}}}).mount('#app')</script>
</body></html>

写完后发现,之前写一个对象都是在等号后面直接一个大括号.这里将大括号所有内容放到了reactive里面,这样对象里面的数据都可以是响应式数据.
这里说明一下reactive只能用于对象.

下面我们打开浏览器和开发者工具

这里发现数据可以进行修改了并且能实时同步到视图上,这就是响应式.

下面来说ref,这个其实不用怎么将,只需要将reactiv换成ref即可,唯一不同的是:ref不限类型,适用更广泛.但是如果仅仅针对是对象,推荐使用ractive.还有一点不同是要用到.value,就是在标签中使用不用.value,如果是在js中使用则需要用.直接看代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><div id="app"><h3>{{ msg }}</h3><p>我叫 {{ obj.name }}, 今年 {{ obj.age }} 岁</p><button @click="onClick">修改ref数据</button></div><script>const {ref,createApp } = VuecreateApp({setup() {// ref 定义一个响应式字符串const msg = ref('Hello Vue3')// ref 定义一个响应式对象const obj = ref({name: '小vue',age: 9})const onClick = () => {// 修改 msgmsg.value = '你好, Vue3'obj.value.name = 'Vue3'obj.value.age = 10}return {msg,obj,onClick}}}).mount('#app')</script>
</body></html>

通过代码我们就很容易看明白,我说的不同点.

这里说一下两个函数该用哪一个:如果是对象切对象属性是确定的用ractive,其他用ref.

4.Vue工程化

上面一直都是传统方式写的,从这里开始使用工程化来进行学习.首先就是安装node,这个可以看看其他教程.当安装好node之后,还要进行换源,和安装包管理工具,这里不进行演示.然后就是创建工程,打开小黑窗口,执行这个命令npm create vue@latest,这里选好位置可以是在桌面,也可以是其他地方.
输入这个命令之后会有提示,我们刚开始学,没见过的都不要选,有一个格式化代码,这个可以选一下.
打开这个文件夹,观看目录,我在上面做了配置

这些先大致了解一下,后面学习都会很熟悉的.

下面我们分析一下三个入口文件的关系,先看一个图:

这个图大致理解一下,具体的关系为:
App.vue(Vue入口) => main.js(项目打包入口) => index.html(浏览器入口)

5.Vue单文件

Vue单文件的作用就是来解决样式冲突问题的.
一个vue文件通常有3部分组成， script(JS) + template(HTML) + style(CSS)
一个vue文件是独立的模块，作用域互不影响
style配合scoped 属性，保证样式只针对当前 template 内的标签生效
vue文件会被vite打包成js、css 等，最终交给index.html 通过浏览器呈现效果

6.setup简写+插值+响应式渲染

有了工程化之后,就可以简写setup了,我们其实什么也不用做,已经帮我们加上了.还有就是不需要自己手动返回一些声明的变量,对象等,默认会帮我们自动返回.看下面代码非常简洁:

<script setup>
import {ref} from 'vue'
const msg = ref('helloword')
</script><template>{{ msg }}
</template><style scoped></style>

Vue3指令的学习

指令（Directives）是 Vue 提供的带有 v- 前缀的特殊标签属性, 用来增强标签的能力
vue3 中的指令按照不同的用途可以分为如下 6 大类：
• 内容渲染指令（v-html、v-text）
• 属性绑定指令（v-bind）
• 事件绑定指令（v-on）
• 条件渲染指令（v-show、v-if、v-else、v-else-if）
• 列表渲染指令（v-for）
• 双向绑定指令（v-model）

1.内容渲染指令: v-html和v-text

他的作用类似于插值表达式,把表达式的值与标签动态绑定.

先看代码

<script setup>
import {ref} from 'vue'
const str = ref('<span style="color:red;">Hello Vue3+Vite</span>')
</script><template><p v-html="str"></p><p v-text="str"></p>
</template><style scoped></style>

看页面展示的效果:

有一个直接把str原木原因的显示到页面上,有一个则是红色字体显示,展示的也是我们想要展示的内容.这就是两者的区别,v-html会进行解析,这里面加的样式会被解析到呈现相应的内容,而v-text则是将str原有的内容显示出来,不做任何处理.插值表达式就和v-text一样了.

2.属性绑定指令: v-bind

从名称就可以很好理解,就是针对标签的属性的.直接看代码

<script setup>
import {ref} from 'vue'
const url = ref('http://www.baidu.com')
</script><template>
<a v-bind:href="url">百度一下</a><br>
<!-- 简写 -->
<a :href="url">百度一下</a><br>
</template><style scoped></style>

运行结果:

看了代码之后就很好理解了,这个指令可以绑定很多的属性,不仅仅是href我上面知识举例.简写也在代码中有体现很简单.

3.事件绑定指令: v-on

听名字就很好理解,这个指令是来针对事件的,比如说点击事件.我写一个代码案例就很容易理解的直接看代码:

<script setup>
import { ref } from "vue";
const count = ref(0);
const increase = () => {count.value++;
};
// 有参函数
const add = (n) => {count.value += n;
};
</script><template><div><p>{{ count }}</p><!-- 1. 内联语句 --><button v-on:click="count++">+1</button><!-- 2. 调用无参函数 --><button v-on:click="increase">+1</button><!-- 3. 调用有参函数 --><button v-on:click="add(3)">+3</button><button v-on:click="add(5)">+5</button><!-- 简写 --><p>{{ count }}</p><!-- 1. 内联语句 --><button @click="count++">+1</button><!-- 2. 调用无参函数 --><button @click="increase">+1</button><!-- 3. 调用有参函数 --><button @click="add(3)">+3</button><button @click="add(5)">+5</button></div>
</template><style scoped></style>

运行结果:

这里发现click后面可以跟表达式,也可以跟函数,这样就完成了绑定.上面代码也展示了简写的方式.

4.条件渲染指令: v-show / v-if /v-else-if / v-else

这个指令使用来控制DOM的显示和隐藏的.直接看一个代码案例

<script setup>
import { ref } from "vue";
// 是否可见
const visible = ref(true)
// 是否登录
const isLogin = ref(true)
// 成绩
const mark = ref(100)
</script><template>
<!-- v-show -->
<div class="red" v-show="visible"></div>
<!-- v-if -->
<div class="green" v-if="visible"></div>
<hr>
<!-- 双分支的条件渲染 -->
<div v-if="isLogin">xxx, 欢迎回来</div>
<div v-else>你好, 请登录</div>
<hr>
<!--多分支的条件渲染:
1. 90及其以上优秀
2. 70到90之间良好
3. 其他的差
-->
<div v-if="mark >= 90">优秀</div>
<div v-else-if="mark >= 70">良好</div>
<div v-else>差</div></template><style scoped>
.red, .green {
width: 200px;
height: 200px;
}
.red {
background: red;
}
.green {
background: green;
}</style>

运行结果:

这里我们可以发现其实这些后面都是表达式,都是布尔类型,true则显示,false则不显示.至于两个在用的时候该怎么选择这里说明一下两者的区别,v-show是通过控制css的display属性、v-if直接从DOM树上移除或创建; 并且v-if还可以配合v-else-if/v-else进行多分支条件渲染,这里就很明白了,如果频繁控制一个元素则使用v-show,不频繁控制则使用v-if.

5.列表渲染指令: v-for

看到for 我们很容易想到循环,没错就是用来遍历的.语法很容易理解,看我下面写的代码:

<script setup>
import { ref } from "vue";
const arr=ref([11,22,33,44,55])</script><template><div><ul><li v-for="(item,index) in arr">{{ index }}=>{{ item }}</li></ul></div></template><style scoped></style>

运行结果:

说一下里面的参数,其中item是数组中的元素,index是每个元素的下标.看代码很容易理解.当然不仅仅可以遍历数组,对象也是可以的,这里就不演示了.

6.双向绑定指令: v-model

所谓的双向绑定指令展示的效果就是数据变了,视图也会跟着变化,主要作用在表单上比如input,select等,实现数据双向绑定,从而可以快速获取或设置表单元素的值.

直接看代码:

<script setup>
import { ref } from "vue";
const loginForm = ref({username: "",password: "",
});
</script><template><div class="login-box">账户：<input type="text" v-model="loginForm.username" /><br /><br />密码：<input type="password" v-model="loginForm.password" /><br /><br /><button>登 录</button><button>重 置</button></div>
</template><style scoped></style>

运行结果:

这里我框住的部分,无论在哪里修改,都会相互影响.这就是双向绑定.

练习指令案例

学完上述的指令,我们来做一些案例进行巩固.

1.案例轮播图

<template><div class="banner"><img :src="images[i]" /><div class="ctrl"><a href="javascript:;" class="btn prev" @click="prev">&lt;</a><a href="javascript:;" class="btn next" @click="next">&gt;</a></div></div>
</template><script setup>
import { ref } from "vue";
const images = ["https://pic.netbian.com/uploads/allimg/250928/113634-175903059418e3.jpg","https://pic.netbian.com/uploads/allimg/250912/215710-1757685430dff7.jpg","https://pic.netbian.com/uploads/allimg/250912/215457-1757685297b399.jpg",
];
const i = ref(0);
const prev = () => {i.value--;// 如果当前图片是最后一张,再次点击则直接跳转到最后一张.if (i.value < 0) {i.value = images.length - 1;}
};
const next = () => {i.value++;if (i.value > images.length - 1) {i.value = 0;}
};
</script><style scoped>
a {text-decoration: none;color: #000;
}
.banner {position: relative;width: 800px;height: 100%;margin: 150px auto;
}
.btn {position: absolute;top: 50%;width: 30px;height: 30px;line-height: 30px;margin-top: -15px;font-size: 14px;text-align: center;background: rgba(0, 0, 0, 0.3);color: #fff;border-radius: 50%;
}
.btn.prev {left: 15px;
}
.btn.next {right: 15px;
}
.banner img {width: 100%; /* 图片宽度适应容器 */height: 100%; /* 图片高度适应容器 */object-fit: cover; /* 保持图片比例并填充容器 */
}
</style>

这个代码可以直接赋值运行,图片都是随便找的.这个案例用到了v-bind这个指令,这里除了样式麻烦一点,其他的都能看明白,样式可以让ai帮我们生成.

2.可折叠面板

<template><h3>可折叠面板</h3><div class="panel"><div class="title"><h4>自由与爱情</h4><span class="btn" @click="visible = !visible">{{ visible ? "收起" : "展开" }}</span></div><div class="container" v-show="visible"><p>生命诚可贵,</p><p>爱情价更高。</p><p>若为自由故，</p><p>两者皆可抛。</p></div></div>
</template><script setup>
import {ref} from 'vue'
const visible = ref(true);
</script><style lang="scss" scoped>
body {background-color: #ccc;
}
#app {width: 400px;margin: 20px auto;padding: 1em 2em 2em;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);background-color: #fff;
}
#app h3 {text-align: center;
}
.panel {.title {display: flex;justify-content: space-between;align-items: center;padding: 0 1em;border: 1px solid #ccc;}.title h4 {line-height: 2;margin: 0;}.container {border: 1px solid #ccc;padding: 0 1em;}.btn {cursor: pointer;}
}
</style>

这个案例用到了属性绑定指令和条件渲染指令,代码很容易看懂.

3.橱窗案例

<template><table border="1" cellspacing="0" cellpadding="0"><caption><h3>橱窗</h3></caption><thead><tr><th>商品名称</th><th>商品价格</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in goodsList"><td>{{ item.name }}</td><td>{{ item.price }}</td><td><button v-on:click="del(index)">删除</button></td></tr></tbody><tfoot><tr v-if="goodsList.length===0"><td colspan="3">暂无数据啦</td></tr></tfoot></table>
</template><script setup>
import {ref} from 'vue'
// 商品列表
const goodsList = ref([{ id: 101, name: "biangbiang面", price: 13 },{ id: 102, name: "葫芦头", price: 20 },{ id: 103, name: "冰峰", price: 2 },{ id: 104, name: "肉夹馍", price: 11 },{ id: 105, name: "羊肉泡馍", price: 18 },
]);
const del=(i)=>{if(window.confirm('您确定要删除吗?')){goodsList.value.splice(i,1)}
}</script><style lang="scss" scoped>
table {
width: 500px;
margin: 150px auto;
text-align: center;
font-family: 'Courier New', Courier, monospace;
tr {
height: 40px;
}
tfoot {
height: 100px;
}
}
</style>

最后一个双向绑定的指令,样式太麻烦,这里就不进行演示了.以后用到了再说.

以上就是这一期的Vue基础知识,后续内容会继续更新.

查看全文

http://www.dtcms.com/a/469941.html