vue02---事件指令/属性指令/style和class/条件渲染/列表渲染/事件处理/数据双向绑定/过滤案例

事件指令

vm对象

    
    
    



    
{{name}}
    点我

函数传参

# 1  v-on:事件名='函数'-----》简写成  @事件名='函数'
# 2 触发函数，可以传参数

    
    
    



    
函数，可以多传参数，也可也少传参数，都不会报错
    点我
    
事件对象,调用函数，不传参数，会把当前事件对象，传入,可以不接受，也可以接受
    点我2
    

    点我3

属性指令

# 标签上   name   id  class  src  href ,height  属性
    如果这样，name='xx' 就写死了，我们想动态的绑定变量，变量变化，属性的值也变化
    
    
#  v-bind:属性名='变量'
# 简写成： :属性名='变量'

属性指令使用

    
    
    



    点我换美女
    

    

美女小案例

    
    
    



    点我开始选
    

    

style和class

# style 和 class 也是属性，可以使用属性指令  :class=   :style=   
# 但是他们比较特殊，单独再讲

 

    
    
    
    



    
class 的使用：字符串，数组，对象
    点我变样式
    

    

        我是div
    

    
style 的使用：字符串，数组，对象
    

    
    

        我是div
    

条件渲染

# v-if  v-else-if   v-else

# 根据学生分数，显示学生的 优秀，良好

    
    
    





    
优秀
    
良好
    
及格
    
不及格

列表渲染

# 循环渲染一些数据，比如购物车的数据
# v-for：循环字符串，数组，数字，对象

# 有购物车数据，循环显示再页面中
 

v-for 显示购物车

 

    
    
    
    





    

        

            

                
购物车
                

                    加载购物车
                

                

                    

                    

                        
id号
                        
商品名
                        
商品价格
                        
商品数量
                    
                    
                    

                    

                        
{{good.id}}
                        
{{good.name}}
                        
{{good.price}}
                        
{{good.count}}
                    
                    
                


            

        

    

v-for循环其它类型

# 数字，字符串，数组，对象

# 看到别人写v-for时，在标签上都会加一个 key 属性，目的是为了提高虚拟dom的替换效率

# key 的值必须唯一，如果不唯一就报错



###### 以后如果数据变了，页面没有发生变化#####
Vue.set(对象, key, value)
Vue.set(数组, 索引, 值)

    
    
    




    
循环数字
    

        
{{value}}---->{{index}}
    
    
循环字符串
    

        
{{value}}--->{{index}}
    
    
循环数组
    

        
{{value}}---->{{index}}
    
    
循环对象(key和value是反的)
    

        
key是：{{key}}=====value是:{{value}}
    

事件处理

# 事件指令
    -click:点击事件
    
# input标签的事件
    -input：只要输入内容，就会触发
    -change：只要输入框发生变化，就会触发
    -blur：只要失去焦点，就会触发

    
    
    




    
input事件
     --->{{username}}
    
change事件
     --->{{username1}}
    
blur事件
     --->{{username2}}

数据双向绑定

# 数据双向绑定---》只有input标签---》v-model 做双向数据绑定
# 咱们之前写的，其实都是数据的单向绑定
    修改js的值，页面变了

    
    
    




    
单向数据绑定，咱们不用
    
    
    
    
    

    
双向数据绑定
    
用户名
    
密码
    

        登录
    

过滤案例

    
    
    




    
    

    

        
{{item}}