Vue实战案例：一步步构建企业级项目1
一、Vue程序的概述
Vue是一个能用于构建用户界面的渐进式框架框架，主要用于开发单页应用程序（SPA）和动态用户界面。 Vue由尤雨溪（Evan You）在2014年创建，是前端三大主流框架之一，其他两个是Angular.js和React.js。Vue的核心库只关注视图层，易于与其他库或现有项目集成，并且具有轻量级和高效的特点。它是一个开源项目，旨在提供一个简单、灵活且高效的解决方案来构建现代Web应用程序，适用于各种Web和移动应用开发场景。
二、创建第一个 Vue 应用程序
1、首先，在HTML文件中引入Vue库：
<head>
<title>第一个Vue程序</title>
<script src="../vue.global.js"></script>
</head>
2、在HTML文件中创建Vue实例，指定要操作的DOM元素， 并在HTML文件中使用Vue的指令和语法来动态渲染内容：
<div id="app">
<p>{{ msg }}</p>
<p>{{ web.title }}</p>
<p>{{ web.url }}</p>
<p>{{ func() }}</p>
<button v-on:click="change_url">点击我更换修改网</button>
</div>{{ }} 插值表达式, 可以将 Vue 实例中定义的数据在视图中进行渲染如: Vue 实例中定义一个 msg 变量, 值为 "Hello world",在模板中若使用插值表达式 {{ msg }} 则会被渲染成 "Hello world"
3、在JavaScript文件中编写Vue的代码：
<script>
//创建一个 Vue 应用程序
Vue.createApp({
// 手写一个setup函数, 用于设置组件的响应式"数据"和"方法"等
// 创建一个Vue实例，并利用setup函数配置好这个实例里的数据和方法，并将需要用到的数据和方法暴露出来，供HTML调用。
setup(){
// 定义数据
let msg = "成功创建第一个Vue应用程序!";
const web =Vue. reactive(
{
title: "百度一下，你就知道",
url: "www.baidu.com"
}
)
// 定义方法（函数）
const func = ()=> {
web.title="云中";
console.log("方法func被调用");
}
const change_url=()=>{
web.url+="被修改一次";
}
// 返回一个对象类型的数据
return { msg,
web,
func,
change_url
}
}
}
)4、将 Vue 应用程序挂载(mount) 到 app 元素上
<script>
//创建一个 Vue 应用程序
Vue.createApp( ........
).mount("#app"); //将 Vue 应用程序挂载(mount) 到 app 元素上
</script>通过以上步骤，你可以将Vue与HTML结合编写，实现动态渲染页面内容。快复制代码试试吧！
<head>
<title>第一个Vue程序</title>
<script src="../vue.global.js"></script>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<p>{{ web.title }}</p>
<p>{{ web.url }}</p>
<p>{{ func() }}</p>
<button v-on:click="change_url">点击我更换修改网</button>
</div>
<script>
//创建一个 Vue 应用程序
Vue.createApp({
// 手写一个setup函数, 用于设置组件的响应式"数据"和"方法"等
// 创建一个Vue实例，并利用setup函数配置好这个实例里的数据和方法，并将需要用到的数据和方法暴露出来，供HTML调用。
setup(){
// 定义数据
let msg = "成功创建第一个Vue应用程序!";
const web =Vue. reactive(
{
title: "百度一下，你就知道",
url: "www.baidu.com"
}
)
// 定义方法（函数）
const func = ()=> {
web.title="云中";
console.log("方法func被调用");
}
const change_url=()=>{
web.url+="被修改一次";
}
// 返回一个对象类型的数据
return { msg,
web,
func,
change_url
}
}
}
).mount("#app"); 修改前：
修改后：
三、响应式数据
Vue 响应式数据是 Vue.js 框架的一个核心特性，指的是数据的变化能够自动反映到视图上，而视图的更新也能引起数据的改变。Vue 实现响应式数据的机制主要依赖于其响应式系统。
1. 使用 ref:
在 Vue 3 中，ref 是用来创建基本类型数据的响应式引用。通过 ref 创建的变量，当其值发生变化时，Vue 会自动更新依赖于该变量的视图。
代码如下（里面有详细的解释，不懂的宝子可以看看注释）：
<!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>
<!-- 定义了一个包含Vue应用的容器元素，其ID为“app” -->
<div id="app">
<p>{{ msg }}</p>
<p>{{number}}</p>
<button @click="change">点击我更换数据</button>
<!-- {{ msg }}和{{number}}是Vue的插值表达式，它们会将被data对象中msg和number属性的值渲染到页面上。
<button @click="change">定义了一个按钮，当用户点击按钮时，会调用名为change的方法。 -->
</div>
<script type="module">//指定了以下脚本应以ES6模块的形式执行
import {createApp, ref} from "./vue.esm-browser.js" //模块化开发方式
// "import {createApp, ref} from "./vue.esm-browser.js"这是使用ES6模块导入语法，从指定的模块文件中导入createApp和ref两个函数。
createApp({ //函数用于创建一个Vue应用实例
setup(){ //是一个新的组件选项，它是Vue 3组合式API的入口点，允许你在组件初始化之前定义响应式数据和函数。
const number = ref(10);//创建了一个响应式的引用类型变量number，它的初始值为10。
console.log(typeof number,number); //在控制台输出变量number的类型和值。
const change = () => {
number.value += 20 ; //定义了一个名为change的函数，当调用时会使number的值增加20。
}
// 返回一个对象类型的数据，其中包含msg字符串、number响应式引用和change函数。
return { msg: "成功创建第一个Vue应用程序!" ,
number,
change
}
}
}
).mount("#app");//将 Vue 应用程序挂载(mount) 到 app 元素上
</script>
</body>
</html>2. 使用 reactive:
在 Vue 3 中，reactive是用来创建对象的响应式副本。它使得对象的所有属性都变成响应式的，当属性的值发生变化时，Vue 会自动更新依赖于这些属性值的视图。
代码如下（里面有详细的解释，不懂的宝子可以看看注释）：
<!DOCTYPE html>
<html lang="en">
<head>
<title>让数据变成响应式</title>
</head>
<body>
<!-- 定义了一个包含Vue应用的容器元素，其ID为“app” -->
<div id="app">
<p>{{ msg }}</p>
<p>{{web.number}}</p>
<button @click="change">点击我更换数据</button>
<!-- {{ msg }}和{{number}}是Vue的插值表达式，它们会将被data对象中msg和number属性的值渲染到页面上。
<button @click="change">定义了一个按钮，当用户点击按钮时，会调用名为change的方法。 -->
</div>
<script type="module">//指定了以下脚本应以ES6模块的形式执行
import {createApp, reactive} from "./vue.esm-browser.js" //模块化开发方式
// 这一行使用了import语句来导入Vue.js模块中的createApp和reactive函数。createApp用于创建Vue应用实例，reactive用于创建响应式对象。./vue.esm-browser.js`是模块的路径
createApp({ //这一行调用createApp函数，并传入一个对象作为参数。
setup(){ //是Vue 3中一个新的组件选项，它是一个在组件创建之前执行的函数。在这个函数中，可以定义组件的响应式数据、计算属性和方法。
const web = reactive({
number:10,
});//创建了一个响应式的引用类型变量number，它的初始值为10。响应式意味着当web.number的值发生变化时，依赖于这个值的Vue组件将会重新渲染。
console.log(typeof web,web); //在控制台输出`web`的类型（应该是object）以及web对象本身。
const change = () => {
web.number += 20 ; //定义了一个名为change的函数，当调用时会使number的值增加20。
}
//setup函数返回一个对象，该对象包含三个属性:msg、web和change。msg是一个字符串，web是前面创建的响应式对象，change是修改web.number值的函数。
return { msg: "成功创建第一个Vue应用程序!" ,
web,
change
}
}
}
).mount("#app");//将 Vue 应用程序挂载(mount) 到 app 元素上
</script>
</body>
</html>通过以上的方式，Vue 使得开发者能够更加高效地构建动态交互式的用户界面，而无需手动操作 DOM 或监听事件来更新视图。
3、响应式数据的关键特点包括：
（1）自动更新:
当数据发生变化时，Vue 会自动更新所有该数据的视图部分。
（2）依赖收集:
Vue 会跟踪哪些视图部分依赖于哪些数据，以便在数据变化时只更新相关的部分。
（3）缓存计算结果:
对于计算属性（computed properties），Vue 会缓存它们的计算结果，只有当依赖的数据发生变化时，才会重新计算。
四、条件渲染指令
Vue条件渲染指令是用来根据表达式的真假值来决定是否渲染元素或者组件的指令。Vue提供了以下几种条件渲染指令：
1. v-if：
这个指令会根据表达式的值来决定是否渲染元素。如果表达式的值为true，元素会被渲染；如果为false，则不会渲染该元素，也就是说，它确保在初始渲染过程中条件块内的事件监听器和子组件被正确地设置。
2. v-else-if：
这个指令可以用作v-if的后续指令，它只有在v-if指令的表达式为false时才会被评估。可以链式使用多个v-else-if，但它们必须紧跟在v-if或v-else-if后面。
3. v-else：
这个指令用于处理默认情况，即当所有之前的条件都不满足时。它也必须紧跟在v-if或v-else-if后面，并且不需要表达式。
使用这些指令时，可以根据不同的场景选择最合适的方法来实现条件渲染。`v-if`是“真正”的条件渲染，因为它确保在条件切换时条件块内的事件监听器和子组件被销毁和重建。
条件渲染指令示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染</title>
<style>
</style>
</head>
<body>
<div id="app">
<h3>{{web.number}}</h3>
<h4 v-if="web.number<1000">我是小于1000的数字</h4>
<h4 v-else-if="web.number>1000 && web.number<2000">我是大于1000且小于2000的数字</h4>
<h4 v-else="web.number>2000">我是大于2000的数字</h4>
<button v-on:click="add_number">点击我修改显示状态</button>
</div>
<!-- ES6基准新的特性，支持类似Python的模板开发方式 -->
<script type="module">
import {createApp, reactive, ref} from "./vue.esm-browser.js"
createApp(
{
setup(){
// 定义数据
const web = reactive(
{
isshow: true, //布尔变量，用于条件判断是否显示某个节点
number: 500
}
);
// 定义方法（函数）
const change_isshow = () => {
web.isshow = !web.isshow;
}
const add_number = () => {
web.number += 1000;
}
// 返回一个对象类型的数据 (数据-函数，或者说属性-方法)
return {
web,
change_isshow,
add_number
}
}
}
).mount("#app");
</script>
</body>
</html>初始值为：
点击按钮一次后：
每点击按钮一次，number的值增加1000，快复制代码试试吧！
五、遍历指令
遍历指令主要是v-for指令。v-for是Vue.js中的一个重要指令，用于在模板中迭代渲染数组或对象中的数据。通过v-for指令，开发者可以轻松地遍历数组或对象，并为每个元素生成相应的HTML结构。
1、实验1：遍历对象的值。
代码如下：
<body>
<div id="app">
<!-- 遍历对象的值 -->
<h4>实验1：遍历对象的值</h4>
<!-- 使用Vue的v-for指令遍历data.user对象的每个值。 -->
<p v-for="value in data.user">
{{value}}
<!-- {{value}} 插值表达式用于显示当前遍历到的值。 -->
</p>
</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>运行结果：
2、实验2：遍历对象的值和索引（键）。
代码如下：
<body>
<div id="app">
<!-- 使用v-for指令遍历data.user对象，同时获取键和值。 注意：写指令时，先值后索引 -->
<h4>实验2：遍历对象的值和索引（键）。 注意：写指令时，先值后索引</h4>
<p v-for="(value, key) in data.user">
{{key}} : {{value}}
</p>
</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>结果：
3、实验3：遍历数组的值和索引。
代码如下：
<body>
<div id="app">
<!-- 使用v-for指令遍历data.number数组，同时获取索引和值。 注意：写指令时，先值后索引 -->
<h4>实验3：遍历数组的值和索引。 注意：写指令时，先值后索引</h4>
<p v-for="(v, i) in data.number">
{{i}} : {{v}}
</p>
<!-- {{i}} : {{v}} 显示索引和对应的值。 -->
<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>结果：
4、实验4：遍历对象的值，键和索引。
代码如下：
<body>
<div id="app">
<!-- 使用v-for指令遍历data.user对象，同时获取值、键和索引。 注意：写指令时，先值再键后索引 -->
<h4>实验4：遍历对象的值，键和索引。 注意：写指令时，先值再键后索引</h4>
<p v-for="(v, k, i) in data.user">
{{i}} : {{k}}: {{v}}
</p>
<!-- {{i}} : {{k}}: {{v}} 显示索引、键和对应的值。 -->
</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>结果：
六、属性动态化指令（节点的动态属性(单向绑定)）
Vue中的单向绑定是指数据只能从Vue的data对象流向视图（DOM），而不能从视图流向data对象。这种绑定方式确保了数据的一致性和避免不必要的更新，从而提高了应用的性能和响应速度。
在单向绑定中，数据只能从Vue的data对象流向视图（DOM），而不能反向流动。这意味着当你在data对象中更新数据时，视图会自动更新以反映最新的数据状态；但是，如果用户在页面上进行操作（如在输入框中输入文本），这不会影响data对象中的数据，需要手动收集这些变化并更新到data对象中
<!DOCTYPE html>
<html lang="en">
<head>
<title>节点的动态属性(单向绑定)</title>
<style>
/* 这里定义了一个CSS样式，'.textColor' 类会给文字设置红色和较大的字体。 */
.textColor{
color: red;
font-size: larger;
}
</style>
</head>
<body>
<div id="app">
<!-- 两个标题标签，提供了实验的描述。 -->
<h4> 实验：控制HTML标签的class中某个值是否存在 v-bind:class或 v-bind:id</h4>
<h4> 注：通过布尔值控制该类名是否存在，进而控制CSS样式是否被选择生效</h4>
<b v-bind:class="{textColor:web.fontStatus}" id="b1">修改文字样式</b>
<!-- 以上代码<b>标签用来显示加粗的文本，并且使用'v-bind:class'指令动态绑定一个类名。
这里使用了对象语法，'{textColor: web.fontStatus}'意味着只有当`web.fontStatus`的值为`true`时，
'.textColor'样式类会被应用到这个<b>标签上。 -->
<br><br><br>
<!-- <br>标签用于在按钮上方创建一些空白间隔 -->
<button v-on:click="change">修改</button>
<!-- '<button v-on:click="change">'：这是一个按钮元素，当点击时，会触发名为'change'的方法。 -->
</div>
<script type="module">
// '<script type="module">这是一个脚本标签，使用了'type="module"'，这意味着脚本是在模块模式下运行的。
import { createApp, reactive } from './vue.esm-browser.js'
createApp({//创建了一个Vue应用实例
setup() {// 'setup()'：这是Composition API中的入口函数，用于设置应用的响应式状态和逻辑。
const web = reactive({
fontStatus: false
})//这里创建了一个名为'web'的响应式对象，它有一个名为'fontStatus'的属性，初始值为'false'。
const change = () => {
web.fontStatus = !web.fontStatus; //修改布尔变量
}//定义了一个'change'函数，当被调用时，它会反转'web.fontStatus'的布尔值。
return {
web,
change
}//'return { web, change }'：从'setup'函数返回'web'对象和'change'函数，这样它们就可以在模板中被访问和使用。
}
}).mount("#app")//通过'.mount("#app")'将其挂载到id为"app"的元素上。
</script>
</body>
</html>没有点击按钮修改时：
点击按钮修改后：
