vue中的事件修饰符、表单双向数据绑定和计算属性

目录

一、事件修饰符

二、表单双向数据绑定

模拟双向数据绑定（双向数据绑定底层原理）

三、计算属性

计算属性和methods方法区别？

计算属性和watch区别？

---

一、事件修饰符

  stop 阻止事件冒泡
  prevent 阻止事件默认行为 
  capture 事件捕获阶段执行
  self  仅当当前元素是event.target触发 
  once 执行一次事件 
  passive 与scroll滚动事件连用

        
        

        
        

        

        
        

            

        

        
        

            

        

        
        百度一下

        
        

            我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div
            我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div
            我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div
        

        
        
        
    
    

---

二、表单双向数据绑定

  v-model 监听用户输入事件以更新数据 创建双向数据绑定 
  v-model修饰符：
    lazy  输入事件input事件 change事件 失焦或者按下回车
    number 将输入框双向绑定得数据设置为number类型
    trim  过滤绑定数据前后空格

        
        {{form}}
        用户名:
        

        密码:
        

        男:
        女:
        

        爱好:
        游泳:
        篮球:
        足球:
        

        描述:
        

        城市:
        
            
                北京
                上海
                广州
            
        
    
    

---

模拟双向数据绑定（双向数据绑定底层原理）

    利用Object.defineProperty()

    
    
    


    
    
极简版双向数据绑定
    
    

浏览器运行结果如下：

---

三、计算属性

       对data中数据进行逻辑处理返回一个响应式数据,基于响应式依赖(data),只要响应式依赖不发生改变，计算属性就不会重新计算，多次调用计算属性会返回之前计算得结果。有缓存性，计算属性默认只提供getter，只允许读取，不允许修改，想要修改计算属性，需要提供setter函数。

    
    
    
    


    

        {{msg.split('').reverse().join('')}}
        {{reverseMsg}}
        {{reverseMsg}}
        {{reverseMsg}}
        {{reverseMsg}}
        {{reverse()}}
        {{reverse()}}
        {{reverse()}}
        {{reverse()}}
    
    

浏览器运行结果如下：

2s后：

---

计算属性和methods方法区别？

  1.计算属性有缓存性，响应式依赖不发生改变，多次调用计算属性会返回之前得计算结果。
  2.methods多次调用会多次执行函数，没有缓存性。
  3.计算属性一般不用于异步操作，methods可以处理异步操作。
  4.可以定于计算属性被修改，不仅可读。

计算属性和watch区别？

  1.计算属性具有缓存性，响应式依赖不发生改变计算属性不会重新计算，会返回之前得计算结果
  2.watch不具有缓存性，只要数据发生改变watch就会立即执行
  3.watch一般用于异步操作(监听分页)或者开销较大操作
  4.计算属性一般不用于异步操作，只提供getter需要修改需要设置setter函数

---