Vue及其指令（Vue笔记一）

木木云1

已于 2023-11-18 21:58:29 修改

阅读量316

点赞数 6

文章标签： vue.js 前端前端框架

于 2023-11-18 21:45:35 首次发布

本文链接：https://blog.csdn.net/into1yyds/article/details/134474057

版权

一、Vue快速上手

1、Vue的概念

1.1 概念

Vue是一个用于构建用户界面（基于数据动态渲染页面）的渐进式框架。

1.2 Vue的两种使用方式

（1）Vue核心包开发——运用场景：局部模块改造。

（2）Vue核心包&Vue插件&工程化开发——运用场景：整站开发。

2、创建Vue实例，初始化渲染

2.1 核心步骤

2.1.1 引包

（1）第一步：进入Vue2官网：https://v2.cn.vuejs.org/，点击“起步”。

（2）第二步：点击“安装”。

（3）第三步：

方法一：下载开发版本（注意不要下载生产版本）

引入的代码：（注意路径）

<script src="vue.js"></script>

方法二：使用在线链接（注意也是用开发版本，即下方画线的）

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

2.2 实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-创建一个Vue实例</title>
</head>

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

    <!-- box、box2不会被Vue解析渲染，因为已经通过el指定了渲染的盒子为#app -->
    <div class="box2">
        box2 -- {{ count }}
    </div>
    <div class="box">
        box -- {{ msg }}
    </div>
    -----------------------------------------------------

    <div id="app">
        <!-- 这里将来会编写一些用于渲染的代码逻辑 -->
        {{ msg }}
        <!-- 这里使用的是插值表达式，文章后面有详细解释 -->
        <a href="#">{{ count }}</a>
    </div>

    <!-- 引入的是开发版本包——包含完整的注释和警告 -->
    <!-- <script src="vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
        // 一旦引入VueJS核心包，在全局环境，就有了Vue构造函数
        const app = new Vue({
            // 通过el配置选择器，指定Vue管理的是哪个盒子(渲染的是哪个容器)
            el: '#app',
            // 通过data提供数据
            data: {
                msg: '林昀儒',
                count: 1
            }
        })
    </script>
</body>

</html>

运行结果：

3、插值表达式{{ }}

插值表达式是一种Vue的模版语法。

3.1 作用

利用表达式进行插值，把数据渲染到页面中。

表达式：是可以被求值的代码，JS引擎会将其计算出一个结果，如下图。

3.2 语法

3.3 注意点

（1）使用的数据必须存在（data）——如果没有声明直接使用，会报错。

（2）支持的是表达式，而非语句，比如if，for…

（3）不能在标签属性中使用{{ }}插值

3.4 具体使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-插值表达式</title>
</head>

<body>
    <div id="app">
        <!-- 插值表达式 -->
        <!-- tony -->
        <p>{{ nickname }}</p>
        <!-- 转大写——TONY -->
        <p>{{ nickname.toUpperCase() }}</p>
        <!-- 拼接字符串 -->
        <p>{{ nickname + '你好'}}</p>

        <p>{{ age >= 18 ? '成年' : '未成年' }}</p>
        <p>{{ friend.name }}</p>
        <p>{{ friend.desc }}</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                nickname: 'tony',
                age: 18,
                friend: {
                    name: 'jepson',
                    desc: '热爱学习 '
                }
            }
        })
    </script>
</body>

</html>

运行结果：

4、Vue核心特性：响应式

数据的响应式处理 → 响应式：数据变化，视图自动更新。

使用Vue开发，关注业务的核心逻辑，根据业务修改数据即可。

4.1 如何访问或者修改数据？

（data中的数据，最终会被添加到实例上）

（1）访问数据：“实例.属性名”

（2）修改数据：“实例.属性名” = “值”

4.2 具体使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03-响应式</title>
</head>

<body>
    <div id="app">
        {{ msg }}
        {{ count }}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                // data里面提供的msg，其实已经是响应式的数据了 -> 数据变化了，视图自动更新
                msg: '林昀儒',
                count: 1
            }
        })
    </script>
</body>

</html>

在浏览器的控制台中操作。

（1）访问数据：“实例.属性名”

（2）修改数据：“实例.属性名” = “值”(数据变化，视图自动更新)

5、安装Vue开发者工具：装插件调试Vue应用

5.1 下载安装

