【Vue3入门1】03-Vue3的基本操作(下)
本文主要介绍vue3中的一些基本操作。
目录
1. 动态属性绑定 v-bind
2. 遍历数组或对象 v-for
3. 双向数据绑定 v-model
4. v-model 修饰符
5. 渲染数据 v-text 和 v-html
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>Document</title>
<style>
.textColor {
color: blue;
}
</style>
</head>
<body>
<div id="app">
<!-- 先设置了三个标签 -->
<h3>value="baidu.com"</h3>
<input type="text" value="baidu.com">
<!-- 1.将value修改为 动态属性v-bind 绑定 后面的值也不能是固定的 需要是 web.url -->
<h3>v-bind:value="web.url"</h3>
<input type="text" v-bind:value="web.url">
<!-- 2.简写模式:等效于v-bind: -->
<h3>:value="web.url"</h3>
<input type="text" :value="web.url">
<h3>src="windows.jpg"</h3>
<img src="windows.jpg">
<!-- 3.将src修改为动态属性绑定 v-bind -->
<h3>src="windows.jpg"</h3>
<img :src="web.img">
<h3>class="textColor"</h3>
<b class="textColor">zzz</b>
<!-- 4.动态绑定class属性,根据fontStatus的布尔值来决定是否渲染zzz -->
<!-- 这里的{}是用来判断这个className是否要使用，true为使用 false为不使用 -->
<!-- {}相当于数学中的括号，先算括号(即{})的值，再赋值给外部class -->
<h3>class="textColor"</h3>
<b :class="{textColor:web.fontStatus}">zzz</b>
</div>
<script type="module">
// 这里注意还是type = "module"
import {createApp,reactive} from './vue.esm-browser.js';
createApp({
setup(){
const web = reactive({ // reactive创建响应式数据对象web
// 三个属性
url : "www.baidu.com",
img : "windows.jpg",
fontStatus : true // 文字状态
})
return {
web
}
}
}).mount("#app")
</script>
</body>
</html>2. 遍历数组或对象 v-for
<body>
<div id="app">
<!-- 1.创建ul和li标签，li用于循环 -->
<ul>
<!-- 2.为li添加v-for 来循环number数组里的内容 -->
<li v-for="value in data.number">
<!-- 3.用插值表达式{{}}来显示遍历到的内容 -->
{{ value }}
</li>
</ul>
<!-- 4.显示数组的索引和内容 -->
<ul>
<li v-for="(value,index) in data.number">
<!-- 5.键值对形式表示 并使用:来分隔开 -->
index => {{ index }} : value => {{ value }}
</li>
</ul>
<!-- 6.遍历user对象里的内容 -->
<ul>
<li v-for="(value,key) in data.user">
key => {{ key }} : value => {{ value }}
</li>
</ul>
<!-- 7.遍历user对象里的内容 包括index -->
<ul>
<li v-for="(value,key,index) in data.user">
index => {{ index }} : key => {{ key }} : value => {{ value }}
</li>
</ul>
<!-- 8.不用获取所有数据，获取满足条件的数据 -->
<ul>
<!-- 9.将li修改为template标签，它可以包装多个元素/多行代码 -->
<!-- vue会编译它的内容，但不会作为DOM元素在页面中渲染 -->
<template v-for="(value,key,index) in data.user">
<!-- 10.将编译的内容复制到li内 -->
<!-- 11.在li内添加遍历条件 v-if -->
<li v-if = "index == 1">
index => {{ index }} : key => {{ key }} : value => {{ value }}
</li>
</template>
</ul>
<!-- 12.遍历teacher,它是包含两个对象的数组 -->
<ul>
<li v-for="(value,index) in data.teacher">
<!-- 13.遍历每个对象里的属性 -->
index => {{ index }} : value.id => {{ value.id }} : value.name => {{ value.name }} : value.web => {{ value.web }}
</li>
</ul>
<!-- 14.动态属性的添加 -->
<ul>
<!-- :title 当鼠标放在页面的这个对象位置 就会有提醒 -->
<!-- :key 为每个li元素设置一个唯一的值，不一定是value.id 目的是提升性能 -->
<li v-for="(value,index) in data.teacher" :title="value.name" :key="value.id">
index => {{ index }} : value.id => {{ value.id }} : value.name => {{ value.name }} : value.web => {{ value.web }}
</li>
</ul>
</div>
<script type="module">
import {createApp,reactive} from './vue.esm-browser.js';
createApp({
setup(){
const data = reactive({ // reactive创建响应式数据 data
number: ['十','十一','十二'], // 数组
user: {
// 对象
name: 'zzz',
gender: '女'
},
teacher:[
// 包含两个对象的数组
{id:100,name:"zzz",web:"baidu.com"},
{id:101,name:"bbb",web:"www.baidu.com"}
]
})
return {
data
}
}
}).mount("#app")
</script>
</body>3. 双向数据绑定 v-model
之前的动态属性绑定 v-bind:value="XXX" 是单向数据绑定
数据发生变化时，单向绑定的数据会自动更新，但是用户手动修改input值时，不会自动更新。
双向数据绑定实现的就是 用户手动修改input值时自动更新。
这是一种实时渲染的形式
下面的代码中列举6种表单中的情况
<!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>
<div id="app">
<!-- 插值表达式获取每个元素对应的值 -->
<h3>文本框 {{ data.text }}</h3>
<h3>单选框 {{ data.radio }}</h3>
<h3>复选框 {{ data.checkbox }}</h3>
<h3>记住密码 {{ data.remember }}</h3>
<h3>下拉框 {{ data.select }}</h3>
<!-- 1.单向数据绑定 当数据发生改变时, 视图会自动更新. 但用户手动更改 input 的值, 数据不会自动更新 -->
<!-- 这里将data.text的值动态绑定到value属性上 -->
单向数据绑定 <input type="text" :value="data.text">
<hr>
<!--
2.双向数据绑定 当数据发生改变时, 视图会自动更新. 当用户手动更改 input 的值, 数据也会自动更新
对于 <input type="text">, v-model 绑定的是 input 元素的 value 属性
打开页面后，在页面中修改文本框的值时，其他所有的data.text在页面中的值都会修改
注意形式：v-model="XXX" 没有:value=""了
-->
双向数据绑定 <input type="text" v-model="data.text">
<hr>
<!--
3.单选框
和上面文本框不一样的是 文本框只能有唯一的值所以它直接绑定在value上
而对于 <input type="radio">, v-model 绑定的是 input 元素的选中状态，选择的值不是唯一的
形式：v-model="XXX" value="Y"
点击页面选项后 value值显示到页面的radio处
-->
<input type="radio" v-model="data.radio" value="1">写作
<input type="radio" v-model="data.radio" value="2">画画
<hr>
<!--
4.复选框
可以选多个，所以用空数组初始
对于 <input type="checkbox">, v-model 绑定的是 input 元素的选中状态
形式：v-model="XXX" value="Y"
点击页面中的选项后 将value值添加到空数组中
-->
<input type="checkbox" v-model="data.checkbox" value="a">写作
<input type="checkbox" v-model="data.checkbox" value="b">画画
<input type="checkbox" v-model="data.checkbox" value="c">运动
<hr>
<!--
5.记住密码
单个复选框 比如在勾选是否同意注册会实使用
这里初始 remember为false 默认未勾选
形式：v-model="XXX"
点击页面后 记住密码的状态 会在true和false之间切换
-->
<input type="checkbox" v-model="data.remember">记住密码
<hr>
<!--
6.下拉框
对于 <select>, v-model 绑定的是 select 元素的选中状态
形式：
select v-model="XXX"
value=""
value="Y"
...
-->
<select v-model="data.select">
<option value="">请选择</option>
<option value="A">写作</option>
<option value="B">画画</option>
<option value="C">运动</option>
</select>
</div>
<script type="module">
// 模块化开发为例 type="module"
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const data = reactive({ // 创建响应式数据data
// 下面是五个常用表单元素
text: "baidu.com", //文本框
radio: "", //单选框 默认值是空的字符串
checkbox: [], //复选框 默认值是空数组
remember: false, //单个复选框-记住密码 登录时会用到 默认false
select: "" //下拉框 默认值空字符串显示“请选择”
})
return {
data
}
}
}).mount("#app")
</script>
</body>
</html>4. v-model 修饰符
上面实现的都是实时渲染，如果不想实时，想要在某些情况下再渲染可以使用他的修饰符
比如：在失去焦点或按下回车键之后渲染
这里只介绍常用的三种
<body>
<div id="app">
<!-- 插值表达式显示每个属性对应的值 -->
<h3>url: {{ web.url }}</h3>
<h3>user: {{ web.user }}</h3>
实时渲染 <input type="text" v-model="web.url"> <br>
<!--
1.不实时渲染，在失去焦点或按下回车后渲染
形式：v-model.lazy="XXX"
在页面修改后按下回车/失去焦点 上面的所以数据 包括实时渲染的数据都被修改
-->
在失去焦点或按下回车键之后渲染 <input type="text" v-model.lazy="web.url"> <br>
<!--
2.将输入文本框的值转为数字类型
输入 100人, web.user 的值仍为 100
3.需要注意：但是在数字前输入文本时 仍然无法修改为数字型
只有在尾部添加时才会被修饰
-->
输入框的值转换为数字类型 <input type="text" v-model.number="web.user"> <br>
<!--
4.尾部的修饰符
去除首尾空格
在页面中输入时如果前后有空格 在失去焦点/按下回车 后空格被删除
在中间的空格不能去除
-->
去除首尾空格 <input type="text" v-model.trim="web.url">
</div>
<script type="module">
// 模块化开发为例
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const web = reactive({ //创建响应式数据web
url: "baidu.com",
user: 10
})
return {
web
}
}
}).mount("#app")
</script>
</body>5. 渲染数据 v-text 和 v-html
<body>
<div id="app">
<!-- 插值表达式获取title值 -->
<h3>{{ web.title }}</h3>
<!--
1.v-text 将数据解析为纯文本格式
表达效果和插值表达式一样
-->
<h3 v-text="web.title"></h3>
<!--
2.v-html 将数据解析为 html 格式
这里的url是html格式 所以以此为例
正确解析了html和执行了CSS样式
-->
<h3 v-html="web.url"></h3>
<!--
3.如果用v-text渲染url
无法解析html 只是输出为文本格式
-->
<h3 v-text="web.url"></h3>
</div>
<script type="module">
// 模块化开发
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const web = reactive({ // 创建响应式数据web
title: "zzz",
url:"<i style='color:blue;'>www.baidu.com</i>"
})
return {
web
}
}
}).mount("#app")
</script>
</body>本文主要介绍vue3中的一些基本操作。