Node.js+Vue 联动，Vue 快速上手：基础学习

Node.js 是后端工具，而 Vue 是前端框架，实际项目中常通过 "Node.js 做后端接口 + Vue 做前端页面" 实现全栈开发。本文结合思维导图，带你快速掌握 Vue 基础（概念、指令）。

一、Vue 快速上手：核心基础

1. Vue 是什么？

Vue 是一套前端渐进式框架，通过简洁的语法实现 "数据驱动视图"，无需手动操作 DOM，是前端开发的主流工具之一。

2. 快速创建 Vue 实例（含插值表达式）

步骤 1：引入 Vue（开发环境用 CDN）
在 HTML 中引入 Vue：

html 复制代码

<!-- index.html -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

步骤 2：核心语法：插值表达式{``{ }}
插值表达式是 Vue 渲染数据的基础，用于将data中的数据插入到 HTML 页面中，支持简单的表达式运算。

html 复制代码

<body>
    <!--
        目标：使用插值表达式渲染数据到网页
        插值表达式：Vue的一种模板语法
        作用：利用表达式进行插值渲染
        语法：{{ 表达式 }}

        注意点：
            1. 使用的数据要存在 data 中
            2. 支持的是表达式，不是语句 if for
            3. 不能在标签属性中使用 {{ }}
    -->

    <div id="app">
        <p>{{ nickname }}</p>
        <p>{{ nickname.substring(2) }}</p>
        <p>{{ age >= 18 ? '成年' : '未成年' }}</p>
        <p>{{ friend.name }} --- {{ friend.desc }}</p>
        <!-- <p>{{ gender }}</p> -->
        <!-- <p>{{ if (age >= 18) { console.log(123) } }}</p> -->
        <!-- <a href="{{ url }}">百度</a> -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app = new Vue({
            // 指定 Vue 管理的区域
            el: '#app',
            // 数据
            data: {
                nickname: '守岸人',
                age: 18,
                friend: {
                    name: '漂泊者',
                    desc: '玩鸣潮'
                },
                url: 'http://www.baidu.com'
            }
        })
    </script>

插值表达式注意事项：
- 只能写在 HTML 标签内容中，不能写在属性里（属性用v-bind绑定）；
- 支持简单表达式，但不支持复杂逻辑（如if语句、循环），复杂逻辑需在methods中封装；
- 会自动转义 HTML（防止 XSS 攻击），若需渲染 HTML 内容，用v-html指令。

3. 核心特性：响应式

修改data中的数据，页面会自动更新：

javascript 复制代码

// 在浏览器控制台执行
app.message = 'Vue响应式真方便！'

页面的h1内容会立即同步变化 ------ 这就是 Vue 的 "数据驱动视图"。

4. 开发者工具

安装浏览器扩展Vue Devtools，可实时查看 / 修改 Vue 实例的data、props等，是开发 Vue 项目的必备工具。

二、Vue 指令：操作 DOM 的 "语法糖"

Vue 通过指令（以v-开头的特殊属性）实现 DOM 操作，常用指令如下：

1. 内容渲染：`v-html`

渲染 HTML 内容（区别于{``{}}只渲染文本）：

html 复制代码

<div id="app">
  <p v-html="richText"></p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    richText: '<strong>这是加粗的文本</strong>'
  }
})
</script>

2. 条件渲染：`v-show/v-if/v-else`

v-show：通过display: none控制元素显示 / 隐藏（频繁切换推荐）
v-if：直接添加 / 删除 DOM 元素（不频繁切换推荐）

html 复制代码