通过谷歌应用商店安装（国外网站）
极简插件下载（推荐） https://chrome.zzzmh.cn/index

（1）下载

打开极简插件网站 https://chrome.zzzmh.cn/index ——> 搜索“Vue” ——> 选择‘Vue Devtools’

点击‘推荐下载’

解压下载的压缩包

（2）开发者模式

点击浏览器右上角（看下图）——> 点击‘扩展’选项

点击管理扩展

打开开发人员模式

（3）拖拽安装

将下载的文件夹中nhdogjmejiglipccpnnnanhbledajbpd_6.5.1_chrome.zzzmh.cn.crx文件拖拽至浏览器页面，完成安装

（4）插件详情允许访问文件

点击“详情信息”

勾选“允许访问文件URL”

（5）关闭浏览器，重新打开Vue运行的页面，在空白处单击右键，点击”检查“。

出现‘Vue’栏说明安装成功。

5.2 使用

点击‘<Root>’，可以查看数据

可以直接修改数据，并且视图自动更新（响应式特性）

相对于控制台调试更加方便。

二、Vue中的常用指令

概念：指令（Directives）是 Vue 提供的带有v- 前缀的特殊标签属性，如下

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

vue 中的指令按照不同的用途可以分为如下 6 大类：

内容渲染指令（v-html、v-text）
条件渲染指令（v-show、v-if、v-else、v-else-if）
事件绑定指令（v-on）
属性绑定指令（v-bind）
双向绑定指令（v-model）
列表渲染指令（v-for）

具体的指令及其解释可以在官网中查看：API — Vue.js (vuejs.org)

1、v-text和v-html

1.1 v-text（类似innerText）

1.2.1 语法

v-text = “表达式”

`<p v-text="uname">hello</p>`

意思是将 uame 值渲染到 p 标签中，类似 innerText，使用该语法，会覆盖 p 标签原有内容。

1.2 v-html（类似 innerHTML）

1.2.1 作用

动态解析标签。

1.2.2 语法

v-html = “表达式”

<p v-html="intro">hello</p>

意思是将 intro 值渲染到 p 标签中，

类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

1.2.3 实例

将<a>动态的解析到页面中

（下面代码是错误案例）

运行结果：

出现问题：并没有正确解析，而是以纯文本的形式展示在页面中。

1.2.3.1 正确案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-Vue指令体验</title>
</head>

<body>
    <div id="app">
        <div v-html="msg"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg:
                    `
                    <a href="https://baidu.com">百度</a>
                `
                // 用其他标签同样也可以，如h3等
                /* msg:
                    `
                <h3>baidu<h3>
                ` */
            }
        })
    </script>
</body>

</html>

运行结果：链接正确显示，并且可以跳转

当前<a>真真切切地被解析在了页面当中。

2.v-show和v-if

2.1 v-show

2.1.1 作用

控制元素显示隐藏

2.1.2 语法

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

<div v-show="flag" class="box">我是v-show控制的盒子</div>

2.1.3 原理

切换 css 的 display:none 来控制显示隐藏。

2.1.4 使用场景

频繁切换显示隐藏的场景,如下拉菜单

2.2 v-if

2.2.1 作用

控制元素显示隐藏（条件渲染）

2.2.2 语法

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

<div v-if="flag" class="box">我是v-if控制的盒子</div>

2.1.3 原理

基于条件判断，是否创建或移除元素节点

2.1.4 使用场景

要么显示，要么隐藏，不频繁切换的场景，如广告

当flag：true时，两个盒子都显示。

2.3 实例

<!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">
    <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="flag" class="box">我是v-show控制的盒子</div>
        <div v-if="flag" class="box">我是v-if控制的盒子</div>
    </div>

    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                // 隐藏
                flag: false
                /* 显示
                flag: true */

            }
        })
    </script>

</body>

</html>

当flag：false时，两个盒子都显示。

当flag：false时，两个盒子都隐藏。

3、v-else和v-else-if

3.1 作用

辅助v-if进行判断渲染（多条件判断）

3.2 语法

v-else v-else-if="表达式"

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

3.3 注意

需要紧接着v-if使用，不能单独使用

3.4 实例

