vue的基础指令演示代码及简单案例

目录

一、内容绑定，事件绑定

v-text

v-html

v-on

案例：计数器

二、显示切换，属性绑定

v-show

v-if

v-bind

案例：图片切换

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

v-for

v-on补充

v-model

---

1. 通过Vue实现常见的网页效果
2. 学习Vue指令，以案例巩固知识点
3. Vue指令指的是，以v-开头的一组特殊语法

一、内容绑定，事件绑定

v-text

1. v-text指令的作用是：设置标签的内容(textContent)
2. 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
3. 内部支持写表达式

    
    
    
    




    

        
测试
        
测试
        
{{message+'###'}}测试
    

    
    

    

v-html

1. v-html指令的作用是：设置元素的innerHTML
2. 内容中有html结构会被解析为标签
3. v-text指令无论内容是什么，只会解析为文本
4. 解析文本使用v-text，需要解析html结构使用v-html

v-on

1. v-on指令的作用是:为元素绑定事件
2. 事件名不需要写on
3. 指令可以简写为@
4. 绑定的方法定义在methods属性中
5. 方法内部通过this关键字可以访问定义在data中数据

    
    
    
    



    
    

        
        
        
        
        
        
{{food}}
    

    
    

    
    

案例：计数器

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

做计数器的思路：

    
    
    
    



    
    

        
        -
        
        {{num}}
        +
    

    
    

    
    

二、显示切换，属性绑定

v-show

根据表达值的真假，切换元素的显示和隐藏，如：广告、遮罩层等

1. v-show指令的作用是：根据真假切换元素的显示状态
2. 原理是修改元素的display，实现显示隐藏
3. 指令后面的内容，最终都会解析为布尔值
4. 值为true元素显示，值为false元素隐藏
5. 数据改变之后，对应元素的显示状态会同步更新

v-if

根据表达值的真假，切换元素的显示和隐藏（操纵dom元素）

1. v-if指令的作用是：根据表达式的真假切换元素的显示状态
2. 本质是通过操纵dom元素来切换显示状态
3. 表达式的值为true，元素存在于dom树中，为false，从dom树中移除
4. 频繁的切换v-show，反之使用v-if，前者的切换消耗小

    
    
    
    



    
    

        
        
老陈
        
老陈 - v-show修饰
        
热死
    

    
    

    
    

v-bind

设置元素的属性（比如：src，title，class）

1. v-bind指令的作用是：为元素绑定属性
2. 完整写法是v-bind:属性名
3. 简写的话可以直接省略v-bind，只保留:属性名
4. 需要动态的增删class建议使用对象的方式

案例：图片切换

1. 列表数据使用数组保存
2. v-bind指令可以设置元素属性,比如src
3. v-show和v-if都可以切换元素的显示状态,频繁切换用v-show

在JavaScript中，通过数组来保存多个数据，数据的取值使用索引来读取。因为是数组，所以可以非常便捷地判断是否为第一张图片或最后一张图片，只需要判断索引的值和数组的长度大小。图片显示内容的更改，本质是图片的src属性被修改了，属性用v-bind指令。a标签在被点击时，要执行逻辑，事件绑定使用v-on指令。在第一张或最后一张图片时，需要隐藏某个a标签。为了实现该功能，可以使用v-if或者v-show指令，由于切换可能较为频繁，考虑性能的情况下，使用v-show会适合一些。

思路：

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

v-for

根据数据生成列表结构

1. v-for指令的作用是:根据数据生成列表结构
2. 数组经常和v-for结合使用
3. 语法是( item,index ) in数据
4. item和index可以结合其他指令一起使用
5. 数组长度的更新会同步到页面上,是响应式的

使用v-for生成多个li，语法为：v-for="item in arr"，其中arr是循环的数据名，跟data里面的arr是相对应的，in是关键字，item是遍历的每一项，可以修改名字，符合命名规则即可。now数组里面有5个元素，则会生成5个li标签，如果数组中有内容，会一并生成，如上述有个“你好”，会和5个标签一起生成，如果内部还有后代元素，则后代元素会作为模板一起来生成。可以理解为：v-for指令的作用是把模板的那个标签，还有内部的所有内容，根据数据的个数拷贝若干份。

    
    
    
    



    

    
    

        
        
        

            

                {{index+1}}发达城市有：{{it}}
            
        
        

            {{item.name}}
        
    

    
    

    
    

v-on补充

传递自定义参数,事件修饰符

1. 事件绑定的方法写成函数调用的形式，可以传入自定义参数
2. 定义方法时需要定义形参来接收传入的实参
3. 事件的后面跟上.修饰符可以对事件进行限制
4. .enter可以限制触发的按键为回车
5. 事件修饰符有多种

v-model

获取和设置表单元素的值(双向数据绑定)

1. v-model指令的作用是便捷的设置和获取表单元素的值
2. 绑定的数据会和表单元素值相关联
3. 绑定的数据<——>表单元素的值

    
    
    
    



    
    

        
        
        
{{message}}