vue3基础，小白从入门到精通
目录
一、vue.js 简述
二、 下载 vue.esm-browser.js 这个模块文件
三、创建第一个Vue程序
3.1创建代码过程
四、v-on
五、循环遍历(v-for)
六、判断语法(v-if和v-show)
6.1节点的动态属性v-bind
6.2 用v-bind实现CSS样式绑定
一、vue.js 简述
Vue 3 是一款流行的 JavaScript 前端框架，以下是其基础内容介绍
二、 下载 vue.esm-browser.js 这个模块文件
三、创建第一个Vue程序
3.1创建代码过程
<!-- {{ }} 插值表达式, 可以将 Vue 实例中定义的数据在视图中进行渲染
如: Vue 实例中定义一个 msg 变量, 值为 "Hello world",
在模板中若使用插值表达式 {{ msg }} 则会被渲染成 "Hello world" -->
<div id="app">
<p>{{ msg }}</p>
<p>{{ web.title }}</p>
<p>{{ web.url }}</p>
<p>{{ func() }}</p>
</div>
<script>
//创建一个 Vue 应用程序
Vue.createApp({
// 手写一个setup函数, 用于设置组件的响应式"数据"和"方法"等
// 创建一个Vue实例，并利用setup函数配置好这个实例里的数据和方法，并将需要用到的数据和方法暴露出来，供HTML调用。
setup(){
// 定义数据
let msg = "成功创建第一个Vue应用程序!";
const web = {
title: "百度一下，你就知道",
url: "www.baidu.com"
}
// 定义方法（函数）
const func = ()=> console.log("方法func被调用");
// 返回一个对象类型的数据
return { msg,
web,
func
}
}
}
).mount("#app"); //将 Vue 应用程序挂载(mount) 到 app 元素上
</script>运行结果：
四、v-on
用于绑定事件监听器，如v-on:click，可简写为@。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绑定事件</title>
</head>
<body>
<div id="app">
<h3>{{ msg }}</h3>
<h3>{{ web.url }}</h3>
<h3>{{ web.user }}</h3>
<h3>{{ sub(100, 20) }}</h3>
<!-- v-on:click 表示在 button 元素上监听 click 事件 -->
<button v-on:click="edit">修改</button> <br>
<!-- @click 简写形式 -->
<button @click="add(20, 30)">加法</button> <br>
<!--
enter space tab 按键修饰符
keyup是在用户松开按键时才触发
keydown是在用户按下按键时立即触发
-->
<!-- 回车 <input type="text" @keyup.enter="add(40, 60)"> <br>
空格 <input type="text" @keyup.space="add(20, 30)"> <br>
Tab <input type="text" @keydown.tab="add(10, 20)"> <br>
w <input type="text" @keyup.w="add(5, 10)"> <br> -->
<!-- 组合快捷键 -->
<!-- Ctrl + Enter <input type="text" @keyup.ctrl.enter="add(40, 60)"> <br>
Ctrl + A <input type="text" @keyup.ctrl.a="add(20, 30)"> -->
</div>
<script type="module">
import { createApp, reactive, ref } from './vue.esm-browser.js'
createApp({
setup() {
let msg = "成功启动!!!";
const web = reactive({
title: "百度",
url: "baidu.com",
user: 0
});
const edit = () => {
web.url = "www.baidu.com"
msg = "云中医" //错误示例 不能直接改变msg的值,因为msg是一个普通变量, 不是响应式数据
console.log(`msg修改为: ${msg}`); //从控制台打印信息可以知道确实改变了，但是模板没有响应更新（非响应式数据）
}
const add = (a, b) => {
web.user += a + b
}
const sub = (a, b) => {
return a - b
}
return {
msg, //普通变量, 非响应式数据, 在模板中普通变量不会自动更新
web, //响应式数据
edit, //方法
add,
sub,
}
}
}).mount("#app")
</script>
</body>
</html>五、循环遍历(v-for)
语法：
v-for="item in items"
v-for="(item,index) in items"
items：要迭代的数组
item：存储数组元素的变量名
index：迭代到的当前元素索引，从0开始。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>遍历指令</title>
<style>
.textColor{
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 遍历对象的值 -->
<h4>遍历对象的值。</h4>
<ul>
<li v-for="value in data.user">
{{ value }}
</li>
</ul>
<!-- 遍历对象的值和索引。 注意：写指令时，先值后索引 -->
<h4>遍历对象的值和索引。 注意：写指令时，先值后索引</h4>
<ul>
<li v-for="(value, index) in data.number">
{{ index }} : {{ value }}
</li>
</ul>
<!-- 遍历对象的值和键。 注意：写指令时，先值后键 -->
<h4>遍历对象的值和键。 注意：写指令时，先值后键</h4>
<ul>
<li v-for="(value, key) in data.user">
{{ key }} : {{ value }}
</li>
</ul>
<!-- 遍历对象的值，键和索引。 注意：写指令时，先值再键后索引 -->
<h4>遍历对象的值，键和索引。 注意：写指令时，先值再键后索引</h4>
<ul>
<li v-for="(value, key, index) in data.user">
{{ index }} : {{ key }} : {{ value }}
</li>
</ul>
<h4>指令嵌套： 先用v-for指令遍历对象，然后展示符合v-if条件的节点</h4>
<ul>
<!--注： <template> 标签可以用来包装多个元素或者多行代码, 不会在页面中渲染 -->
<template v-for="(value, key, index) in data.user">
<li v-if="index == 1">
{{ index }} : {{ key }} : {{ value }}
</li>
</template>
</ul>
</div>
<script type="module">
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const data = reactive({
//数组
number: ["十", "十一", "十二"],
//对象
user: { name: "李雷", gender: "女" }
});
return {
data
}
}
}).mount("#app")
</script>
</body>
</html>六、判断语法(v-if和v-show)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节点的条件渲染</title>
</head>
<body>
<div id="app">
<h3>显示状态: {{ web.show }}</h3>
<!-- Vue处理v-show变化时，是用display:none实现隐藏的（可以通过F12检查源代码，当点击时，源码会加入display:none） -->
<p v-show="web.show">广东云浮中医药职业学院计算机学院v-show</p>
<!-- Vue处理v-if变化时，是通过删除节点实现隐藏的（可以通过F12检查源代码，当点击时，源码会删除节点） 。
当遇到需要频繁显示和隐藏的场景时，不是合使用v-if， 因为频繁增删节点，会导致渲染效率下降 -->
<p v-if="web.show">广东云浮中医药职业学院基础学院v-if</p>
<button @click="toggle">切换显示状态</button>
<hr>
<h3>{{ web.user }}</h3>
<p v-if="web.user < 100">新网站</p>
<p v-else-if="web.user >= 100 && web.user < 1000">优秀网站</p>
<p v-else-if="web.user >= 1000 && web.user < 10000">资深网站</p>
<p v-else>超级网站</p>
<button @click="add_user">增加用户</button>
</div>
<script type="module">
import { createApp, reactive, ref } from './vue.esm-browser.js'
createApp({
setup() {
const web = reactive({ // 响应式数据
show: true,
user: 500
});
const toggle = () => {
web.show = !web.show; // 这个布尔变量被切换后，模板中用到的地方会自动更新，进而被v-show捕获
}
const add_user = () => {
web.user += 1000;
}
return {
web,
toggle,
add_user
}
}
}).mount("#app");
</script>
</body>
</html>六、v-bind 设置元素属性
v-bind 用来为元素绑定属性，例如 src、title、class.
用法：v-bind:属性名=表达式.
简写：:属性名
Ps：通过 v-bind 增删属性是动态的.
6.1节点的动态属性v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节点的动态属性(单向绑定)</title>
<style>
.textColor{
color: red;
}
</style>
</head>
<body>
<div id="app">
<h3> iuput标签动态属性绑定 v-bind:value </h3>
<input type="text" v-bind:value="web.str">
<h3> iuput标签动态属性绑定(简写形式) :str </h3>
<input type="text" :value="web.str">
<h3> img标签动态属性绑定(简写形式) :src </h3>
<img :src="web.img">
<br>
<button @click="change">修改</button>
</div>
<script type="module">
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const web = reactive({
str: "w",
img: "./img_src/logo0.png",
})
const change = () => {
web.str += "w";
web.img=`./img_src/logo1.png`;
}
return {
web,
change
}
}
}).mount("#app")
</script>
</body>
</html>6.2 用v-bind实现CSS样式绑定
v-if与v-show可以根据条件的结果,来决定是否显示指定内容.
v-if: 条件不满足时, 元素不会存在.
v-show: 条件不满足时, 元素不会显示(但仍然存在).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节点的动态属性(单向绑定)</title>
<style>
.textColor{
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 【CSS样式的绑定，有以下两种常用方式】 -->
<!-- 【方案1：通过布尔值控制某个类名是否存在，进而控制对应的CSS样式是否被选中生效】 -->
<!-- v-bind指令虽然可以直接对class属性进行数据绑定，但如果将绑定
的值设置为一个对象，其就会产生一种新的语法规则，设置的对象中可
以指定对应的class样式是否被选用。 -->
<h5 :class="{textColor:web.fontStatus}">广东云浮中医药职业学院</h5>
<button @click="change_color">修改颜色</button>
<!-- 【方案2：直接将标签的style属性和响应式对象绑定起来（较常用）】 -->
<h5 :style="b_style">我爱你中国，字号{{b_style.fontSize}}</h5>
<button @click="add_fontsize">加大字号</button>
</div>
<script type="module">
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const web = reactive({
fontStatus: false
})
const change_color = () => {
web.fontStatus = !web.fontStatus;
}
const b_style = reactive({
color: "green",
fontSize: "10px"
})
let p = 10;
const add_fontsize = () => {
p += 5;
b_style.fontSize = `${p}px`;
}
return {
web,
b_style,
change_color,
add_fontsize
}
}
}).mount("#app")
</script>
</body>
</html>