Vue学习:基本代码、事件修饰符、class/style样式、v-for 循环、v-if/v-show/

插值表达式和v-text

v-cloak 解决闪烁问题
v-html 可以识别标签
v-bind 属性绑定机制，可以简写为 :
v-on 事件绑定机制，可以简写为@

    
    
------------------{{msg}}========================
    
===========
    
    
    
{{msg2}}
    

    
    
66666666666
    
    
    
    
    
    

案例：跑马灯效果

    
    
{{msg}}

事件修饰符

• 使用.stop阻止事件冒泡

• 使用.prevent阻止默认事件

            打开百度

• 使用.capture实现捕获触发事件的机制，就是谁有该事件修饰符，就先触发谁

• .self实现只有点击当前元素的时候，才会触发事件处理函数

• .once只触发一次事件处理函数

            打开百度

.stop和 .self 的区别:
.self只会阻止自己身上的冒泡行为的触发，并不会真正阻止冒泡行为

v-model

• v-bind 只能实现数据的单向绑定，从M自动绑定到V， 无法实现数据的双向绑定
• 使用v-model 可以实现表单元素 和Mode中数据的双向数据绑定
• 注意：v-model只能运用在表单元素中
  input( radio,text,address,email) select checkbox textarea

    
{{msg}}

    

案例：简易计算器

    
    
        +
        -
        *
        /
    
    
    
    

class样式的使用

• 直接传递一个数组
  

  这是内容啊

• 在数组中使用三元表达式
  

  测试内容测试内容测试内容测试内容

• 在数组中使用对象代替三元表达式，提高代码可读性

么么么么么么么木木木木木木木木木

• 在class使用v-bind 绑定对象的时候，对象的属性是类名

 
啦啦啦啦啦啦啦啦绿绿绿绿绿绿绿绿绿绿

style样式的使用

    
内容内容内容内容内容内容内容内容内容内容
    
内容内容内容内容内容内容内容内容内容内容

v-for 循环

• v-for循环普通数组

    
{{index}}==========={{item}}

• v-for循环对象数组

    
=====角标index===={{index}}=====id======{{item.id}}===name===={{item.name}}

• v-for循环对象

    
{{value}}===={{key}}======={{index}}

• v-for迭代数字

    
第{{i}}次

• v-for中key属性的使用

    ID
        
    
    Name
        
    
    
    

        {{item.id}}======{{item.name}}
    

v-if和v-show的使用

• v-if的特点：
  每次都会重新删除或创建元素， 有较高的切换性能消耗.
• v-show的特点：
  每次不会重新删除或创建元素，只是切换元素的display:none样式， 有较高的初始渲染消耗

如果元素涉及频繁的切换，最好不要用v-if
如果元素可能永远也不会被显示出来被用户看到，则推荐v-show