（二）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.综合案例代码及结果显示

---

前言

1. 学习了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指令”。
2. 为了巩固语法的学习，穿插三个案例，阶段性的巩固所学的知识，根据案例中所涉及的知识点把他们分为三个部分——1.内容绑定，事件绑定。2.显示切换，属性绑定。3.列表循环，表单元素绑定。
3. 总结本章内容——1.核心是通过vue实现常见的网页效果。2.学习Vue指令，以案例巩固所学的知识点。3.Vue指令，指的是以v-开头的一组特殊语法。

---

一、内容绑定，事件绑定

1. v-text 指令

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

    
    
    
    



    

        
深圳
        
深圳
        
深圳
        
{
  {message}}深圳
    
    
    
    

2. v-html 指令

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

    
    
    
    



    

        
        

        
        
深圳