vue.js1.0笔记

0332afac3bf2d60d72fe69db0cc263274290dd686145b-Xeebvn.jpeg

官网： http://cn.vuejs.org/
与angular类似的一个MVVM框架。
与DOM的行为驱动不同、vue以及angular是以数据作为驱动操作页面变化。

• 基本格式

以json的形式、将数据(支持所有格式)挂载在vue的data上、方法挂载在vue的methods上。

  new Vue({
       el:'#box',
        //数据
       data:{
             key:'welcome vue',
             arr:['apple','banana','orange','pear'],
             json:{a:'apple',b:'banana',c:'orange'}
       }
      //方法
      methods:{
            add:function(){
            //push 添加元素
                  this.arr.push('tomato');
            }
      }
      //计算属性
      computed:{
       //默认为get方法
           b:function(){
               //业务逻辑代码
               return 2;
          }
        //内部可以实现set、get两个方法
           c:{
               get:function(){
                   return this.a+2;
               },
               set:function(val){
                  this.a=val-2;
               }
           }
       },
       components:{ //局部组件---详见组件
        'my-aaa':Aaa
    }   
  });
  //钩子函数(生命周期)
  created:function(){
       alert('实例已经创建');
  }
  //自定义过滤器
  Vue.filter('toDou',function(val,a,b){
        return val<10?'0'+val:''+val;
  });
  //自定义指令
  Vue.directive('red',function(){
        this.el.style.background='red';
  });

• 常用指令

• 双向数据绑定v-model:"key"

将{key:value}于input双向绑定。
改动时其余部分的{{key}}也会随之替换。

• 循环v-for

       {{value}}
    

value为内容、$index为索引、$key为字典(json)独有。
//针对json格式的数据还有以下写法

{{k}} {{v}}

k为key、v为value
重复数据有事不予展示:track-by="$index/uid"添加索引

{{k}} {{v}}

• 显示隐藏v-show

  data:{ //数据
  

        a:true
     }
    
    

v-show:true/false

false显示

• 条件渲染v-if

       
{{message}}
    

v-if:true/false

true显示

• 区别

v-if是真实的条件渲染、当进行条件切换时、它会销毁和重建条件块的内容，并且它支持