vue :class 动态绑定样式_VUE学习笔记----day1

MVVM结构

在MVVM中View和Model是不可以直接进行通信的，它们之间存在这ViewModel这个中介充当着观察者的角色。当用户操作View，ViewModel感知到变化，然后通知Model发生相应改变，反之亦然。ViewModel向上与视图层View进行双向数据绑定，向下与Model通过接口请求进行数据交互，起到承上启下的作用。

VUE的实现MVVM方式

• 数据监听器
  Observer将普通的JS对象传递给VUE实例的data选项，Vue将遍历此对象所有属性，并使用Object.defineProperty()方法将属性全部转换成setter和getter方法。当data中的属性被调用访问时，则会调用getter方法。当data中的属性被改变时，则会调用setter方法。
• 指令解析器
  Compiler 的作用是对每个元素节点的指令进行解析，替换模板数据，并绑定对应的更新函数，初始化相应的订阅。
• 订阅者
  Watcher作为连接Observer和Compiler的桥梁，能够订阅并接收每个属性变动的通知，执行指令绑定相应回调函数。
• 消息订阅器

Dep内部维护了一个数组，用来执行收集订阅者Watcher，数据变动触发notify()函数，在调用订阅者的update()方法。

第一个demo

 
 
 
 
 
 


 
 

 
{{msg}}
 

 
 


 

命令

• v-clock

//解决插值表达式闪烁问题

• v-text/v-html

 //标签内文本显示
 //v-text没有插值表达式的闪烁问题
 //v-text完全覆盖元素中的内容
{{msg}}

//v-html解析data内的标签

• v-bind

//绑定msg3的属性，而不是使用msg3这个文本，将msg3当做一个变量
//也可以使用：

• v-on

//v-on事件绑定
//可以简写为@
//methods是一个对象

• v-model model和表单元素之间双向绑定

 

    
{{msg}}
    //修改input的值会反向展示在页面
    
 

//表单元素
//input（text,radio,email,address）
//chceckbox
//textarea
//select

• 使用v-model实现calc

 

 

 
 +
 -
 *
 /
 

 

 

 

 

 

事件修饰符

• .stop阻止其他所有的事件冒泡

   

    //在点击button时div的事件不触发
   
 
 

• .prevent 阻止本身的默认行为

 

    

    //点击后不再跳转链接
    去百度//事件修饰符可以串联
 
 

• .capture 事件捕获

 

    //事件触从外到里，先执行divHandler(),再执行buttonHander
    

     
 
 

• .self 仅阻止当前元素的冒泡

 

   //只有点击当前元素才会触发，冒泡无法触发
 

 
 
 

第一个practise

    

            
            
            
{{msg}}
    

    


    
  

样式设置

• 属性绑定的方式（数组/三元表达式/数组内存放对象/直接使用对象）

   //添加引号寻找样式进行匹配，不添加单引号使用变量进行匹配
   //样式使用数组进行存放
   
我是样式设置
 

//样式设置的三元表达式

   
我是样式设置
   //数组里面添加对象代替三元表达式
   
我是样式设置
 

//样式内直接使用对象
//对象内的key值可以带引号，也可以不带引号
我是样式设置

//对象也可以存放在data中

    

        
我是样式设置
    

    

• 内联样式

//使用对象

   
我是样式设置


//对象可以放在data中

    

        
我是样式设置
    

    


//内联样式使用数组存放样式对象

    

        
我是样式设置
    

    

其他指令

• v-for

//遍历数字
//从1开始，其他从0开始
 

        
第{{i}}次循环
    



//循环遍历数组

    

        
id：{{user.id}}------name:{{user.name}}
    

    



//key值为number或string
//保证页面上的数据和data相关联
//在使用v-for出现问题的使用注意使用key值

    

        ID:
                
        

        NAME:
                
        

        


        
{{item.id}}---------{{item.name}}
    

    

//v-for遍历对象

    

        
值：{{item}}--------键：{{key}}---------索引：{{i}}
        
    

    

• v-if/v-show

//v-if每次会删除或创建元素，切换性能效率低
//v-show 只是切换display，较低的初始渲染效率

 

 
 
if控制显示
 
show控制显示