<!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">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <p v-if="gender === 1">性别：♂ 男</p>
        <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 >= 600">成绩评定C：奖励零食礼包</p>
        <p v-else>成绩评定D：惩罚一周不能玩手机</p>
    </div>

    <script src="vue.js"></script>
    <script>

        const app = new Vue({
            el: '#app',
            data: {
                /* 显示性别为男
                gender: 1 */
                // 显示性别为女
                gender: 2,
                /* B
                score: 80 */
                // A
                score: 90
            }
        })
    </script>

</body>

</html>

运行结果：

4、v-on

4.1 作用

注册事件 = 添加监听 + 提供处理逻辑

4.2 语法

（1）v-on：事件名 = “内联语句”（适用于一些逻辑简单的场景）

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

（2）v-on：事件名 “methods中的函数名”（当逻辑代码量多时，应当使用该方法）

<button @click="fn">切换显示隐藏</button>

简写：@事件名

<button @click="count--">-</button>

4.3 注意

（1）事件处理函数应该写到一个跟data同级的配置项（methods）中

（2）methods中的函数内部的this都指向Vue实例

<script>
        const app2 = new Vue({
            el: '#app',
            data: {
                // 提供数据
                isShow: true
            },
            methods: {
                // 提供处理逻辑函数
                fn() {
                    /* // 不能直接用到isShow
                    app2.isShow = !app2.isShow; */
                    // 为提高代码可维护性，让提供的所有methods中的函数，this都指向当前实例
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>

4.4 实例

4.4.1 v-on：事件名 = “内联语句”

<!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">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 鼠标点击 -->
        <!-- <button v-on:click="count--">-</button> -->
        <!-- v-on：可简写为@ -->
        <button @click="count--">-</button>
        <span>{{ count }}</span>
        <button v-on:click="count++">+</button>
        <!-- <button v-on:click="count = count + 2">+</button> -->

        <!-- 鼠标划入 -->
        <!-- <button v-on:mouseenter="count--">-</button>
        <span>{{ count }}</span>
        <button v-on:mouseenter="count++">+</button> -->
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                count: 100
            }
        })
    </script>
</body>

</html>

4.4.2 v-on：事件名 “methods中的函数名”

<!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">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="fn">切换显示隐藏</button>
        <h1 v-show="isShow">林昀儒</h1>
    </div>
    <script src="vue.js"></script>
    <script>
        const app2 = new Vue({
            el: '#app',
            data: {
                // 提供数据
                isShow: true
            },
            methods: {
                // 提供处理逻辑函数
                fn() {
                    /* // 不能直接用到isShow
                    app2.isShow = !app2.isShow; */
                    // 为提高代码可维护性，让提供的所有methods中的函数，this都指向当前实例
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>

</html>

4.5 v-on调用传参

4.5.1 语法

<button @click="buy(参数1,参数2)">按钮</button>

4.5.2 注意

如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象
如果传递了参数，则实参 `$event` 表示事件对象，固定用法。

4.5.3 实例

<!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">
    <title>Document</title>
    <style>
        .box {
            border: 3px solid #000000;
            border-radius: 10px;
            padding: 20px;
            margin: 20px;
            width: 200px;
        }

        h3 {
            margin: 10px 0 20px 0;
        }

        p {
            margin: 20px;
        }
    </style>
</head>

<body>

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

    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                money: 1000
            },
            methods: {
                buy(price) {
                    this.money -= price;
                }
            }
        })
    </script>
</body>

</html>

5、v-bind

5.1 作用

动态设置html的标签属性比如：src、url、title

5.2 语法

v-bind:属性名=“表达式”

<img v-bind:src="imgUrl" v-bind:title="msg">

简写:

:属性名=“表达式”

<img :src="imgUrl" :title="msg">

5.3 实例

<!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">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- <img v-bind:src="imgUrl" v-bind:title="msg"> -->
        <!-- v-bind:src 简写为 :src -->
        <img :src="imgUrl" :title="msg">
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                imgUrl: 'imgs/10-01.png',
                msg: '黑马'
            }
        })

    </script>
</body>

</html>

6、图片切换案例-波仔学习之旅

需求：默认展示数组中的第一张图片，点击上一页或者下一页来回切换数组中的图片

6.1 实现思路

（1）数组存储图片路径['url1','url2','url3'，...]

（2）可以准备个下标index 去数组中取图片地址。

（3）通过v-bind给src绑定当前的图片地址

（4）点击上一页下一页只需要修改下标的值即可

（5）当展示第一张的时候，上一页按钮应该隐藏。展示最后一张的时候，下一页按钮应该隐藏

