Vue 学习之旅：从基础到实践(vue快速上手+插值表达式+指令上)

Vue 学习之旅：从基础到实践

文章目录

Vue 学习之旅：从基础到实践
- 一、Vue 简介
- 二、创建 Vue 实例与插值表达式
- - （一）创建 Vue 实例步骤
  - （二）插值表达式
- 三、Vue 核心特性 - 响应式
- 四、Vue 指令
- - （一）v-html
  - （二）v-show 与 v-if
  - （三）v-else 与 v-else-if
  - （四）v-on
  - （五）v-bind
  - （六）v-for
  - （七）v-model
- 五、综合案例 - 简易记事本
- - （一）列表渲染
  - （二）删除功能
  - （三）添加功能
  - （四）底部统计和清空

一、Vue 简介

Vue 是一个用于构建用户界面的渐进式框架。它能够基于数据动态渲染页面，让我们可以更高效地开发 Web 应用。其特点包括声明式渲染、组件系统、客户端路由（VueRouter）以及大规模状态管理（Vuex）等，大大提升了开发效率。

二、创建 Vue 实例与插值表达式

（一）创建 Vue 实例步骤

准备容器：在 HTML 中创建一个用于 Vue 挂载的元素，例如：

<div id="app"></div>

引包：从官网获取 Vue 的开发版本或生产版本的库文件，并在 HTML 中引入，如：

<script src="https://cdn.jsdelivr.net/npm/vue02.7.10/dist/vue.js"></script>

创建实例：使用 new Vue() （在 Vue 3 中需使用 Vue.createApp() ），并传入配置对象。
指定配置项：包括指定挂载点（el）和提供数据（data），示例代码如下：

const app = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue'
  }
});

这里的 el 选择器指定了 Vue 实例控制的是哪个盒子，data 则提供了在模板中可以使用的数据。

首次挂载实践如下：

<!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>
    <!-- 创建Vue实例，初始化渲染
    1.准备容器（Vue所管理的范围）
    2.引包(分开发版本和生产版本)
    3.创建实例
    4.添加配置项 => 完成渲染
     -->


    <div id="app">
    <!-- 编写渲染代码的逻辑 -->
        <h1>{{ msg }}</h1>
        <a href="#">{{ count }}</a>  
    </div>

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

    <script>
        // 一旦引入 VueJs 核心包，在全局环境下，就有了Vue构造函数
        const app = Vue.createApp({
             // 通过 data 提供数据
            data() {
                return{
                    msg : 'Hello!',
                    count : '123'
                };
            }
        });
        // 挂载 Vue 应用实例到元素上
        app.mount('#app');
    </script>

</body>
</html>

（二）插值表达式

插值表达式 {{ }} 是 Vue 的一种模板语法。它的作用是利用表达式进行插值，并将结果渲染到页面中。表达式是可以被求值的代码，JS 引擎会计算出结果。例如：

<div id="app">
  <h3>{{ title }}</h3>
  <p>{{ nickname.toUpperCase() }}</p>
  <p>{{ age >= 18? '成年' : '未成年' }}</p>
  <p>{{ obj.name }}</p>
</div>

在上述代码中，{{ title }} 会将 data 中 title 的值渲染到页面上，{{ nickname.toUpperCase() }} 会将 nickname 转换为大写后显示。

需要注意的是：

使用的数据必须存在于 data 中，否则无法正确渲染。例如，如果 data 中没有定义 hobby，那么 {{ hobby }} 将不会显示任何内容。
支持的是表达式，而非语句，像 if、for 等语句不能直接在插值表达式中使用。例如，{{ if }} 是错误的用法。
不能在标签属性中使用 {{ }} 插值，如 <p title="{{username }}">我是 p 标签</p> 是错误的，应该使用 v-bind 指令来动态设置属性。

三、Vue 核心特性 - 响应式

Vue 的响应式特性是其核心之一，意味着数据变化时，视图会自动更新。例如：

const app = new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue'
  }
});
// 当修改数据时
app.msg = 'New Message';

在上述代码中，当修改 app.msg 的值时，页面上对应的插值表达式 {{ msg }} 显示的内容会自动更新。

我们可以通过 实例.属性名 来访问 data 中的数据，通过 实例.属性名 = 值 来修改数据。这样在开发过程中，我们只需关注业务逻辑对数据的修改，Vue 会自动处理视图的更新，大大简化了开发流程。

