【Vue进阶】第一章——熟悉Vue常用指令：从文本插值到表单绑定

目录

内容主要包含 

1.Vue 常用指令介绍

目标

内容讲解

内容小结

2. 文本插值 v -html

目标

内容讲解

内容小结

3. 绑定属性 v-bind: 属性名或者 : 属性名 (重点)

目标

内容讲解

内容小结

4. 条件渲染 v -if

目标

内容讲解

内容小结

5. 条件渲染 v -show

目标

内容讲解

内容小结

6. 列表渲染 v-for

目标

内容讲解

内容小结

7. 事件绑定 v-on: 事件名或者 @事件名 (重点)

目标

内容讲解

内容小结

8. 表单绑定 v -model(重点) 非常重要

目标

内容讲解

内容小结

---

 

内容主要包含 

本章节将详细介绍 Vue.js 中的一些核心指令，包括文本插值、属性绑定、条件渲染、列表渲染、事件绑定和表单绑定等。通过实际的代码示例和详细的解释，帮助读者深入理解这些指令的工作原理和使用技巧，从而在实际项目中更加灵活地运用 Vue.js。

1.Vue 常用指令介绍

目标

• 理解什么是 Vue 指令
• 掌握如何使用 Vue 指令
• 能够说出常见的 Vue 指令

内容讲解

【1】Vue 指令介绍

在 vue 中指令是作用在视图中的即 html 标签，可以在视图中增加一些指令来设置 html 标签的某些属性和文本。

指令都是以带有 v- 前缀的特殊属性。

【2】使用 Vue 指令

使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。

【3】常见的 Vue 指令

 

内容小结

1. 使用 Vue 指令注意事项

1）就是 vue 中的常见指令都是必须书写在 html 标签的属性中，在属性值中书写 js 代码。

2）vue 中的指令只能使用在视图中，不能使用在脚本。

2. 文本插值 v -html

目标

• 能够使用文本插值
• 理解文本插值和插值表达式区别

内容讲解

【1】文本插值使用格式

 标签名 >

说明：文本插值 v -html 通过 data 的 key 获取 value 显示标签的文本中 

【2】需求：使用文本插值 v -html 和插值表达式 **{{}}** 获取 vue 中 data 数据

【3】步骤：

1. 在素材中找到文本插值的代码

2. 使用文本插值获取 vue 中的数据

3. 打开浏览器查看结果

【4】代码实现:

    
    
    






    
{{msg}}

    
    


    

内容小结

1. 使用文本插值，v-html 用来获取 vue 中的数据，将数据放到标签的文本中，并且解析标签。

 标签名 >

2.v-html 于 v -text 和插值表达式的区别

1.v-html 称为文本插值，属于指令，解析 html 标签

2. 插值表达式：{{data 中的 key}}, 不解析 html 标签

3.v-text：属于指令，但是不解析 html 标签 了解

3. 绑定属性 v-bind: 属性名或者 : 属性名 (重点)

目标

• 能够使用绑定属性的完整写法和简写

内容讲解

【1】绑定属性格式

 完整写法
标签名 >

简写：常用 *****
标签名 >

【2】需求：给 html 标签绑定属性

【3】步骤：

1. 在素材中找到绑定属性的代码

2. 给 html 标签绑定属性，获取 vue 的 data 值作为属性值

3. 打开浏览器查看结果

【4】代码实现:

    
    
    

    





    

        
         百度一下 


        

        
         百度一下 

        

        
         百度一下 

        

        
        
 我是 div

    

内容小结

1. 绑定属性格式：

 完整写法：标签名 >

简写：重点记忆
标签名 >

4. 条件渲染 v -if

目标

• 能够使用条件渲染 v -if

内容讲解

【1】条件渲染 v -if 格式

 满足条件显示的内容标签名 >

满足条件显示的内容标签名 >

.......
上述条件都不满足执行的内容标签名 >

【2】需求：判断 vue 中 data 的某个变量的值，对 3 取余，余数为 0 显示 div1，余数为 1 显示 div2，否则显示 div3

【3】步骤

1. 在素材中找到条件渲染的代码

2. 在 html 中获取 vue 中 data 的数据并判断，显示结果

3. 打开浏览器查看结果

【4】代码实现

  
    
    
    

  

  
    

      
      
div1

      
div2

      
      
div3



    

  

  

  

内容小结

1. 条件渲染：v-if

 如果条件表达式为 true 则执行文本内容，如果为 false 则向下继续判断标签名 >

