前言

一、内容绑定，事件绑定

1. v-text 指令

2. v-html 指令

3. v-on 基础

4.计数器案例

二、显示切换，属性绑定

1. v-show 指令

2. v-if 指令

3. v-bind 指令

4.图片切换案例

三、列表循环，表单元素绑定

1. v-for 指令

2. v-on 补充

3. v-model 指令

四、小黑记事本（综合案例）

1.“新增”功能

2.“删除”功能

3.“统计”功能

4.“清空”功能

5.“隐藏”功能

6.综合案例代码及结果显示

前言

学习了vue基础，已经可以把一个基本的项目跑起来，本章开始学习本地应用，本章核心是用vue开发网页效果，效果不同于早期基于Dom元素的外部开发（获取元素，操纵他们）。在vue中，我们使用的是一系列v-开头的特殊语法来干这件事儿，比如1.v-text，v-html，v-on基础。2.v-show，v-if，v-bind。3.v-for，v-on补充，v-model，他们有一个统称叫做“Vue指令”。
为了巩固语法的学习，穿插三个案例，阶段性的巩固所学的知识，根据案例中所涉及的知识点把他们分为三个部分——1.内容绑定，事件绑定。2.显示切换，属性绑定。3.列表循环，表单元素绑定。
总结本章内容——1.核心是通过vue实现常见的网页效果。2.学习Vue指令，以案例巩固所学的知识点。3.Vue指令，指的是以v-开头的一组特殊语法。

一、内容绑定，事件绑定

1. v-text 指令

v-text的作用：设置标签的内容 /设置文本
默认的写法，替换全部内容。使用插值表达式{{}}，可以替换指定内容
内部支持写表达式
案例代码及结果

<!DOCTYPE html>
<html >

<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>v-text指令</title>
</head>

<body>
    <div id="app">
        <h2>深圳</h2>
        <h2 v-text="message+'!'">深圳</h2>
        <h2 v-text="info+'?'">深圳</h2>
        <h2>{{message}}深圳</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "程序员",
                info: "前端"
            }
        })
    </script>
</body>

</html>

（二）Vue本地应用——快速入门Vue前言一、内容绑定，事件绑定二、显示切换，属性绑定三、列表循环，表单元素绑定四、小黑记事本（综合案例）

2. v-html 指令

v-html的作用：设置元素的innerHTML
内容中有html结构会被解析为标签，若内容是文本则与v-text无区别
与v-text差异：v-text无论内容是什么都只会解析为文本
解析文本使用v-text，解析html使用v-html
案例代码及结果

<!DOCTYPE html>
<html >

<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>v-html指令</title>
</head>

<body>
    <div id="app">
        <!-- v-html指令，解析为html -->
        <h2 v-html="content"></h2>
        <!-- v-text指令,只解析为文本内容 -->
        <h2 v-text="content">深圳</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                content: "<a href='https://www.csdn.net'>csdn首页</a>",
            }
        })
    </script>
</body>

</html>

（二）Vue本地应用——快速入门Vue前言一、内容绑定，事件绑定二、显示切换，属性绑定三、列表循环，表单元素绑定四、小黑记事本（综合案例）

3. v-on 基础

v-on的作用：为元素绑定事件
事件名不需要写on：v-on:click
指令可以简写为@：@click
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据
案例代码及结果

<!DOCTYPE html>
<html >

<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>v-on指令基础</title>
</head>

<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <!-- 用 @符号代替"v-on:" -->
        <input type="button" value="v-on指令简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
        <!-- 方法内部通过this关键字可以访问定义在data中的数据 -->
        <h2 @click="changeSubject">{{subject}}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                subject: "数学"
            },
            methods: {
                doIt: function () {
                    alert("做程序员！！！");
                },
                changeSubject: function () {
                    this.subject += "不是语文！"
                }
            },
        })
    </script>
</body>

</html>

（二）Vue本地应用——快速入门Vue前言一、内容绑定，事件绑定二、显示切换，属性绑定三、列表循环，表单元素绑定四、小黑记事本（综合案例）

4.计数器案例

设置思路

data 中定义数据：num
methods 中添加两个方法：add（递增），sub（递减）
使用 v-text t将 num 设置给 span 标签
使用v-on将 add 和 sub 分别绑定给 +，- 按钮
累加的逻辑：小于10进行累加，否则提示
递减的逻辑：大于0进行递减，否则提示

涉及知识

创建Vue实例时：el（挂载点），data（数据），methods（方法）
v-on 指令作用是绑定事件，简写为@
方法中通过 this 关键字获取data中的数据
v-text 指令作用：设置元素的文本值，简写为{{}}
v-html 指令作用：设置元素的 innerHTML

案例代码

<!DOCTYPE html>
<html >

<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>计算器案例</title>
</head>

