Vue笔记

Vue 笔记

• 基本格式

var app = new Vue() （{     
    el: '#app',//绑定的元素id为‘app’  
    data: {
        //存放数据,与html直接绑定
        name：ZHANGSAN,
        age: 18
    },
    methods: {
        //存放函数
        onClick: function() {
            console.log('clicked');
        }
    }
}）；

• 指令

  • v-model

    数据的双向绑定。

    • lazy、trim、number修饰符

      
    
          
          //惰性更新，只有当鼠标blur的时候，才更新。
           
          //把用户输入的值前后空格去掉，优化数据库存储
          
          //用于价钱、年龄等一切数字类型的数据，转换成数字类型
          {{name}}
      
    

    • 类型

        
      
            
                男
                
                //用v-model替代name属性
            
            
                女
                
            
            
            
                北京
                上海
            
            
                北京
                上海
                广州
            
        
        
        data: {
            sex: female，
            article： sfhusdigheyufdgisfvsvgd，
            from: 1，
            //select的默认值为1，即value值为1的北京。
            dest: []//多选select框的dest为数组
        }
        //input的type="checkbox",即复选框时，sex为一个数组，data: {sex: []},可取默认值[male]。
      

  • v-bind(省略为：)

    用于绑定数据和元素属性

    e.g.

    
    
    //传对象，active是要添加的类，值在css中定义，在isActive为true的时候添加。
    
  
    
    
    data: {url: http://baidu.com,img:"xxxx",klass: btn btn-default，isActive: true}
  

  • v-show
    e.g. 性别：
    //data里面没有sex，所以这个span标签不会显示。

  • v-if

    与v-show的功能类似。不同的是，假如v-if为false，该元素直接在DOM中被删除，而v-show只是将该元素隐藏起来，实际上这个元素永远存在，相当于display：none。

  • v-for

    专门用于迭代的指令。一般用于迭代对象组成的数组。

    e.g.

    
  
       
  
           
  {{food.name}}: ￥{{food.discount? food.price * food.discount : food.price}}
           //三元运算符，假如discount存在，则返回打折后的价格，否则返回原价。
           //foodList是一个迭代的目标，food是里面的每一项，这每一项又是个字符串。
       
   
  

  • v-on（省略为@）

    用于绑定事件。

    e.g.

     
     //绑定多个事件，当鼠标进入的时候，触发onEnter函数，鼠标出去的时候，触发onOut函数。
    
     
    
     //当用户按下一个键且这个键是enter时，执行onKeyup函数。
     //$event是关键词，传的是事件对象。vue封装之后，可写成v-on:submit.prevent="onSubmit"。
         
         提交
     
    
     methods: {
         onClick: function() {
             console.log('clicked');
         },
         onEnter: function() {
             console.log('mouse enter');
         },
         onOut: function() {
             console.log('mouse leave');
         },
         onSubmit: function(e) {
             //禁止浏览器的默认提交行为，将事件传进来
             e.preventDefault();
             console.log('Submitted');
         }，
         onKeyup: function() {
             console.log('entered');
         },
     }
    

  • 控制流指令v-if、v-else-if、v-else

    e.g.

      
    
              管理员你好
          
          
    
              待查看简历列表：
          
          
    
              您没有权限访问此页面
          
      

data: {role: 'hr'}

自定义指令

  

  
 id="app">
      
 v-pin：true.bottom.left="card1.pinned" class="card">
          定住/取消
          hhhhhhhhh
      
      
 v-pin="card2.pinned" class="card">
          hhhhhhhhh
      
  

  Vue.directive('pin',function(el,binding) {
      var pinned = binding.value;
      var position = binding.modifiers;
      var warning = binding.arg;

      if(pinned) {
          el.style.position = 'fixed';

          for(var key in position) {
              if(position[key]) {
                  el.style[key] = '10px';
              }//key代表的就是top、bottom、left、right
          }
          if (waring == 'true') {
              el.style.background = 'yellow';
          }
      }
      else {
          el.style.position = 'static';
      }
  })//回调函数，el指vue会把pin指令所在的整个元素传进来,binding是一个对象，指指令传进来的值和其他基本信息，这里的pinned就是指令的绑定值：card1.pinned和card2.pinned。
  new.Vue({
      el:'#app',
      data: {
          card1:{
              pinned: false;
          }
          card2:{
              pinned: false;
          }
      )
  })

binding: 一个对象，包含以下属性：

name: 指令名，不包括 v- 前缀。

value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。

oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

expression: 绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。

arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。

modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

计算属性

通过其他的数据算出新的数据，并且将新数据缓存下来，当其他的数据没有发生改变时，调用缓存的数据，大大优化性能，这也是跟methods不一样的地方，methods每次被调用都会重新计算。

e.g.

    
                //用number修饰符避免分数被当成字符串
            

        

            
学科
            
分数
        
        

            

                
数学
                

            

                
物理
                

            
            

                
英语
                

            
            

                
总分
                
{{sum}}
            
            

                
平均分
                
{{average}}
            
        
    


var app = new Vue({
    el: '#app',
    data: {
        match: 90,
        physics: 85,
        English: 50,
    },
    computed: {
        sum: function () {
            return parseFloat(this.math) + parseFloat(this.physics) + parseFloat(this.English);
        }，//this指代实例化出来的app,parseFloat把字符转化为数字，此时可不用添加number修饰符。
        average: function() {
            return Math.round(this.sum / 3);
        }
    }
})

• 全局和局部组件

  • 定义一个全局组件

      Vue.component('alert', {
      //第一个参数传的是组件在vue里面的名字
          template: '弹弹弹',
          methods: {
              on_click: function () {
                  alert('HHH');
              }
          }
      });
    

    定义一个域，规定这个组件存放的位置，即生存空间。

      new Vue({
          el: '#seg1'
      });
    

    html

  • 定义一个局部组件

      new Vue({
          el: '#seg1',//将组件定义在sge1这个域里面作为局部变量。
          components: {
              alert: {
                  template: ''弹弹弹',
                  methods: {
                      on_click: function () {
                          alert('HHH');
                      }
                  }
              }
          }
      })
    

    • 以上代码可写成下面的形式：

        var alert_component = {
            template: ''弹弹弹',
            methods: {
                on_click: function () {
                    alert('HHH');
                }
            }
        };
      
        new Vue({
            el: '#seg1',
            components: {
                alert_component
            }
        })
      

• 配置组件

  html

  css

  js

    Vue.component(like',{
    template: '#like-temponent-tpl',
        data: function () {
            return {
                like_count: 10,
                liked: flase,
            }
        },
    methods: {
        toggle_like: function () {
            if (!this.liked)
                this.like_count++;
            else
                this.like_count--;
            
            this.liked = !this.liked;
        }
    }
    })
  