如我们可以设置多个响应式数据，msg和count：

 <script>
        const app = Vue.createApp({
            data() {
                return {
                    msg : 'Hello,周一。',
                    count : 100
                }
            },
        });

        app.mount('#app');
    </script>

四、Vue 指令

（一）v-html

作用：设置元素的 innerHTML。
语法：v-html = "表达式 "，例如：

<div v-html="str"></div>

这里的 str 应该是一个包含 HTML 标签的字符串，它会被解析并渲染到元素内部。但需要注意，使用 v-html 可能存在安全风险，如果内容来自用户输入或不可信来源，可能会导致 XSS 攻击。

举个例子：

<body>
    <div id="app">
        <div v-html="msg"></div>
    </div>
    
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    msg :`
                    <a href="https://www.bilibili.com/">
                        哔哩哔哩
                    </a>
                   `
                }
            },
        });

        app.mount('#app');
    </script>
</body>

（二）v-show 与 v-if

v-show：
- 作用：控制元素显示隐藏。
- 语法：v-show = "表达式"，当表达式的值为 true 时显示元素，为 false 时隐藏元素。其原理是切换 display:none 来控制显示隐藏。适用于频繁切换显示隐藏的场景。例如：

<button v-show="isVisible">显示/隐藏按钮</button>

这里的 isVisible 是一个在 data 中定义的布尔值，根据其值来决定按钮的显示状态。

v-if：
- 作用：控制元素显示隐藏（条件渲染）。
- 语法：v-if = "表达式"，当表达式值为 true 时显示元素，为 false 时移除元素节点。适用于要么显示，要么隐藏，不频繁切换的场景。例如：

<div v-if="hasContent">这里是有条件显示的内容</div>

这里的 hasContent 也是一个在 data 中定义的布尔值。

（三）v-else 与 v-else-if

作用：辅助 v-if 进行判断渲染。
语法：v-else 或 v-else-if = "表达式"，需要紧挨着 v-if 一起使用。例如：

// 多种判断
<div v-if="score >= 90">成绩评定 A：奖励电脑一台</div>
<div v-else-if="score >= 70 && score < 90">成绩评定 B：奖励周末郊游</div>
<div v-else-if="score >= 60 && score < 70">成绩评定 C：奖励零食礼包</div>
<div v-else>成绩评定 D：惩罚一周不能玩手机</div>

在上述代码中，根据 score 的值来显示不同的评定结果，score 是在 data 中定义的变量。

<script>
        const app = Vue.createApp({
            data() {
                return {
                   score : 80
                }
            },
        });
        app.mount('#app');
    </script>

（四）v-on

作用：注册事件，即添加监听和提供处理逻辑。
语法：
- v-on:事件名 = "内联语句"
- 内联语句可以是简单的变量操作、函数调用等能在 JavaScript 中合法执行的代码，但需要注意遵循 Vue 的响应式原理和相关规则，且要确保使用的数据在 data 或 Vue 实例的其他有效作用域内有定义
- 例如：
- count++ 就是内联语句。它表示当按钮被点击时，会执行将 count 的值加 1 的操作。这里的 count 通常是在 Vue 实例的 data 中定义的属性

<button v-on:click="count++">按钮</button>

这里的 click 是事件名，count++ 是内联语句，每次点击按钮会使 count 的值加 1，count 应该在 data 中定义。

	    <button v-on:click="count--">-</button>
        <span> {{count}} </span>
        <button v-on:click="count++">+</button>

就能通过点击左边减1，右边加1.

- `v-on:事件名 = "methods 中的函数名"`，例如：

<button v-on:click="fn">按钮</button>

这里的 fn 是在 methods 中定义的函数，如下：

const app = new Vue({
  el: '#app',
  data: {
    count: 100
  },
  methods: {
    fn() {
      console.log('提供逻辑代码');
    }
  }
});

例如：

<body>
    <div id="app">
        <br>
        <button @click="fn">点击切换隐藏</button>
        <h1 v-show="isshow">今天是星期一吗？</h1>
    </div>
    
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                   isshow : true
                }
            },

            methods: {
                fn() {
                    this.isshow = !this.isshow;
                }
            },
        });

        app.mount('#app');
    </script>
</body>

就可以通过点击“点击切换隐藏”，使“今天是星期一吗？”隐藏起来，再点击一次又可以让其显现。

