Vue 快速入门-CSDN博客

本文链接：https://blog.csdn.net/hlx20080808/article/details/148952907

一、Vue是什么

Vue是一款用于构建用户界面的渐进式的JavaScript框架。

官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

其核心特性包括：

响应式数据绑定：通过 Vue 的响应式系统，数据变化会自动反映到视图，减少手动 DOM 操作。
组件化开发：将界面拆分为独立可复用的组件，便于维护和协作。
虚拟 DOM（Virtual DOM）：通过 JavaScript 对象模拟 DOM 结构，减少真实 DOM 操作，提升性能。
渐进式集成：可从一个组件开始逐步扩展，也可与其他库（如 React 生态工具）结合使用。

二、Vue的使用

1、 操作步骤：

准备一个html文件，引入Vue模块（参考官方文档）【注意：模块化的js，引入时，需要设置 type="module"】

创建Vue程序的应用实例

准备元素（div），交给Vue控制

<body>
    <div id="app"><h2>{{ message }}</h2></div>

    <!-- 引入 Vue 3 -->
    <script type="module">
         import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

         // 创建 Vue 应用实例并挂载到 #app 元素上
         createApp({
           data() {
               return {
                   message: 'Hello, Vue 3!'
               };
           }
         }).mount('#app');

    </script>
</body>

注意：

Vue中定义数据，必须通过data方法来定义，data方法返回值是一个对象，在这个对象中定义数据。

插值表达式中编写的变量，一定是Vue中定义的数据，如果插值表达式中编写了一个变量，但是在Vue中未定义，将会无效显示。

Vue应用实例接管的区域是 '#app'，超出这个范围，就不受Vue控制了，所以vue的插值表达式，一定写在 <div id="app">...</div> 的里面。

二、Vue指令

指令：指的是HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义，可以实现不同的功能。

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-if/v-else-if/v-else	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件

1、v-for

作用：列表渲染，遍历容器的元素或者对象的属性

语法：<tr v-for="(item,index) in items" :key="item.id">{{item}}</tr>

参数：

items 为遍历的数组

item 为遍历出来的元素

index 为索引/下标，从0开始；可以省略，省略index语法： v-for = "item in items"

key：

作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能

推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）

注意：遍历的数组，必须在data中定义.

操作如下表的数据

上图的数据使用数组来存放数据：

 <!-- vue数据绑定 -->
    <script type="module">
        import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        createApp({
            data() {
                return {
                    users: [
                        { id: 1, name: '徐帆', images: 'https://picsum.photos/30/30?random=1', gender: '1', position: '1', hireDate: '2024-06-09', lastActive: '2024-07-30 14:59:38' },
                        { id: 2, name: '崔威威', images: 'https://picsum.photos/30/30?random=2', gender: '1', position: '2', hireDate: '2025-05-09', lastActive: '2025-07-01 00:00:00' },
                        { id: 3, name: '张翠花', images: 'https://picsum.photos/30/30?random=3', gender: '2', position: '2', hireDate: '2024-05-15', lastActive: '2024-06-18 09:30:15' }
                    ]
                };
            }
        }).mount('.container');
    </script>

再遍历每一条数据：

  <tbody>
                 <!-- 数据加载tr... -->
                    <tr v-for="(user,index) in users" :key="user.id">
                        <td>{{index + 1}}</td>
                        <td>{{user.name}}</td>
                        <td>{{user.gender==1?'男':'女'}}</td>
                        <!--插值表达式不能直接使用在标签中-->
                        <td><img src="{{user.image}}" class="avatar" alt="{{user.name}}"></td>
                        <td>{{user.position}}</td>
                        <td>{{user.hireDate}}</td>
                        <td>{{user.lastActive}}</td>
                        <td>
                            <button class="action-btn">编辑</button>
                            <button class="action-btn">删除</button>
                        </td>
                    </tr>
                </tbody>

2、v-bind

作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。