• 组件通信

  • 父子通信

    e.g.

      
    
          
          //修改username的值，动态改变href的路径。
      
    
      Vue.component('user',{
          template: ' {{username}}',
          pros: ['username'],//传你需要传进来的东西，与html组件里的对应，这里对应html调用的user组件里的username
          methods: {
          
          }
      })  
    
      new Vue({el: '#app',})
    

  • 子父通信

    e.g.

      
    
          
      
    
      Vue.component('balance',{
          template: `
          
    
              
              //当父组件收到子组件发出事件后，把默认为false的show-balance改成true。
              
    您的余额为0
          
    `，
          methods: {
              show_balance: function(data) {
                  this.show = true;
                  console.log('data:',data)
              }
          }
          data: function() {
              return {
                  show: false,
              }
          }
      });
      Vue.component('show',{
          template： `显示余额`，
          methods: {
              on_click () {
                  this.$emit('show-balance',{a: 1,b: 2});//用于触发一个事件，在组件show上监听
              }
          }
      });
    
      new Vue({
          el: '#app',
      })
    

  • 任意及平行组件通信

    e.g.

      
    
          
          
      
    
      var Event = new Vue();//事件调度器，调度每一条事件。
    
      Vue.component('hhh',{
      template: `
          
    说: 
      `,
      methods: {
          on_change() {
              Event.$emit('hhh-said-something',this.i_said)
          }//用于触发事件，事件的名称是hhh-said-something，第二个参数是传递hhh说话的内容。            
      }
      data: function() {
          return {
              i_said: '',
          }
      }
    
      })
    
      Vue.component('zzz',{
      template: `
    hhh说：{{hhh_said}}
    `,
      data: function() {
          return {
              hhh_said: '',
          };
      }
      
      //生命周期，挂载完成。初始化完毕。用于监听on_change
      mounted: function () {
          var me = this;//用一个变量缓存指代
          Event.$on('hhh-said-something',function (data){
              me.hhh_said = data;
          });
      }
    
      })
    

• 过滤器（优化用户体验）

  e.g.

    
  
        {{ price | currency('USD') }}
        //过滤器的名字为currency，把价格传到过滤器里面,price相当于一个默认参数，对应val，USD是第二个参数，这里对应unit。
    
  
    Vue.filter('currency',function(val,unit) {
        val = val || 0;
        unit = unit || 元；
        return val + unit；
    })
  
    new Vue({
        el:'#app',
        data: {
            price: 10,
        ]
    })
  

• 混入mixins

  重复功能和数据的储存器。定义了一部分可复用的方法或者计算属性。

  e.g.

    var base = {
        methods: {
            show: function() {
                this.visible = true;
            },
            hide: function() {
                this.visible = false;
            },
            toggle: function() {
                this.visible = ！this.visible;
            },
        }
        data: function() {
            return {
                visible： false，
            } 
        }
    };
    
    Vue.component('tooltip',{
        template: `
        
  
            ahhh
            
  
                啊哈哈哈
            
        
        `,
        mixins: [base],
        data: function() {
            return {
                visible: true,
            }
        }//覆盖mixins，相当于继承和重写
    });
  
    Vue.component('popup',{
        template: `
        
  
            popup
            
  
                X
                
  title
                hhhhhhhhhhhhhh
            
        
        `,
        mixins: [base],
    });
  
    new Vue({
        el: '#app',
        data: {}
    })
  

• 插槽slots

    .panel {
        max-width: 300px;
        border: 1px solid #999;
        margin-bottom: 15px;
    }
  
    .panel > * {
        padding: 15px;
    }
  
    .panel .title {
        border-bottom: 1px solid #999;
    }
  
    .panel .footer {
        border-bottom: 1px solid #999;
    }
  
    
  
        
            
  我是题目
            
  我是内容
            
  查看更多
            //对应slot里的内容
        
    
  
    
  
    Vue.component('panel',{
    
    })
  
    new Vue({
        el: '#app',
        data: {}
    })···
  

• 例子

    

        
        你的名字是：{{name}}
    
    

        
        你的年龄是：{{age}}
    
    

        
        你的性别是：{{sex}}