vue基础笔记

v-指令 

   v-if，v-else-if, v-else： 根据条件是否插入元素
   v-for 循环：对数据进行循环遍历，第一参数是值，第二个参数是下标
                       v-for:"item in datas",  v-for:"(item, index) in datas"
   v-show: 是否显示元素
   v-bind：绑定动态属性，缩写为‘:’，常用于属性值是动态变量，class, style,
                 样式绑定： v-bind:class = "{'active': isActice}"
   v-model：绑定控件，不同控件类型根据相应的方法返回正确的值

模板语句

   {{      }}： 绑定数据，和v-text用法一样
   v-text:  以文本的方式渲染数据
   v-html：输出html代码

事件

    v-on:eventName,
    v-on的缩写为‘@’, @eventName
   <div v-on:click="func"></div>     内容可以是函数名，也可以是js语句，表达式

数据传递
   子组件获取父组件数据： props
   子组件传递数据到父组件：
           子组件：this.$emit(’eventName‘);
           父组件：v-on:eventName

监听数据属性 watch

  通过watch属性响应组件数据的变化
     watch: {
            item: function(newVal, oldVal){   // 是data属性的一个key
                 // to do something
             }
      }

计算属性 coumpted

通过计算或者一些数据的变化，返回想要的数据
     coumpted: {
           addressFormat: function(){
                return this.address.slice(0, this.selectIndex);  //selectIndex是data属性的一个key
           }
      }

过滤属性 filter

对数据进行过滤，可以改变数据格式，过滤数据内容
   
   <div v-text = "item | formatMoney"></div> // item默认是formatMoney的第一个参数，
   <div v-text = "item | formatMoney('abc')"></div> 可以添加其他参数 ，abc为固定值参数作为第二个参数
   
    filter: {
         formatMoney: function(val1,val2){
                return  val1.toFixed(2);
         }
    }
  
   组件外：Vue.filters('formatMoney', function(val1, val2){
         reutrn val1.toFixed(2);
   })

对象属性响应

     动态设置对象属性 Vue.set()
             组件内： this.set(obj, key, val) 组件外：Vue.set(obj, key, val) 
      动态删除对象属性  Vue.delete()
            组件内：this.set(obj, key, val); 组件外Vue.delete(obj, key); 
   

组件

组件常用属性 ：
       props(属性), data(数据), mounted(生命周期), methods(方法), watch(监听), filter(过滤), coumpted(计算)，
      component(组册组件)
 创建组件方式一：Vue.component('name', {props, data, mounted, methods, watch, filter, coumpted})
 创建组件方式二： new Vue({props, data, mounted, methods, watch, filter, coumpted})
 创建组件方式三： .vue文件 export default {props, data, mounted, methods, watch, filter, coumpted }

component注册组件属性：
     如果本组件要使用其他组件，首先要导入组件，然后注册组件到本组件使用
     import cart from 'cart.js'; 
     import addressfrom 'address.js';
    export default {
           component: {cart, address}    
    }