简写：@事件名，例如 @click。同时需要注意，methods 函数内的 this 指向 Vue 实例。
例如：

        <button @click="count--">-</button>
        <span> {{count}} </span>
        <button @click="count++">+</button>

（五）v-bind

作用：动态地设置 HTML 的标签属性，如 src、url、title 等。
语法：v-bind:属性名="表达式"，简写形式为 :属性名="表达式"。例如：

<div id="app">
  <img v-bind:src="url">
</div>

在 JavaScript 中：

const app = new Vue({
  el: '#app',
  data: {
    url: '图片路径'
  }
});

（六）v-for

作用：基于数据循环，多次渲染整个元素，可以遍历数组、对象、数字等。
例如代码为：

<body>
    <div id="app">
        <h3>水果店</h3>
        <ul>
            <li v-for = "(item , index) in list">
                {{item}} - {{ index }}
            </li>
        </ul>
    </div>

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

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    list : ['西瓜', '葡萄', '苹果', '榴莲']
                }
            },
        })

        app.mount('#app');
    </script>
</body>

可以展现出：
遍历数组语法：v-for = "(item, index) in 数组"，其中 item 是数组的每一项，index 是下标。也可以省略 index，写成 v-for = "item in 数组"。例如：

<ul>
  <li v-for="(book, index) in booksList" :key="book.id">// 给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用
    <span>{{ book.name }}</span>
    <span>{{ book.author }}</span>
    <button @click="del(book.id)">删除</button>
  </li>
</ul>

在 JavaScript 中：

const app = new Vue({
  el: '#app',
  data: {
    booksList: [
      { id: 1, name: '《红楼梦》', author: '曹雪芹' },
      { id: 2, name: '《西游记》', author: '吴承恩' },
      { id: 3, name: '《水浒传》', author: '施耐庵' },
      { id: 4, name: '《三国演义》', author: '罗贯中' }
    ]
  },
  methods: {
    del(id) {
      this.booksList = this.booksList.filter(item => item.id !== id)// 这里编写删除书籍的逻辑，比如从 booksList 中删除对应 id 的书籍
    }
  }
});

启动后，点击中间的两个“删除”后，就可以得到：

v-for 中的 key：
- 语法：key 属性 = "唯一标识"，作用是给列表项添加唯一标识，便于 Vue 进行列表项的正确排序复用。
- 注意点：
  - key 的值只能是字符串或数字类型。
  - key 的值必须具有唯一性。
  - 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）。
  - 不加key 的 v-for 的默认行为就会尝试原地修改元素（即：就地复用）

（七）v-model

作用：给表单元素使用，实现双向数据绑定。可以快速获取或设置表单元素内容，即数据变化时视图自动更新，视图变化时数据也自动更新。
语法：v-model = '变量'。例如：

<input v-model="username">
<input v-model="password">

在 JavaScript 中：

const app = new Vue({
  el: '#app',
  data: {
    username: '',
    password: ''
  }
});

五、综合案例 - 简易记事本

简易记事本的功能需求包括列表渲染、删除功能、添加功能、底部统计和清空。

（一）列表渲染

使用 v-for 指令结合 key 的设置和插值表达式来实现。例如：

<ul>
  <li v-for="(task, index) in taskList" :key="task.id">
    {{ task.name }}
  </li>
</ul>

在 JavaScript 中：

const app = new Vue({
  el: '#app',
  data: {
    taskList: [
      { id: 1, name: '跑步锻炼 20 分钟' },
      { id: 2, name: '复习数组语法' }
    ]
  }
});

（二）删除功能

通过 v-on 调用传参和 filter 方法来过滤数组，实现删除功能。例如：

<button @click="del(task.id)">删除</button>

在 JavaScript 中：

methods: {
  del(id) {
    this.taskList = this.taskList.filter(task => task.id!== id);
  }
}

（三）添加功能

使用 v-model 绑定输入框的值，通过 unshift 方法修改原数组来添加新任务。例如：

<input v-model="newTask">
<button @click="addTask">添加任务</button>

在 JavaScript 中：

data: {
  newTask: ''
},
methods: {
  addTask() {
    this.taskList.unshift({ id: Date.now(), name: this.newTask });
    this.newTask = '';
  }
}

（四）底部统计和清空

