【Vue核心篇Ⅰ】Vue初识、Vue指令、指令修饰符、动态绑定样式、表单元素的双向数据绑定

Vue初识

什么是Vue

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。特点：

组件化
声明式渲染
数据响应式

拓展：Vue3和Vue2的对比

库和框架的区别

库：可以很方便地完成项目中的某些功能，开发者决定如何编写代码

框架：是一套完整的项目解决方案，开发人员必须按照框架规范去编写代码

插值表达式

表达式 是可以被求值的代码，最终会计算出一个结果

插值表达式 可以将 data 选项中的数据渲染到标签内容中。语法：

html 复制代码

<标签名> {{ 表达式 }} </标签名>

插值表达式只能用在标签中间，为标签内容赋值，不能用在标签属性中（请使用 v-bind 为标签属性赋值）
注意两个花括号中间是一个 JavaScript 表达式，不能使用 JavaScript 关键字，也不能书写HTML标签

eg.一个基本的示例

html 复制代码

<!-- 1.准备一个DOM容器 -->
<div id="app">{{ msg }}</div>
<!-- 2.引入Vue.js核心包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
    // 3.创建一个Vue实例，挂载到容器上
    // 一个Vue实例对应一个容器，此时容器就由Vue管理了
    const app = new Vue({
        el: "#app",
        // 4.声明式渲染
        data: {
            msg: "Hello Vue!",
        },
    });
</script>

data 选项中的每个属性都会添加到新创建的Vue实例上，我们可以使用 this 关键字访问Vue实例上的属性和方法（构造函数中的 this 指向实例对象）

神奇的Vue指令

概念

Vue指令是带有 v- 前缀的特殊的 html 标签属性。Vue会根据不同的指令，针对标签实现不同的功能

Vue 3 常用内置指令及使用示例
 Vue常用内置指令

v-html

在元素中插入 HTML 内容，相当于给元素设置 innerHTML 属性

html 复制代码

<div id="app">
    <div>{{ msg }}</div>
    <div v-text="msg"></div>
    <div v-html="msg"></div>
</div>

js 复制代码

const app = new Vue({
    el: "#app",
    data: {
        msg: "<h1>Hello Vue!</h1>",
    },
});

v-if

条件渲染：控制多个元素的显示与隐藏

html 复制代码

<div id="app">
    <p>{{ person.name }}</p>
    <p v-if="!person.gender">性别：♂ 男</p>
    <p v-else>性别：♀ 女</p>
    
    <hr />
    
    <p v-if="person.score === 'A'">成绩评定A：奖励电脑一台</p>
    <p v-else-if="person.score === 'B'">成绩评定B：奖励周末郊游</p>
    <p v-else-if="person.score === 'C'">成绩评定C：奖励零食礼包</p>
    <p v-else>成绩评定D：惩罚一周不能玩手机</p>
</div>

js 复制代码

const app = new Vue({
    el: "#app",
    data: {
        person: {
            name: "张老三",
            gender: 0, // 0男 1女
            score: "A",
        },
    },
});

v-if、v-else-if、v-else 必须紧挨着，中间不能有任何其它元素，否则会渲染失败！

v-show

条件渲染：控制单个元素的显示与隐藏

v-show 和 v-if 的对比：

bash 复制代码

# v-if
在需要显示/隐藏一个元素时，直接创建或移除这个元素
使用场景：要么显示，要么隐藏，不频繁切换的场景。如空购物车
# v-show
通过给元素设置行内样式的 display 属性来控制元素的显示与隐藏
使用场景：需要频繁切换显示/隐藏的场景。如输入框提示

当表达式为假时，v-show 不会真正在页面中移除这个元素，而是给它一个 display: none 属性，让元素在页面上不显示

v-on

用来给元素绑定自定义事件。语法：

bash 复制代码

@事件名=事件处理函数 #或 v-on:事件名=事件处理函数

eg.切换元素的显示与隐藏

html 复制代码

<div id="app">
    <button @click="toggle()">切换显示/隐藏</button>
    <h1 v-show="flag">{{ msg }}</h1>
</div>

js 复制代码

const app = new Vue({
    el: "#app",
    data: {
        flag: true,
        msg: "Hello Vue!",
    },
    methods: {
        toggle() {
            this.flag = !this.flag;
        },
    },
});

eg.小黑自动售货机

html 复制代码

<div id="app">
    <div class="box">
        <h3>小黑自动售货机</h3>
        <button @click="buy(5)">可乐5元</button>
        <button @click="buy(10)">咖啡10元</button>
        <button @click="buy(8)">牛奶8元</button>
    </div>
    <p>银行卡余额：{{ money }}元</p>
</div>

js 复制代码

const app = new Vue({
    el: "#app",
    data: {
        money: 100,
    },
    methods: {
        buy(price) {
            this.money -= price;
        },
    },
});