<body>
    <div id="app">
        <div class="input-num">
            <button @click="sub">
                -
            </button>
            <span>{{num}}</span>
            <button @click="add">
                +
            </button>
        </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                num: 0
            },
            methods: {
                add: function () {
                    //console.log('add')
                    if (this.num < 10) {
                        this.num++;
                    } else {
                        alert("别点啦，不能再加啦！")
                    }

                },
                sub: function () {
                    //console.log('sub')
                    if (this.num > 0) {
                        this.num--;
                    } else {
                        alert("别点啦，不能再减啦！")
                    }

                }
            },
        })
    </script>
</body>

</html>

结果展示

（二）Vue本地应用——快速入门Vue前言一、内容绑定，事件绑定二、显示切换，属性绑定三、列表循环，表单元素绑定四、小黑记事本（综合案例）

二、显示切换，属性绑定

1. v-show 指令

v-show作用：根据真假切换元素的显示或隐藏状态，如广告等
原理：修改元素的 display，实现显示隐藏状态（操纵样式）
指令后面的内容，最终都会解析为boolean值
值为ture时元素显示。值为false时元素隐藏
数据改变之后，对应元素的显示状态会同步更新
案例代码及结果

<!DOCTYPE html>
<html >

<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>v-show指令</title>
</head>

<body>
    <div id="app">
        <input type="button" value="按此按钮，切换图片显示状态" @click="changShow">
        <img src="./image.jpg" v-show="isShow" alt="图片">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false
            },
            methods: {
                changShow: function () {
                    this.isShow = !this.isShow;
                }
            },
        })
    </script>
</body>

</html>

（二）Vue本地应用——快速入门Vue前言一、内容绑定，事件绑定二、显示切换，属性绑定三、列表循环，表单元素绑定四、小黑记事本（综合案例）

2. v-if 指令

v-if 作用：根据表达式的真假切换元素的显示或隐藏状态
本质：通过操作dom元素来切换显示状态（操纵元素）。v-show的标签至始至终都在，被改变的只是它的display属性；v-if 的标签则直接被移除了
表达式的值为ture，元素存在于dom树中；表达式的值为false，元素从dom树中移除
频繁的切换使用v-show，否则使用v-if，前者的切换消耗小
案例代码及结果

<!DOCTYPE html>
<html >

<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>v-if指令</title>
</head>

<body>
    <div id="app">
        <input type="button" value="按此按钮，切换显示状态" @click="changShow">
        <p v-if="isShow">程序员</p>
        <p v-show="isShow">程序员，v-show修饰</p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false
            },
            methods: {
                changShow: function () {
                    this.isShow = !this.isShow;
                }
            },
        })
    </script>
</body>

</html>

（二）Vue本地应用——快速入门Vue前言一、内容绑定，事件绑定二、显示切换，属性绑定三、列表循环，表单元素绑定四、小黑记事本（综合案例）

3. v-bind 指令

v-bind作用：为元素绑定属性(属性如src，title，class，都写在元素的内部)
完整写法—— v-bind:属性名
简写直接省略v-bind—— :属性名
若需要动态地增删class，建议使用对象的方式
案例代码及结果

<!DOCTYPE html>
<html >

<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>v-bind指令</title>
    <style>
        .active {
            border: 5px solid palegreen;
        }
    </style>
</head>

<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <!-- 简写方式,只需要一个冒号代替；title是鼠标悬浮显示的图片名称-->
        <!-- :class的写法 -->
        <img :src="imgSrc" alt="" :title="imgTitle+'！'" :class="isActive?'active':''" @click="toggleActive">
        <br>
        <!-- :class的推荐写法 -->
        <!-- 建议使用对象的方式来写，{active:isActive} -->
        <img :src="imgSrc" alt="" :class="{active:isActive}" @click="toggleActive">
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: "https://img-home.csdnimg.cn/images/20201124032511.png",
                imgTitle: "程序员社区",
                isActive: false
            },
            methods: {
                toggleActive: function () {
                    this.isActive = !this.isActive;
                }
            },
        })
    </script>
</body>

</html>

（二）Vue本地应用——快速入门Vue前言一、内容绑定，事件绑定二、显示切换，属性绑定三、列表循环，表单元素绑定四、小黑记事本（综合案例）

4.图片切换案例

设置思路

定义图片数组：保存多张图片
添加图片索引：方便判断是否为第一张或最后一张
绑定src属性(被更改)：显示图片的内容更改，使用 v-bind 指令
图片切换逻辑：图片切换按钮的事件绑定，使用 v-on 指令
显示状态切换：对到达第一张和最后一张时的按钮进行隐藏，v-if 或 v-show，考虑到切换频繁，使用 v-show 指令

涉及知识