<!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>
        .box {
            width: 200px;
            height: 100px;
            line-height: 100px;
            margin: 10px;
            border: 3px solid #000;
            text-align: center;
            border-radius: 5px;
            box-shadow: 2px 2px 2px #ccc;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-show="isShow" class="box">我是v-show控制的盒子</div>
        <div v-if="isShow" class="box">我是v-if控制的盒子</div>

        <!-- 
            v-if 和 v-else 注意事项：
            v-else 必须紧贴着 v-if 来编写，中间不能有任何标签间隔（注释除外）
        -->
        <P v-if="gender === 1">性别：♂ 男</P>
        <!-- 我是注释 -->
        <!-- <br> -->
        <P v-else>性别：♀ 女</P>
        <hr>
        <p v-if="score >= 90">成绩评定A：奖励电脑一台</p>
        <p v-else-if="score >=70">成绩评定B：奖励周末郊游</p>
        <p v-else-if="score >=60">成绩评定C：奖励零食礼包</p>
        <p v-else>成绩评定D：奖励一周不能玩手机</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        /**
         * 目标：控制盒子显示隐藏
         *      v-show 底层原理：通过设置 display：none 来改变盒子的显示状态
         *      v-if   底层原理：通过创建 / 删除 DOM 元素来实现盒子的隐藏
         * 
         * v-show 比较适合频繁切换显示隐藏的场景
         * v-if 比较适合初始状态就决定了显示隐藏的场景
         * */
        const app = new Vue({
            el: '#app',
            data: {
                isShow: false,
                gender: 1,
                score: 95
            }
        })
    </script>
</body>
</html>

3. 事件绑定：`v-on`（简写`@`）

1.绑定事件（内联语句）：

html 复制代码

    <div id="app">
        <!-- 
            v-on 语法：
            v-on：事件名="内联语句"  适合极其简单的场景，一行代码就搞定
            v-on：事件名="事件处理函数"  适合复杂的逻辑处理

            简写：
            v-on： =>   @
        -->
        <button @click="count--">-</button>
        <span>{{ count }}</span>
        <button @click="count++">+</button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        // 目标：点击 - 让数组减一，点击 + 让数字加一、
        const app = new Vue({
            el: "#app",
            data: {
                count: 100
            }
        })
    </script>

2.绑定事件(配置methods函数)

html 复制代码

    <div id="app">
        <button @click="change">切换显示隐藏</button>
        <h1 v-show="isShow">鸣潮</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        /**
         * 目标：
         * 点击切换 h1 标签显示隐藏
         * 思路：
         * 1. 定义 isShow 变量，默认值为 true
         * 2. 使用 v-show 控制 h1 标签的显示隐藏
         * 3. 给 button 绑定点击事件，对 isShow 变量进行取反
         */
        const app = new Vue({
            el: "#app",
            data: {
                isShow: true
            },
            // methods 中存放函数
            // 注意：只要是定义在 methods 中的函数，最终都会放到实例对象上，所以内部的 this 指向实例对象
            methods: {
                change(){
                    // app.isShow = !app.isShow
                    // 不要用 app 变量来修改，不然变量名修改每个地方都需要修改
                    this.isShow = !this.isShow
                }
            }
        })
    </script>

3.绑定事件（on参数传递）

html 复制代码

    <div id="app">
        <div class="box">
            <h3>小黑自动售货机</h3>
            <!-- 
                v-on 事件处理函数传参：
                @click="事件处理函数（实参）"

                即便加了（）也不是调用函数，依然是绑定事件处理函数，函数依然在事件触发时才会执行，执行时会携带参数过去
            -->
            <button @click="buy(5)">可乐5元</button>
            <button @click="buy(10)">咖啡10元</button>
            <button @click="buy(18)">炸鸡18元</button>
        </div>
        <p>银行卡余额：{{ money }}元</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        /**
         * 目标：点击不同的按钮，银行卡余额减少对应的金额
         */
        const app = new Vue({
            el: "#app",
            data: {
                money: 100
            },
            methods: {
                buy(price){
                    this.money -= price
                }
            }
        })
    </script>

4. 属性绑定：`v-bind`（简写`:`）

动态绑定 HTML 属性（如src、class）：

html 复制代码

    <div id="app">
        <!-- 
            v-bind：动态设置标签属性的
            v-bind：属性名="表达式"

            支持简写：
                :属性名="表达式"
        -->
        <!-- <img v-bind:src="imgUrl" v-bind:title="msg" alt=""> -->
        <img :src="imgUrl" :title="msg" alt="">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        /**
         * 目标：使用 v-bind 指令动态绑定属性标签
         */
        const app = new Vue({
            el: "#app",
            data: {
                imgUrl: './imgs/logo.png',
                msg: 'APEX启动'
            },
        })
    </script>

5. 列表渲染：`v-for`

html 复制代码

    <div id="app">
        <h3>小卡的书架</h3>
        <ul>
            <!-- 
                复用：Vue 不会轻易删除 DOM 并重新创建 DOM，因为这样很消耗性能，它会想尽一切办法少的去销毁 DOM
                v-for 的默认复用策略：就地更新，当删除一个元素后，还剩3个 li，那么 Vue 就会把最后一个 li 删除，里面的内容平移，以复用所有现成的 li

                v-for 时建议加上 key 属性，一般用唯一标识：id
                key 的设置要求：
                    1. 一定要在当前 v-for 中唯一
                        Duplicate keys detected: '1'. This may cause an update error.
                    2. 必须是 string 或 number
                        Duplicate keys detected: '1'. This may cause an update error.
            -->
            <li v-for="item in booksList" :key="item.id">
                <span>{{ item.name }}</span>
                <span>{{ item.author }}</span>
                <button @click="del(item.id)">删除</button>
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        /**
         * 目标: 理解 v-for 中 ：key 的作用
         */
        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)
                }
            }
        })
    </script>

注意：v-for必须加:key，推荐用唯一 ID（此处用 index 是简化示例）。

6. 双向数据绑定：`v-model`

html 复制代码

	<div id="app">
        <!-- 
            v-model 可以让数据和视图，形成双向数据绑定
              1. 数据变化，视图自动更新
              2. 视图变化，数据自动更新
            可以快速获取或设置表单元素的内容
        -->
        账户：<input type="text" v-model="username"> <br><br>
        密码：<input type="password" v-model="password"> <br><br>
        <button @click="login">登录</button>
        <button @click="reset">重置</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        /**
         * 目标: 理解 v-model 的使用
         *  1. 使用 v-model 双向绑定用户名和密码
         *  2. 点击登录时直接获取用户名密码数据
         *  3. 点击重置时直接重置用户名和密码
         */
        const app = new Vue({
            el: "#app",
            data: {
                username: '',
                password: ''
            },
            methods: {
                login(){
                    console.log(this.username, this.password)
                },
                reset(){
                    this.username = '',
                    this.password = ''
                }
            }
        })
    </script>

Node.js+Vue 联动，Vue 快速上手：基础学习

一、Vue 快速上手：核心基础

1. Vue 是什么？

2. 快速创建 Vue 实例（含插值表达式）

3. 核心特性：响应式

4. 开发者工具

二、Vue 指令：操作 DOM 的 "语法糖"

1. 内容渲染：v-html

2. 条件渲染：v-show/v-if/v-else

3. 事件绑定：v-on（简写@）

4. 属性绑定：v-bind（简写:）

5. 列表渲染：v-for

6. 双向数据绑定：v-model

1. 内容渲染：`v-html`

2. 条件渲染：`v-show/v-if/v-else`

3. 事件绑定：`v-on`（简写`@`）

4. 属性绑定：`v-bind`（简写`:`）

5. 列表渲染：`v-for`

6. 双向数据绑定：`v-model`