Vue实战案例：一步步构建企业级项目2
目录
一、双向数据绑定指令（v-model ）
v-model指令是一种双向数据绑定指令，它允许视图和数据源之间进行双向同步更新。当数据源发生变化时，绑定的视图会自动更新；反之，当视图中的数据发生变化时，数据源也会同步更新。这种机制极大地简化了开发过程中数据和视图的同步问题
应用场景：
1、文本输入框
<div id="app">
双向数据绑定： <input type="text" v-model="data.text">
<hr>
</div>
<script type="module">
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const data = reactive({
text: "baidu.com", //文本框
})
return {
data
}
}
}).mount("#app")‘v-model="data.text"‘’ 是Vue.js的一个指令，用于在输入框和应用的数据之间建立双向绑定。双向数据绑定 当数据发生改变时, 视图会自动更新. 当用户手动更改 input 的值, 数据也会自动更新对于单个<input type="text">, v-model 绑定的是 input 输入框元素的 value 属性（即默认填充的文本值）
2、单选框
<body>
<div id="app">
<h3>您的爱好（单选）：<ins> {{ data.radio }}</ins></h3>
<!-- 对于多个<input type="radio">, v-model 绑定的是 input 单选元素组的选中的值value -->
<input type="radio" v-model="data.radio" value="写作" name="radio">写作
<input type="radio" v-model="data.radio" value="画画" name="radio">画画
<hr>
</div>
<script type="module">
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const data = reactive({
radio: ""
})
return {
data
}
}
}).mount("#app")
</script>
</body>注释：（1） ‘<ins>’ 标签通常用来表示文本中的插入内容，但在这里它被用来显示'data.radio' 的值。'{{ data.radio }}'是Vue.js的插值表达式，它会将 'data.radio' 的当前值插入到页面中。
（2） '<input type="radio">' 标签定义了一个单选按钮。
（3）'v-model="data.radio"' 是Vue.js的指令，用于创建双向数据绑定。在这里，它会监视名为 'data.radio'的数据属性，并根据用户的选择更新这个属性的值。'value="写作"'定义了单选按钮的值，当选中这个单选按钮时，'data.radio'将会被设置为'"写作"'。'name="radio"'属性用来将单选按钮分组，这意味着它们是互斥的，用户只能选择其中一个。'写作' 和 '画画' 是显示在单选按钮旁边的文本，提示用户这个单选按钮代表的选项。
3、复选框
<body>
<div id="app">
<!-- 实验三： 复选框的双向数据绑定 -->
<h3>您喜欢吃的水果（多选）： {{ data.checkbox }}</h3>
<!-- 对于多个<input type="checkbox">, v-model 绑定的是 input 复选元素组的选中的值value -->
<input type="checkbox" v-model="data.checkbox" value="苹果">苹果
<input type="checkbox" v-model="data.checkbox" value="香蕉">香蕉
<input type="checkbox" v-model="data.checkbox" value="橙子">橙子
<hr>
</div>
<script type="module">
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const data = reactive({
checkbox: []
})
return {
data
}
}
}).mount("#app")
</script>
</body>注释:（1）'<input type="checkbox">'：这是一个HTML输入元素，类型为复选框（checkbox）。用户可以勾选或取消勾选这个框。
（2）'v-model="data.checkbox"'：这是Vue.js框架的指令，用于创建数据双向绑定。在这个例子中，复选框的选中状态将会与Vue实例的`data`对象的`checkbox`属性绑定。如果复选框被中，'data.checkbox'的值将会是'true'；如果未被选中，则值为'false'。
（3）'value="苹果"'：这是HTML标准属性，用于设置输入元素的值。在这个例子中，如果复选框被选中，它的值`苹果`将会被发送到服务器，或者可以在Vue实例中通过'data.checkbox'访问到。（4）'苹果'：这是文本内容，它简单地显示在复选框旁边，用于指示这个复选框代表的是“苹果”这个选项。
4、单个复选按钮
<body>
<div id="app">
<!-- 实验四： 单个复选按钮的双向数据绑定 -->
<h3>需要记住密码? {{ data.remember }} </h3>
<!-- 对于单个<input type="checkbox">, v-model 绑定的是单个 input 复选按钮的是否被选中的布尔值 -->
<input type="checkbox" v-model="data.remember">记住密码
<hr>
</div>
<script type="module">
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const data = reactive({
remember: false //单个复选框（布尔值），常用于网页登录是“记住密码”这个场景
})
return {
data
}
}
}).mount("#app")
</script>
</body>注释：（1） '{{ data.remember }}' 是Vue.js框架的模板语法，用于在HTML中插入数据。这里它会显示Vue实例中'data'对象的'remember'属性的当前值。如果'data.remember'为'true'，它可能会显示为文本“true”，如果为`false`，则可能不显示任何内容或显示“false”，具体取决于数据绑定和Vue的配置。
（2）'<input type="checkbox">'：这是一个HTML输入元素，类型为复选框，允许用户选择一个二进制选项（是/否，开/关等）。
（3）'v-model="data.remember"'：Vue.js的'v-model'指令用于创建数据绑定。在这个例子中，复选框的选中状态会与Vue实例的'data'对象的'remember'属性绑定。如果复选框被选中，'data.remember'将会被设置为'true'；如果未被选中，将会被设置为'false'。
（4） “记住密码”：这是显示在复选框旁边的文本，用于指示这个复选框的功能，即是否记住密码。
5、下拉单选按钮
<body>
<div id="app">
<!-- 实验五： 下拉单选按钮的双向数据绑定 -->
<h3>下拉选择，您的专业是: {{ data.select }}</h3>
<!-- 对于 <select>, v-model 绑定的是 select 元素众多选项中被选中的值value-->
<select v-model="data.select">
<option value="计算机">计算机</option>
<option value="数字媒体">数字媒体</option>
<option value="中医养生">中医养生</option>
<option value="针灸推拿">针灸推拿</option>
</select>
</div>
<script type="module">
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
const data = reactive({
select: "" //下拉框
})
return {
data
}
}
}).mount("#app")
</script>
</body>注释：
（1）‘{{ data.select }}’这里，它会显示Vue实例的`data`对象中的`select`属性的当前值。这个值应该是与'<select>'元素绑定的选项值，代表用户选择的专业。
（2） '<select>' 是一个HTML标签，用于创建下拉选择框。 'v-model="data.select"''将'<select>'元素选中的值绑定到Vue实例的'data'对象的'select'属性上。当用户从下拉列表中选择一个选项时，'data.select'的值会自动更新为对应的选项值。
（3） '<option>'是一个HTML标签，用于定义'<select>'元素中的选项。'value="计算机"' 是该选项的值，当选项被选中时，这个值会被传递给绑定的Vue模型。
（4） “计算机” 是显示给用户的选项文本。
二、计算属性
Vue计算属性是Vue.js框架中的一个重要功能，它允许开发者在模板中声明基于其他数据属性的计算属性，这些属性会自动更新，确保数据的一致性并简化数据处理。计算属性基于其依赖的数据进行缓存，只有在依赖的数据发生变化时才会重新计算，这使其在处理复杂逻辑或大量计算时非常高效。
计算属性示例：
<body>
<div id="app">
<h3>调用add方法: {{ add() }}</h3>
<h3>调用sub方法: {{ sub }}</h3>
<!-- v-model的.number修饰符，可以确保输入值为数字，而不是字符串 -->
<!--如果不加.number修饰符，在输入框输入的数字默认为字符串格式，做加法运算时会
变成拼接字符串（因为+被解析成拼接操作），但是减法运算不受影响 -->
x <input type="text" v-model.number="data.x"> <br>
<p>您输入的x值为 {{data.x}}, 类型为 {{typeof data.x}}</p>
y <input type="text" v-model.number="data.y"> <br>
<p>您输入的y值为 {{data.y}}, 类型为 {{typeof data.y}}</p>
</div>
<script type="module">
import { createApp, ref, reactive, computed } from './vue.esm-browser.js'
createApp({
setup() {
const data = reactive({
x: 10,
y: 20
})
//方法-不做缓存
const add = () => {
console.log("调用普通的方法add，不做缓存") //打印两次
return data.x + data.y
}
//计算属性-会做缓存 （计算属性根据其依赖的响应式数据变化而重新计算,但只调用一次以节省性能）
const sub = computed(() => {
console.log("调用带计算属性的方法sub，并缓存起来") //打印一次
return data.x - data.y
})
return {data,add,sub}
}
}).mount("#app")
</script>
</body>注释：
（1）'add'是一个普通的函数，每次调用都会打印一条消息，并返回'x'和'y'的和。
（2）'sub'是一个计算属性，它依赖于'data.x'和'data.y'，并在它们发生变化时重新计算其值。计算属性会缓存其结果，只有当它的依赖项发生变化时才会重新计算，所以它只会打印一次消息，返回'x'和'y'的差。
（3）当用户在`<input>`中修改'x'或'y'的值时，由于'v-model.number'的双向绑定，'data.x'和'data.y'会自动更新。这会导致'add()'方法被重新调用（因为它是普通方法，没有缓存），而'sub'计算属性只有在'x'或'y'实际改变时才会重新计算。因此，'add'会在每次输入时打印消息，而'sub'只会在第一次创建时打印消息。
三、侦听器
Vue侦听器是Vue.js框架中的一个重要特性，用于观察和响应Vue实例上数据属性的变化。当数据属性发生变化时，侦听器可以执行一些特定的操作，比如更新DOM、发起网络请求或执行其他业务逻辑。
侦听器示例：
<body>
<div id="app">
爱好
<select v-model="hobby">
<option value="请选择">请选择</option>
<option value="1">写作</option>
<option value="2">画画</option>
<option value="3">运动</option>
</select>
<br><br>
年
<select v-model="date.year">
<option value="">请选择</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
</select>
月
<select v-model="date.month">
<option value="">请选择</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<script type="module">
import { createApp, ref, reactive, watch } from './vue.esm-browser.js'
createApp({
setup() {
const hobby = ref("请选择") //爱好
const date = reactive({ //日期
year: "2023",
month: "10"
})
// 【实验1. 侦听 hobby 的数据变动】
watch(hobby, function(newValue, oldValue){
console.log("hobby的旧值:", oldValue, " --> hobby的新值:", newValue)
if (newValue == "2") {
console.log("您的爱好选中了：画画")
}
})
watch( () => date.year,
(newValue, oldValue) => {
console.log("date.year的旧值：", oldValue, " --> date.year的新值：", newValue)
if (date.year == "2024") {
console.log("您选中的年份是：2024年")
}
}
)
return { hobby, date }
}
}).mount("#app")
</script>
</body>效果图：
注释:
（1）爱好选择部分：
①<select v-model="hobby">创建了一个下拉列表，其中的值绑定到Vue实例的'hobby'属性。
②'<option value="请选择">请选择</option>' 定义了一个默认选项。
③其余的'<option>'元素定义了不同的爱好，值分别为"1"、"2"、"3"，分别对应写作、画画和运动。
（2）日期选择部分： '<select v-model="date.year">'和'<select v-model="date.month">'分别创建了年份和月份的下拉列表，它们绑定到Vue实例的`date`对象的`year`和`month`属性。
（3）'import { createApp, ref, reactive, watch } from './vue.esm-browser.js''导入Vue的创建应用、响应式引用、响应式对象和侦听器API。
（4）①'watch(hobby, ...)'创建了一个侦听器，当'hobby'的值变化时，它会打印旧值和新值，并且当'hobby'的值变为"2"，它会打印一条特定的消息。
②'watch(() => date.year, ...)' 创建了一个侦听器，当'date.year'的值变化时，它会打印旧值和新值，并且当年份变为"2024"时，它会打印一条特定的消息。
原文地址：https://blog.csdn.net/2401_87197766/article/details/143983250
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！