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

Vue3快速入门/Vue3基础速通

news 来源：原创 2025/5/9 9:37:57

Vue3

渐进式的javascript框架，我们可以逐步引入vue的功能

官方文档
Vue.js中文手册
你可以借助 script 标签直接通过 CDN 来使用 Vue：

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

通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是，你将无法使用单文件组件 (SFC) 语法。

简单的web页面不需要使用复杂的vue框架构建即可呈现出精美的效果，因此我们先使用cdn的方式来学习vue，以后逐步过渡到完整框架。

vue一般有两种开发方式，一种是组件式，一种是组合式。vue3官方文档主推组合式的编写，因此我们也使用组合式开发

组合式学习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.global.js"></script>
</head>
<body><div id="app"><h1>{{ message }}</h1><p>{{ web.title }} {{ web.url }}</p></div><script>Vue.createApp({// setup选项，用于设置响应式数据和方法等setup(){const message = Vue.ref('Hello Vue!')// 这是个对象，可以直接在模板中使用const web = Vue.reactive({title: 'Vue.js',url: 'https://cn.vuejs.org/'    })return {message: message,// web: webweb}}}).mount('#app')</script></body>
</html>

在开发时我们也可以使用模块化开发的方式大家看上面的代码示例，每一个vue方法前都有一个Vue.，比如Vue.createApp,然而我们可以直接

import { createApp , reactive} from './vue.esm-browser.js'

即可不加Vue.来直接编写vue代码，也不用导入

  <script src="vue.global.js"></script>

因此两种方式视自己喜好选择即可。

接下来我们将逐步认识各个方法

ref 与 reactive

在这里插入图片描述

ref是一个引用，修改使用.value, 而reactive则直接修改对应属性即可

ref也可以存储数组

绑定事件 v-on 简写 @

在这里插入图片描述

显示和隐藏 v-show

<p v-show="show">...</p>
当show为false就隐藏

条件渲染 v-if

<p v-if="show"> ... </p>
不适用于频繁切换显示状态以下是更好的用法
<p v-if="show < 1000">用户较少</p>
<p v-else-if="show > 1000 && show < 10000 ">用户较多</p>
<p v-else>用户很多</p>

动态属性绑定v-bind

<input type="text" :value="web.url">
这样文本框的值就是web.url的值
简写直接用:
这个绑定可以用在class, img, src等用法，实现其值的动态绑定

放在li中为每行元素设置title和key

:title=“value.name”

:key=“value.id”

v-for 遍历数组和对象

<p>遍历数组或对象</p>
<ul><li v-for="value in arr">{{ value }}</li>
</ul>
const arr = Vue.reactive([1,2,3,4,5])

双向数据绑定 v-model

单向数据绑定：当数据发生改变时，视图会自动更新，但是用户手动修改input的值，数据不会自动更新

双向数据绑定会自动更新数据的值

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.global.js"></script>
</head><body><div id="app"><h3>文本框 {{ data.text }}</h3><h3>单选框 {{ data.radio }}</h3><h3>多选框 {{ data.checkbox }}</h3><h3>下拉框 {{ data.select }}</h3><h3>记住密码 {{ data.remember }}</h3>双向数据绑定 <input type="text" v-model="data.text"><br><input type="radio" value="male" v-model="data.radio"> 男<input type="radio" value="female" v-model="data.radio"> 女<br><input type="checkbox" value="apple" v-model="data.checkbox"> 苹果<input type="checkbox" value="banana" v-model="data.checkbox"> 香蕉<input type="checkbox" value="orange" v-model="data.checkbox"> 橘子<br><select v-model="data.select"><option value="">请选择</option><option value="apple">苹果</option><option value="banana">香蕉</option><option value="orange">橘子</option></select><br><input type="checkbox" v-model="data.remember"> 记住密码</div><script>Vue.createApp({// setup选项，用于设置响应式数据和方法等setup() {const data = Vue.reactive({text: 'hello',radio: '',checkbox: [],select: '',remember: false})return {data}}}).mount('#app')</script></body></html>

v-model修饰符

之前的双向数据绑定是实时渲染的(默认形式)，现在我们不需要实时渲染，只要按enter等才改

在失去焦点或enter后修改 v-model.lazy
输入框的值转为数字类型 v-model.number
去除首尾空格 v-model.trim

以上是常用的三种

渲染数据 v-text 和 v-html

v-html可以将数据解析为html格式，而v-text会解析为纯文本格式

计算属性computed

在这里插入图片描述
可以避免重复计算

侦听器watch

监听元素的变化

setup(){const date = reactive({year:2023,month:10})watch(date.year, (newValue, oldValue))=>{console.log("new:", newValue, "old:", oldValue);}
}
// 注意，json中对象和数组是通过引用传递的，所以old也是修改后的值，如果是普通变量，则会通过赋值传递，会保留old值

自动监听watchEffect
在这里插入图片描述
将不需要手动设定监听的对象

接下来我们做一个图片轮播案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.global.js"></script>
</head><body><div id="app"><h1>{{number}}</h1><h1>imageSrc: {{imageSrc}}</h1><img :src="imageSrc" style="width: 300px;"> <br><button @click="next">+</button><button @click="prev">-</button><ul><li v-for="value in 6"><button  @click="jump(value)">{{value}}</a></li></ul></div><script>Vue.createApp({// setup选项，用于设置响应式数据和方法等setup() {const number = Vue.ref(1)// 这是个对象，可以直接在模板中使用const next = () => {number.value++if (number.value == 6) {number.value = 1}}const prev = () => {number.value--if (number.value == 1) {number.value = 6}}const web = Vue.reactive({title: 'Vue.js',url: 'https://cn.vuejs.org/'})const imageSrc = Vue.computed(() => {return `image/${number.value}.jpg`})const jump = (value) => {number.value = value}return {number,next,// web: webimageSrc,prev,jump,web}}}).mount('#app')</script></script>
</body></html>