列表数据使用数组保存
v-bind 指令可以设置元素属性，比如 src
v-on 指令对切换事件进行绑定
v-show 和 v-if 都可以切换元素的显示状态，频繁切换使用v-show

案例代码

<!DOCTYPE html>
<html >

<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>图片切换案例</title>

</head>

<body>
    <div id="mask">
        <div class="center">
            <!-- v-bind指令简写方式 -->
            <img :src="imgArr[index]" style="width: 500px; height: 300px;" />
            <!-- 左箭头 -->
            <!-- v-show指令隐藏第一张的左箭头；点击事件@click -->
            <a href="javascript:void(0)" target="_blank" rel="external nofollow"  v-show="index!=0" @click="prev" class="left">
                <img src="./images/Left.png" style="width: 50px; height: 50px;" />
            </a>
            <!-- 右箭头 -->
            <!-- v-show指令隐藏最后一张的右箭头；点击事件@click -->
            <a href=" javascript:void(0)" target="_blank" rel="external nofollow"  v-show="index<imgArr.length-1" @click="next" class="right">
                <img src="./images/Right.png" style="width: 50px; height: 50px;" />
            </a>
        </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#mask",
            data: {
                imgArr: [
                    "./images/01.jpg",
                    "./images/02.jpg",
                    "./images/03.jpg",
                    "./images/04.jpg",
                ],
                index: 0
            },
            methods: {
                prev: function () {
                    this.index--;
                },
                next: function () {
                    this.index++;
                }
            }

        })
    </script>
</body>

</html>

结果展示

（二）Vue本地应用——快速入门Vue前言一、内容绑定，事件绑定二、显示切换，属性绑定三、列表循环，表单元素绑定四、小黑记事本（综合案例）

三、列表循环，表单元素绑定

1. v-for 指令

v-for作用：根据数据生成列表结构
v-for经常和数据结合使用
基础语法是（item，index）in 数据。item 代表数组中的每一项，index代表索引，item 和index 可以根据喜好自行修改但与使用时要对应，in固定不可以修改。（item, index）in arr；item in arr。
intem 和 index 可以结合其他指令一起使用，通过 item 和 ndex 可以获取每一项的值和数组下标
案例代码及结果

<!DOCTYPE html>
<html >

<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>v-for指令</title>
</head>

<body>
    <div id="app">
        <input type="button" value="添加" @click="add">
        <input type="button" value="移除" @click="remove">
        <ul>
            <li v-for="(item,index) in arr">
                {{index+1}}某某：{{item}}
            </li>
        </ul>
        <!-- 对于对象数组，直接使用item,内容会全部显示 -->
        <p v-for="item in student">
            {{item}}
        </p>
        <!-- 使用item.name，就只显示数组的内容 -->
        <p v-for="item in student">
            {{item.name}}
        </p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr: ["Hello! How are you", "I'm fine"],
                // 对象数组
                student: [
                    { name: "张三" },
                    { name: "李四" },
                    { name: "小红" }
                ]
            },
            methods: {
                add: function () {
                    // 添加数据用push()
                    this.student.push({ name: "委员" });
                },
                // 移除用shift()，移除的是数组最左边的数据
                remove: function () {
                    this.student.shift();
                }
            },

        })
    </script>
</body>

</html>

（二）Vue本地应用——快速入门Vue前言一、内容绑定，事件绑定二、显示切换，属性绑定三、列表循环，表单元素绑定四、小黑记事本（综合案例）

2. v-on 补充

事件绑定的方法写出调用函数的形式，可以传入自定义的参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上 .修饰符，可以对事件进行限制
.enter 可以限制触发的按键为回车
事件修饰符有多种，这里只介绍了一种
案例代码及结果

<!DOCTYPE html>
<html >

<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>v-onn补充</title>
</head>

<body>
    <div id="app">
        <!-- v-on的基础 -->
        <input type="button" value="点击事件" @click="sayHa" />
        <!-- 点击事件的补充，传参 -->
        <input type="button" value="点击事件补充" @click="sayHa('老铁',666)">
        <!-- v-on后接 .修饰符，对事件进行限制 -->
        <input type="text" @keyup.enter="sayHi" />
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                // 形式参数
                sayHa: function (p1, p2) {
                    console.log("哈哈");
                    console.log(p1);
                    console.log(p2);
                },
                sayHi: function () {
                    alert("Hi~");
                }
            },
        })
    </script>
</body>

</html>

（二）Vue本地应用——快速入门Vue前言一、内容绑定，事件绑定二、显示切换，属性绑定三、列表循环，表单元素绑定四、小黑记事本（综合案例）

3. v-model 指令

v-model作用：便捷地设置和获取表单元素的值
绑定的数据会和表单元素的值相关联
绑定的数据和表单元素的值是双向绑定的
案例代码及结果

<!DOCTYPE html>
<html >