6.2 代码实现

<!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">
    <title>11-图片切换案例-波仔学习之旅</title>
</head>

<body>
    <div id="app">
        <button v-show="index > 0" @click="index--">上一页</button>
        <div>
            <img :src="list[index]" alt="">
        </div>
        <button v-show="index < list.length-1" @click="index++">下一页</button>
    </div>
    <script src="vue.js"></script>
    <script>
        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',
                ]
            }
        })
    </script>
</body>

</html>

7、v-for

7.1 作用

基于数据循环，多次渲染整个元素。可以遍历数组、对象和数字等。

7.2 语法

v-for=“(item, index) in arr”

省略index：v-for= “item in arr”

item 是数组中的每一项
index 是每一项的索引，不需要可以省略
arr 是被遍历的数组

<div id="app">
        <h3>小黑水果店</h3>
        <ul>
            <li v-for="(item,index) in list">
                {{item}} - {{index}}
            </li>
        </ul>
        <ul>
            <!-- index如果不需要可以去掉 -->
            <li v-for="item in list">
                {{item}}
            </li>
        </ul>
</div>

//遍历对象
<div v-for="(value, key, index) in object">{{value}}</div>
value:对象中的值
key:对象中的键
index:遍历索引从0开始

//遍历数字
<p v-for="item in 10">{{item}}</p>
item从1 开始

7.3 实例

<!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">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <h3>小黑水果店</h3>
        <ul>
            <li v-for="(item,index) in list">
                {{item}} - {{index}}
            </li>
        </ul>
        <ul>
            <!-- index如果不需要可以去掉 -->
            <li v-for="item in list">
                {{item}}
            </li>
        </ul>
    </div>

    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                list: ['西瓜', '苹果', '鸭梨', '榴莲']
            }
        })
    </script>
</body>

</html>

7.4 图书管理案例-小黑的书架

7.4.1 需求

（1）根据左侧数据渲染出右侧列表（v-for）

（2）点击删除按钮时，应该把当前行从列表中删除（获取当前行的id，利用filter进行过滤）

7.4.2 代码实现

<!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">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <h3>小黑的书架</h3>
        <ul>
            <!-- :key="item.id"文章后面有解释 -->
            <li v-for="(item,index) in booksList" :key="item.id">
                <span>{{item.name}}</span>
                <span>{{item.author}}</span>
                <!-- 注册点击事件 ——> 通过id进行删除数组中的对应项 -->
                <!-- 有id用id来删，不用index，因为id是唯一标识 -->
                <button @click="del(item.id)">删除</button>
            </li>
        </ul>
    </div>
    <script src="vue.js"></script>
    <script>
        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) {
                    // 通过id进行删除数组中的对应项 ——> filter(不会改变原数组)
                    // filter:根据条件，保留满足条件的对应，得到一个新数组
                    this.booksList = this.booksList.filter(item => item.id != id);
                }
            }
        })
    </script>
</body>

</html>

7.5 v-for中的key

7.5.1 语法

key属性="唯一标识"

<li v-for="(item,index) in booksList" :key="item.id">

7.5.2 作用

给列表项添加的唯一标识。便于Vue正确地识别列表的每一项，进行列表项的正确排序复用。

7.5.3 为什么加key

（1）当加上 :key="item.id" 时

给第一个<li>添加背景颜色

删除第一个书本信息，书本信息和背景颜色都没了，也就是第一个<li>被删除

（2）当不加 :key="item.id" 时

删除第一个书本信息，书本信息没了，但背景颜色还在，也就是第一个<li>并没有被删除，只是文字发生了改变。（实际上是把最后一个<li>删除了，并将文字整体上移）

v-for 的默认行为会尝试原地修改元素（就地复用）——只有三组信息，但有4个<li>，会选择前3个<li>使用。

7.5.4 注意

（1）key 的值只能是字符串或数字类型

（2）key 的值必须具有唯一性

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

8、v-model

8.1 作用

给表单元素（input、radio、select）使用，双向绑定数据，可以快速获取或设置表单元素内容。

（1）数据变化 ——> 视图自动更新

（2）视图变化 ——> 数据自动更新

8.2 语法

v-model="变量"

8.3 实例

需求：使用双向绑定实现以下需求

（1）点击登录按钮获取表单中的内容

（2）点击重置按钮清空表单中的内容