语法：v-bind:属性名="属性值" <img v-bind:src="item.image" width="30px">

简化：:属性名="属性值" <img :src="item.image" width="30px">

注意：v-bind 所绑定的数据，必须在data中定义/或基于data中定义的数据而来。

    <!--动态为HTML标签绑定属性值-->
     <td><img  v-bind:src="user.images" class="avatar" :alt="user.name"></td>

3、v-if& v-show

作用：这两类指令，都是用来控制元素的显示与隐藏的

v-if语法：v-if="表达式"，表达式值为 true，显示；false，隐藏

原理：基于条件判断，来控制创建或移除元素节点（条件渲染）

场景：要么显示，要么不显示，不频繁切换的场景

其它：可以配合 v-else-if / v-else 进行链式调用条件判断

如职位判断操作：

                
                        <!--v-if..v-else-if..v-else 来控制元素的显示或隐藏-->
                        <td>
                            <span v-if="user.position == '1'">班主任</span>
                            <span v-else-if="user.position == '2'">讲师</span>
                            <span v-else-if="user.position == '3'">学工主管</span>
                            <span v-else-if="user.position == '4'">教学主管</span>
                            <span v-else-if="user.position == '5'">咨询师</span>
                            <span v-else>未知职位</span>
                        </td>

再通过右键 | 审查元素查看Element：

总之：使用v-if确实是根据条件判断，是否渲染这个元素节点，条件成立才会渲染。

v-show语法：v-show="表达式"，表达式值为 true，显示；false，隐藏

原理：基于CSS样式display来控制显示与隐藏

场景：频繁切换显示隐藏的场景

如职位判断操作：

  <!-- 使用v-show来显示职位 -->
   <td>    
      <span v-show="user.position == '1'">班主任</span>
      <span v-show="user.position == '2'">讲师</span>
      <span v-show="user.position == '3'">学工主管</span>
      <span v-show="user.position == '4'">教学主管</span>
      <span v-show="user.position == '5'">咨询师</span>
   </td>

再通过右键 | 审查元素查看Element：

总之：使用 v-show 指令来渲染展示，所有元素都会渲染，只不过是通过控制display这个css样式，来决定元素是展示还是隐藏。

4、v-model

作用：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据

语法：v-model="变量名"

这里的双向数据绑定，是指 Vue中的数据变化，会影响视图中的数据展示。视图中的输入的数据变化，也会影响Vue的数据模型。

注意：v-model 中绑定的变量，必须在data中定义。

如搜索栏的表单项，绑定数据：

  <form class="search-form">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" id="name" v-model="findForm.name" placeholder="请输入姓名">
            </div>

            <div class="form-group">
                <label for="gender">性别</label>
                <select id="gender" v-model="findForm.gender">
                    <option value="">全部</option>
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select>
            </div>

            <div class="form-group">
                <label for="position">职位</label>
                <select id="position" v-model="findForm.position">
                    <option value="">全部</option>
                    <option value="1">班主任</option>
                    <option value="2">讲师</option>
                    <option value="3">学工主管</option>
                    <option value="4">教学主管</option>
                    <option value="5">咨询师</option>
                    <option value="6">其他</option>
                </select>
            </div>

            <button class="btn btn-primary">查询</button>
            <button class="btn btn-secondary">清空</button>
        </form>

测试

安装vue插件：极简插件 - 搜索插件 - vue

打开谷歌浏览器| 完成更新

将下载的文件解压，再拖拉到这里，再添加

注意：单击详情，修改一下启用状态

操作如下：

5、v-on

作用：为html标签绑定事件（添加时间监听）

语法：v-on:事件名="方法名"

<input type="button" value="查询" v-on:click="searchUsers">

简写 @事件名="…"

<input type="button" value="清空" @click="clearForm">


            <button class="btn btn-primary" v-on:click="searchUsers">查询</button>
            <button class="btn btn-secondary" @click="clearForm">清空</button>

运行如下：