v-bind

用来动态设置HTML标签的属性值。语法：

bash 复制代码

:属性名="属性值" #或 v-bind:属性名="属性值"

eg.小黑学习之旅

html 复制代码

<div id="app">
    <!-- 动态绑定属性src的值，达到切换图片的目的 -->
    <img :src="list[index]" alt="" />
    <button @click="index++">下一张</button>
</div>

js 复制代码

const app = new Vue({
    el: "#app",
    data: {
        // 数组元素的索引
        // 每次点击都会改变
        index: 0,
        // 存放图片路径的数组
        list: [
            "./imgs/11-00.gif",
            "./imgs/11-01.gif",
            "./imgs/11-02.gif",
            "./imgs/11-03.gif",
            "./imgs/11-04.png",
            "./imgs/11-05.png",
        ],
    },
});

v-for

循环遍历数据中的每个元素，然后渲染出一个列表（这个数据可以是数组、对象、数字，甚至是字符串）

eg.小黑书架管理

html 复制代码

<div id="app">
    <h3>小黑的书架</h3>
    <ul>
        <!-- 给列表项添加的唯一标识，以正确渲染列表项 -->
        <li v-for="(item, index) in booksList" :key="item.id">
            <input type="checkbox" />
            <span>{{ item.name }}</span>
            <span>{{ item.author }}</span>
            <button @click="delBook(index)">删除-{{index}}</button>
        </li>
    </ul>
</div>

js 复制代码

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: {
        // 每次数据改变时，页面上对应的部分会重新渲染，所以可以直接使用索引删除
        delBook(index) {
            this.booksList.splice(index, 1);
        },
    },
});

如果不给元素动态绑定 key 属性，渲染会出问题：

v-for中的key属性

为了提高性能，Vue在渲染时会有 就地复用 行为（尝试在原地修改元素）。为了防止可能的渲染问题，通常会为元素动态绑定一个 key 属性，作为列表项的 唯一标识

只要用到 v-for，后面一定要有一个 key 属性，以防止可能的渲染问题

v-model

用于 表单元素value值 和数据的双向绑定，当数据变化时，表单视图会自动更新，反之亦然。语法：

bash 复制代码

v-model="数据" #或 v-model:value = "数据"

实际上，v-model 相当于 v-bind:value、v-on:input 的组合

Vue指令补充

指令修饰符

Vue 中修饰符的分类：

事件修饰符。如 .enter、.stop、.prevent
指令修饰符。如 .trim、.number

使用这些修饰符可以简化一些代码，快速开发

拓展：Vue指令修饰符的用法

v-bind动态绑定样式

操作元素样式有两种方式：

通过 style 属性直接操作样式

通过 class 属性间接改变样式

拓展：v-bind动态绑定样式

eg.tab栏切换

html 复制代码

<div id="app">
    <ul>
        <li
            v-for="(item,index) in list"
            :key="item.id"
            @click="activeIndex=index"
            >
            <!-- v-bind 指令是动态绑定数据，因此布尔值可以从 data 中得到 -->
            <a :class="{ active: index === activeIndex }" href="#"
               >{{item.name}}</a
                >
        </li>
    </ul>
</div>

js 复制代码

// 1.基于数据动态渲染列表
// 2.动态增删类控制样式-仅对应索引高亮
// 3.点击时改变高亮索引
const app = new Vue({
    el: "#app",
    data: {
        // 记录高亮的索引
        activeIndex: 0,
        list: [
            { id: 1, name: "京东秒杀" },
            { id: 2, name: "每日特价" },
            { id: 3, name: "品类秒杀" },
        ],
    },
});

v-model应用于其他表单元素

对于不同的表单元素，v-model 有不同的效果

eg.小黑学习网注册

html 复制代码

<div id="app">
    <h3>小黑学习网</h3>
    <!-- 注意表单元素值和数据的对应关系 -->
    <!-- 对于不同的表单元素，v-model 有不同的效果 -->
    姓名：
    <input type="text" v-model="username" />
    <br /><br />
    
    是否单身：
    <input v-model="isSingle" type="checkbox" />
    <br /><br />

    性别:
    <input v-model="gender" type="radio" name="gender" value="1" />男
    <input v-model="gender" type="radio" name="gender" value="2" />女
    <br /><br />

    <!--  select的value值，关联了选中的option的value值 -->
    所在城市:
    <select v-model="cityId">
        <option value="101">北京</option>
        <option value="102">上海</option>
        <option value="103">成都</option>
        <option value="104">南京</option>
    </select>
    <br /><br />

    自我描述：
    <textarea v-model="desc"></textarea>
    <button>立即注册</button>
</div>

js 复制代码

const app = new Vue({
    el: "#app",
    data: {
        username: "",
        isSingle: true,
        gender: "1",
        cityId: "101",
        desc: "",
    },
});