<!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">
  <title>Document</title>
</head>

<body>

  <div id="app">
    <!-- v-model 可以让数据和视图形成双向数据绑定 -->
    账户：<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="vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        password: ''
      },
      methods: {
        // 可以快速获取表单元素内容
        login() {
          console.log(this.username, this.password);
        },
        // 可以快速设置表单元素内容
        reset() {
          this.username = '';
          this.password = '';
        }
      }
    })
  </script>
</body>

</html>

三、综合案例-小黑记事本

1、功能需求

（1）列表渲染

<!-- 列表渲染 -->
<!-- HTML部分 -->
<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>
        <!-- 删除功能 -->
        <button class="destroy" @click="del(item.id)"></button>
    </div>
</li>

<!-- JS部分 -->
data: {
     list: [
          { id: 1, name: '吃饭' },
          { id: 2, name: '睡觉' }
     ]
}

（2）删除功能（v-on调用传参，filter过滤，覆盖修改原数组）

<!-- 删除功能 -->
<!-- HTML部分 -->
<button class="destroy" @click="del(item.id)"></button>

<!-- JS部分 -->
methods: {
    del(id) {
        this.list = this.list.filter(item => item.id != id);
    }
}

（3）添加功能（v-model绑定，unshift修改原数组添加）

<!-- 添加功能
     （1）通过v-model绑定输入框，实时获取表单元素的内容
     （2）点击按钮，进行新增，往数组最前面加 unshift
 -->
<!-- HTML部分 -->
<input placeholder="请输入任务" class="new-todo" v-model="todoName" />
<button class="add" @click="add">添加任务</button>

<!-- JS部分 -->
data: {
    todoName: ''
},
methods: {
    add() {
        // trim()函数是字符串原型对象中的函数，主要作用是去掉字符串两端的空格。
        if (this.todoName.trim() === '') {
            alert('请输入任务名称');
                return
            }
            this.list.unshift({
            // id通常是后台动态生成的，前端如果需要临时性的id，可以用时间戳
            id: +new Date(),
            name: this.todoName
        })
        // 按下添加按钮后，清空输入框
        this.todoName = '';
     }
}

（4）底部统计和清空

<!-- 统计和清空 -->
<!-- 小优化：如果没有任务了，底部隐藏 -->

<!-- HTML部分 -->
<footer class="footer" v-show="list.length >0">
    <!-- 统计 -->
    <span class="todo-count">合 计:<strong> {{list.length}} </strong></span>
    <!-- 清空 -->
    <button class="clear-completed" @click="clear">
        清空任务
    </button>
</footer>

<!-- JS部分 -->
methods: {
    clear() {
    this.list = [];
    }
}

2、代码实现

HTML文件：

<!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="./css/index.css" />
    <title>记事本</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <!-- 主体区域 -->
    <section id="app">
        <!-- 输入框 -->
        <header class="header">
            <h1>小黑记事本</h1>
            <!-- 添加功能
                （1）通过v-model绑定输入框，实时获取表单元素的内容
                （2）点击按钮，进行新增，往数组最前面加 unshift
             -->
            <input placeholder="请输入任务" class="new-todo" v-model="todoName" />
            <button class="add" @click="add">添加任务</button>
        </header>
        <!-- 列表区域 -->
        <section class="main">
            <ul class="todo-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>
                        <!-- 删除功能 -->
                        <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>
            <!-- 清空 -->
            <button class="clear-completed" @click="clear">
                清空任务
            </button>
        </footer>
    </section>

    <!-- 底部 -->
    <script src="../vue.js"></script>
    <script>

        const app = new Vue({
            el: '#app',
            data: {
                todoName: '',
                list: []
            },
            methods: {
                del(id) {
                    this.list = this.list.filter(item => item.id != id);
                },
                add() {
                    // trim()函数是字符串原型对象中的函数，主要作用是去掉字符串两端的空格。
                    if (this.todoName.trim() === '') {
                        alert('请输入任务名称');
                        return
                    }
                    this.list.unshift({
                        // id通常是后台动态生成的，前端如果需要临时性的id，可以用时间戳
                        id: +new Date(),
                        name: this.todoName
                    })
                    // 按下添加按钮后，清空输入框
                    this.todoName = '';
                },
                clear() {
                    this.list = [];
                }
            }
        })
    </script>
</body>

</html>