<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>v-model指令</title>
</head>

<body>
    <div id="app">
        <!-- 点击按钮进行获取和修改表单元素的值 -->
        <input type="button" value="修改message" @click="setMessage">
        <!-- v-model获取表单元素的值 -->
        <input type="text" v-model="message" @keyup.enter="getMessage">
        <p>{{message}}</p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "大学老师"
            },
            methods: {
                getMessage: function () {
                    // 弹出框提示内容为message的值
                    alert(this.message);
                },
                // 修改表单元素的函数
                setMessage: function () {
                    this.message = "小学老师";
                }
            },
        })
    </script>
</body>

</html>

（二）Vue本地应用——快速入门Vue前言一、内容绑定，事件绑定二、显示切换，属性绑定三、列表循环，表单元素绑定四、小黑记事本（综合案例）

四、小黑记事本（综合案例）

列表结构可以通过v-for指令结合数据生成
v-on结合事件修饰符可以对事件进行限制，比如 .enter
v-on在绑定事件是可以传递自定义参数
通过v-model可以快速地设置和获取表单元素的值
基于数据的开发方式

1.“新增”功能

生成列表结构（v-for 指令，数组）
获取用户输入（v-model 指令）双向绑定数据
回车，新增数据（v-on 指令 .enter 事件修饰符）
可以通过开发者工具审查元素，快速定位

2.“删除”功能

点击删除指定内容（v-on 指令； splice；索引）
数据改变，和数据绑定的元素会同步改变
事件可以接收自定义参数
splice 作用：根据索引删除对应的数组元素

3.“统计”功能

统计信息个数（v-text 指令；length）
基于数据的开发方式，所有和数据相关的事件只需找到对应数据就可以。如：”统计"和数组的length对应

4.“清空”功能

点击清楚所有信息（v-on）
基于数据的开发方式

5.“隐藏”功能

没有数据时，隐藏底部的显示状态（v-show 指令，v-if 指令，数组非空）

6.综合案例代码及结果显示

<!DOCTYPE html>
<html >

<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>小黑记事本</title>
</head>

<body>
    <div id="todoapp">
        <!-- 输入框 -->
        <header class="header" style="background-color: wheat;">
            <h2>小黑记事本</h2>
            <!-- v-model指令，表单元素的值 -->
            <input style="background-color: rgb(212, 216, 216);" v-model="inputValue" @keyup.enter="add"
                autofocus="autofocus" autocomplete="off" placeholder="请输入...">
        </header>
        <!-- 列表区域 -->
        <section class="main" style="background-color: wheat;">
            <ul class="todo-list">
                <!-- v-for指令，列表结构 -->
                <li class="todo" v-for="(item,index,length) in list">
                    <div class="view">
                        <span class="index">{{index+1}}.</span>
                        <label>{{item}}</label>
                        <button class="destroy" @click="remove(index)">delete</button>
                    </div>
                </li>
            </ul>
        </section>
        <!-- 统计和清空区域 -->
        <div class="footer" style="background-color: wheat;">
            <!-- v-if指令，显示/隐藏状态 -->
            <span class="todo-count" v-if="list.length!=0">
                <strong>{{list.length}}</strong>
                (记事本条数)
            </span>
            <button class="clear-completed" @click="clear">
                Clear
            </button>
        </div>
    </div>


    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#todoapp",
            data: {
                list: ["写代码", "睡觉觉", "吃饭饭"],
                inputValue: ""
            },
            methods: {
                add: function () {
                    this.list.push(this.inputValue)
                },
                // 删除条目，数量为1个
                remove: function (index) {
                    this.list.splice(index, 1);
                },
                // 直接将数组清空
                clear: function () {
                    this.list = [];
                }
            }
        })
    </script>
</body>

</html>

（二）Vue本地应用——快速入门Vue前言一、内容绑定，事件绑定二、显示切换，属性绑定三、列表循环，表单元素绑定四、小黑记事本（综合案例）

（二）Vue本地应用——快速入门Vue前言一、内容绑定，事件绑定二、显示切换，属性绑定三、列表循环，表单元素绑定四、小黑记事本（综合案例）

前言

一、内容绑定，事件绑定

1. v-text 指令

2. v-html 指令

3. v-on 基础

4.计数器案例

设置思路

涉及知识

案例代码

结果展示

二、显示切换，属性绑定

1. v-show 指令

2. v-if 指令

3. v-bind 指令

4.图片切换案例

设置思路

涉及知识

案例代码

结果展示

三、列表循环，表单元素绑定

1. v-for 指令

2. v-on 补充

3. v-model 指令

四、小黑记事本（综合案例）

1.“新增”功能

2.“删除”功能

3.“统计”功能

4.“清空”功能

5.“隐藏”功能

6.综合案例代码及结果显示

继续阅读