底部统计：使用数组的 length 属性来累计任务数量，例如：

<p>合计: {{ taskList.length }}</p>

清空功能：通过覆盖数组来清空列表，例如：

<button @click="clearTasks">清空任务</button>

在 JavaScript 中：

methods: {
  clearTasks() {
    this.taskList = [];
  }
}

通过这个综合案例，我们可以将所学的 Vue 知识综合运用起来，实现一个具有实际功能的应用程序。在学习 Vue 的过程中，不断练习和实践这些指令和特性，能够更好地掌握 Vue 的开发技巧，提高开发效率，开发出更加优秀的 Web 应用。

其完整源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
<title>简易记事本</title>
</head>
<body>

<!-- 主体区域 -->
<section id="app">
  <!-- 输入框 -->
  <header class="header">
    <h1>简易记事本</h1>
    <!-- 使用 v-model 实现双向数据绑定，将输入框的值与 todoName 数据属性关联 -->
    <input v-model="todoName" placeholder="请输入任务" class="new-todo" />
    <!-- 点击按钮调用 add 方法添加任务 -->
    <button @click="add" class="add">添加任务</button>
  </header>
  <!-- 列表区域 -->
  <section class="main">
    <ul class="todo-list">
      <!-- 使用 v-for 遍历 list 数组，生成任务列表项 -->
      <li class="todo" v-for="(item, index) in list" :key="item.id">
        <div class="view">
          <!-- 显示任务的索引 -->
          <span class="index">{{index + 1}}.</span> 
          <!-- 显示任务名称 -->
          <label>{{item.name}}</label>
          <!-- 点击按钮调用 del 方法删除任务，将 item.id 作为参数传递 -->
          <button class="destroy" @click="del(item.id)"></button>
        </div>
      </li>
    </ul>
  </section>
  <!-- 统计和清空 -->
  <footer class="footer" v-show=" list.length > 0">
    <!-- 统计任务数量 -->
    <span class="todo-count">合 计:<strong> {{ list.length }} </strong></span>
    <!-- 点击按钮调用 clear 方法清空任务列表 -->
    <button @click="clear" class="clear-completed">
      清空任务
    </button>
  </footer>
</section>

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

<script>
    const app = Vue.createApp({
        data() {
            return {
                // 存储输入框中的任务名称
                todoName : '',
                // 存储任务列表，每个任务是一个对象，包含 id 和 name 属性
                list : [
                    {id : 1, name : '跑步两公里'},
                    {id : 2, name : '写三篇申论'},
                    {id : 3, name : '跳绳20分钟'},
                ]
            }
        },

        methods : {
            // 删除任务的方法，根据传入的 id 过滤列表，保留 id 不相等的任务
            del(id) {
                this.list = this.list.filter(item => item.id!== id)
            },

            // 添加任务的方法
            add () {
                // 检查输入框是否为空，如果为空弹出提示并返回
                if(this.todoName.trim() === '')
                {
                    alert('请输入任务名称')
                    return
                }
                // 将新任务添加到列表头部，并使用当前时间戳作为新任务的 id
                this.list.unshift({
                    id : +new Date(),
                    name : this.todoName
                })
                // 清空输入框
                this.todoName = ''
            },

            // 清空任务列表的方法，将 list 数组置为空数组
            clear () {
                this.list = []
            }
        }
    })
    app.mount('#app');
</script>
</body>
</html>

展示如下：

当实现“添加任务”：

当实现“删除任务”：

当实现“清空任务”：

希望这份博客能够帮助大家更好地理解和学习 Vue，如果在学习过程中有任何疑问，欢迎随时交流和探讨。

               name : this.todoName
            })
            // 清空输入框
            this.todoName = ''
        },

        // 清空任务列表的方法，将 list 数组置为空数组
        clear () {
            this.list = []
        }
    }
})
app.mount('#app');

```

展示如下：

[外链图片转存中…(img-hyKuBRvf-1736758207694)]

当实现“添加任务”：

[外链图片转存中…(img-1vDtnaa3-1736758207694)]

当实现“删除任务”：

[外链图片转存中…(img-Ep2SrGCB-1736758207694)]

当实现“清空任务”：

[外链图片转存中…(img-vUGRGXVj-1736758207694)]

希望这份博客能够帮助大家更好地理解和学习 Vue，如果在学习过程中有任何疑问，欢迎随时交流和探讨。