vue -- 指令 -- v-text/html/on/show/if/bind/for/model

v-text

• 设置标签的文本值(textContent)
• 默认写法会替换全部内容,使用差值表达式{{}}可替换指定内容

• 支持内部写表达式

  
  
  image.png

image.png

v-html

• 设置innerHTML
• 内容中有html结构会被解析为标签

• v-text指令无论内容是什么,只会解析为文本

  
  
  image.png

v-on

• 为元素绑定事件
• 事件名不需要写on
• 指令可简写成@
• 绑定的方法定义在methods属性中

• 方法内部通过this关键字可以访问定义在data中的数据

  
  
  image.png

    

        
        
        
        
{{ food }}
    
    

v-on补充

• 传递自定义参数,事件修饰符
• 定义方法时需要定义形参来接收传入的实参
• 事件的后面跟上 .修饰符 可以对事件进行限制

• .enter 可以限制触发的按键为回车

  
  
  image.png

实例 - 计数器

image.png

    

        

            
                -
            
            {{ num }}
            
                +
            
        
    
    

v-show

• 根据表达式的真假,切换元素的显示和隐藏
• 原理是修改元素的display,实现显示/隐藏
• 指令后面的内容,最终都会解析成布尔值

• true -- 显示 , false -- 隐藏

  
  
  image.png

v-if

• 根据表达式的真假,切换元素的显示和隐藏(操纵DOM元素)
• 本质是通过操纵dom元素来切换显示状态
• 表达式的值为true,元素存在于dom树中.为false,从dom树中移除

    

        
        
programmer
        
programmer *
        
热死了
    
    

v-bind

• 设置元素的属性(例如 src title class)
• v-bind:属性名

• 可简写成 :属性名

  
  
  image.png

实例 - 图片切换

image.png

    

        
        prev
        next
    
    

v-for

• 根据数据生成列表结构
• 数组经常和v-for结合使用
• 语法是(item,index) in 数据
• item和index可以结合其他指令一起使用

• 数组长度的更新会同步到页面上,是响应式的

  
  
  image.png

    

        
        
        

            
{{ index + 1 }} city: {{ item }}
        
        
{{ item.name }}
    
    

v-model

• 获取和设置表单元素的值(双向数据绑定)
• v-model的作用是便捷的设置和获取表单元素的值
• 绑定的数据会和表单元素值相关联

• 绑定的数据<-->表单元素的值

  
  
  image.png

    

        
        
        
{{ message }}