CSS文件：

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #fff;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 100%;
  vertical-align: baseline;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.4em;
  background: #f5f5f5;
  color: #4d4d4d;
  min-width: 230px;
  max-width: 550px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
}

:focus {
  outline: 0;
}

.hidden {
  display: none;
}

#app {
  background: #fff;
  margin: 180px 0 40px 0;
  padding: 15px;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

#app .header input {
  border: 2px solid rgba(175, 47, 47, 0.8);
  border-radius: 10px;
}

#app .add {
  position: absolute;
  right: 15px;
  top: 15px;
  height: 68px;
  width: 140px;
  text-align: center;
  background-color: rgba(175, 47, 47, 0.8);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  border-radius: 0 10px 10px 0;
}

#app input::-webkit-input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}

#app input::-moz-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}

#app input::input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: gray;
}

#app h1 {
  position: absolute;
  top: -120px;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 60px;
  font-weight: 100;
  text-align: center;
  color: rgba(175, 47, 47, 0.8);
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
}

.new-todo,
.edit {
  position: relative;
  margin: 0;
  width: 100%;
  font-size: 24px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.4em;
  border: 0;
  color: inherit;
  padding: 6px;
  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.new-todo {
  padding: 16px;
  border: none;
  background: rgba(0, 0, 0, 0.003);
  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}

.main {
  position: relative;
  z-index: 2;
}

.todo-list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.todo-list li {
  position: relative;
  font-size: 24px;
  height: 60px;
  box-sizing: border-box;
  border-bottom: 1px solid #e6e6e6;
}

.todo-list li:last-child {
  border-bottom: none;
}

.todo-list .view .index {
  position: absolute;
  color: gray;
  left: 10px;
  top: 20px;
  font-size: 22px;
}

.todo-list li .toggle {
  text-align: center;
  width: 40px;
  /* auto, since non-WebKit browsers doesn't support input styling */
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  border: none;
  /* Mobile Safari */
  -webkit-appearance: none;
  appearance: none;
}

.todo-list li .toggle {
  opacity: 0;
}

.todo-list li .toggle+label {
  /*
		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
	*/
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center left;
}

.todo-list li .toggle:checked+label {
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
}

.todo-list li label {
  word-break: break-all;
  padding: 15px 15px 15px 60px;
  display: block;
  line-height: 1.2;
  transition: color 0.4s;
}

.todo-list li.completed label {
  color: #d9d9d9;
  text-decoration: line-through;
}

.todo-list li .destroy {
  display: none;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  width: 40px;
  height: 40px;
  margin: auto 0;
  font-size: 30px;
  color: #cc9a9a;
  margin-bottom: 11px;
  transition: color 0.2s ease-out;
}

.todo-list li .destroy:hover {
  color: #af5b5e;
}

.todo-list li .destroy:after {
  content: '×';
}

.todo-list li:hover .destroy {
  display: block;
}

.todo-list li .edit {
  display: none;
}

.todo-list li.editing:last-child {
  margin-bottom: -1px;
}

.footer {
  color: #777;
  padding: 10px 15px;
  height: 20px;
  text-align: center;
  border-top: 1px solid #e6e6e6;
}

.footer:before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
    0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
    0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

.todo-count {
  float: left;
  text-align: left;
}

.todo-count strong {
  font-weight: 300;
}

.filters {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  right: 0;
  left: 0;
}

.filters li {
  display: inline;
}

.filters li a {
  color: inherit;
  margin: 3px;
  padding: 3px 7px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 3px;
}

.filters li a:hover {
  border-color: rgba(175, 47, 47, 0.1);
}

.filters li a.selected {
  border-color: rgba(175, 47, 47, 0.2);
}

.clear-completed,
html .clear-completed:active {
  float: right;
  position: relative;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
}

.clear-completed:hover {
  text-decoration: underline;
}

.info {
  margin: 50px auto 0;
  color: #bfbfbf;
  font-size: 15px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  text-align: center;
}

.info p {
  line-height: 1;
}

.info a {
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}

.info a:hover {
  text-decoration: underline;
}

/*
	Hack to remove background from Mobile Safari.
	Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {

  .toggle-all,
  .todo-list li .toggle {
    background: none;
  }

  .todo-list li .toggle {
    height: 40px;
  }
}

@media (max-width: 430px) {
  .footer {
    height: 50px;
  }

  .filters {
    bottom: 10px;
  }
}