如果条件表达式为 true 则执行文本内容，如果为 false 则向下继续判断标签名 >

....
如果上述条件都为 false 则执行该文本标签名 >

注意：v-else，这里不用书写判断条件 

5. 条件渲染 v -show

目标

• 能够使用条件渲染 v -show
• 能够说出 v -show 和 v -if 区别

内容讲解

【1】条件渲染 v -show 格式

 文本标签名 >

说明：1. 如果 data 中的 key 的值是 true，则显示标签文本内容，如果是 false 则不显示标签文本内容 

【2】需求：获取 Vue 中 data 的布尔类型数据并显示

【3】步骤：

1. 在素材中找到条件渲染的代码

2. 在 html 中获取 vue 中 data 的数据并判断，显示结果

3. 打开浏览器查看结果

【4】代码实现

    
    
    






    
    
div4


    

内容小结

1. 条件渲染 v -show

 标签名 >

2.v-show 和 v -if 区别

1.v-if：如果条件不满足，那么在页面中没有任何标签内容，直接删除

2.v-show: 如果条件不满足，是通过设置 css 样式的属性 display，设置属性值为 none 来隐藏标签，标签还在页面中，只是我们看不见

6. 列表渲染 v-for

目标

• 掌握如何使用 v -for 指令

内容讲解

【1】格式

 增强 for 循环：掌握
for(int x : arr){}

     {{x}} 使用插值表达式获取元素
标签名 >


普通 for 循环：了解

   元素:{{x}}, 索引:{{index}}
标签名 >

说明：x 和 index 属于标识符 

【2】作用：

遍历数组或者对象

【3】代码演示

    
    
    




    

        

            
            
            

                {{element}}
            

            
            
            

                {{stu}}
            

            
            
            
            

                元素:{{element}}, 索引:{{index}}
            

            
            
            

                元素:{{element}}, 索引:{{index}}
            

        

    

内容小结

1. 列表渲染主要用来遍历容器或者对象

2. 使用格式：掌握

 类似于增强 for：

  {{元素}}

说明：取出列表渲染中的元素使用插值表达式。

3. 使用格式：了解

  {{元素}}

说明：如果遍历的是对象，那么会将对象中的 key 作为索引返回。

7. 事件绑定 v-on: 事件名或者 @事件名 (重点)

目标

• 掌握 vue 视图的事件绑定

内容讲解

【1】格式

 标签名 >

简写：掌握
标签名 >

说明：1. 在 vue 中绑定的事件名都是将原生 js 的事件名去掉 on:click  blur...

【2】需求：给视图绑定事件

【3】代码实现

  
    
    
    

  


  
    

      
{{name}}


      
       以前方式_单击_改变 div 的内容 

      
       单击_改变 div 的内容 

       双击_改变 div 的内容 


       简写_改变 div 的内容 

    

  

  

  

内容小结

1.vue 的事件绑定：

xxx

简写：经常使用
xxx

2.vue 中使用的事件名是将原生 js 中的事件名中的 on 给去掉

8. 表单绑定 v -model(重点) 非常重要

目标

• 能够使用 v -model 表单绑定指令
• 能够理解 v -model 表单绑定指令的作用

内容讲解

【1】v-model 表单绑定作用：

可以实现双向数据绑定：

1）vue 中的 data 数据更改，然后视图中的显示内容也会随着改变
2）视图中的内容改变，vue 中的 data 数据也会随着改变 

单向数据绑定：

vue 中的 data 数据更改，然后视图中的显示内容也会随着改变 

【2】v-model 表单绑定实现双向数据绑定的原理：

MVVM 模型 (Model,View,ViewModel)：是 MVC 模式的改进版 在前端页面中，JS 对象表示 Model，页面表示 View，两者做到了最大限度的分离。将 Model 和 View 关联起来的就是 ViewModel，它是桥梁。ViewModel 负责把 Model 的数据同步到 View 显示出来，还负责把 View 修改的数据同步回 Model。

 

 

在 vue 中实现双向数据绑定使用表单绑定：v-model.

    
    
    




    

        

            
            
            姓名_单向绑定：
            

            
            姓名_双向绑定：
            

            年龄：
            性别:

        

            {{username}}
        

    

内容小结

1. 表单绑定：v-model 可以实现双向数据绑定。

2. 双向数据绑定：

vue 中的 data 数据改变，视图也会随着改变 --- 单向绑定
视图改变，vue 中的 data 中的数据也会改变 

3. 使用格式：

 姓名_双向绑定：