vue学习记录第三天

悄咪咪的说讲课的老师说话声音好难听啊

复习

• v-model(单选时只有一个数，多选的时候是数组，提供一个value)
• 修饰符 .number .lazy
• 按键修饰符 .enter .ctrl .keyCode
• v-cloak
• axios
  1. create(){}钩子函数，在数据初始化后调用
  2. axios.get().then
  3. promise
• filter()过滤器
• computed:{}计算属性，不是方法，方法没有缓存，computed会根据依赖的属性进行缓存，必须是响应式变化，像get中return date.now()并不是响应式变化
  1. get()，引入时调用，返回什么值，赋予什么属性值
  2. set()，赋值时调用
• 事件
  1. stopPropgation 阻止冒泡，冒泡事件的意思就是一个按钮绑定一个click事件，click事件会依次在父级元素中触发，stopProgation()组织目标元素的事件冒泡到父级元素。
  2. cancelBabble=true和stopProgation效果相同
  3. preventDefault，returnValue=false，阻止元素的默认行为
  4. xxx.addEventListener('click',fn)
• jQuery once flag&&a()
• e.srcElement&&e.target 判断事件源绑定事件,捕获当前事件作用的对象
  -v-if以及v-show

1. v-else必须和v-if连用，中间不能有其他标签

事件修饰符

阻止事件传播

冒泡和捕获都会被阻止
@click.stop=""

事件捕获

事件捕获是从上到下，指不太具体的节点，比如window先接收到事件，最具体的节点最后接收到事件，在JS中将addEventListener的第二个参数改为true就会由捕获的方式获得最终的节点
vue中实现在父级加一个
@click.capture=""

  
    

      
parent
        
child
          
grandson
          
        
      

      
    
    
  

对于这段程序的执行结果应该是
alert(parent)
alert(grandson)
alert(child)
这是因为，点击grandson，parent开始捕获，但是child没有捕获，所以直接获得grandson，然后开始冒泡

阻止默认行为

@click.pervent=""

事件只绑定一次

@click.once=""

判断事件源绑定

@click.self=""

Vue构造函数

希望所有的实例都能使用过滤器，使用全局过滤器
要放在页面的顶部，不可以new完后再定义

Vue.filter('my',(data)=>{return data+'111'}

watch

computed不支持异步
好的是时候重温异步了
每次异步一定要拿出来说的东西就是setTimeout(),看以下的程序

    for(var i=0; i<3; i++){
        setTimeout(function(){
            i+=i;
            console.log(i);
        },1000)
    }
    var i = 1;
    console.log(i);

输出的结果是 1 2 4 8
原因是整个程序的运行顺序是，for先执行，setTimeout也进入队列三次，i到达3，然后执行var i=1,i被赋予值1，console.log(1)，然后时间到了，三次setTimeout被执行

watch,computed以及methods的区别

1. computed VS methods 计算属性是基于依赖进行缓存，依赖发生变化，才会重新计算，但是调用方法是在每次触发渲染时都会再次执行
2. computed VS watch
   当有一些数据需要随着其他数据的变动而变动，使用computed
   当需要异步或者开销较大的操作的时候使用watch
   watch可以监控值的变化，在data中定义属性进行监控，watch中的属性名要和监控的属性名相同

watch:{
a(newVal,oldVal):{}
}

只有值变化才会变化，假如两次输入的值相同，并不会触发

watch另一种调用方法

vm.$watch('a',function(){})

动态绑定样式

v-bind

动态绑定“属性”

动态绑定class和style

第一种方法 对象

首先动态绑定的方式是:class, :class和class绑定的属性不冲突
绑定：{className:isActive}
多个类用逗号隔开

  
    

      
      
大白熊
        
      
    
    
  

第二种数组

在data定义需要用的类，:class后用数组绑定
:class="[class1,class2,'z']"
或者:class="[class1,class2,{z:flag]"

    

      
      
大白熊
        
      
    
    
  

template

template标签，是vue提供的没有任何实际意义的标签，可以用来包裹元素，并且使用v-if，v-show并不支持

      
      
大白熊
        

利用这个简单弄了一个注册登录界面切换

  
    
    
    
  

  
    

     

       
注册
       
登录
       
      

        
        
        
    
    
    
  

相同结构复用

默认情况下切换dom时相同的结构会被复用，如果不需要复用，加上key属性