Vue

vue对象，绑定了json对象和组件，含有data、el、method、computed

new Vue({
      el: '#div1',
      data: {
          clickNumber:0
      },
      mounted:function(){ //mounted　表示这个 Vue 对象加载成功了调用

        },  
      methods:{
          count: function(){
              this.clickNumber++;
          }
      }
      computed:{
          dollar:function() {
              return this.rmb / this.exchange;
          }
      }
     watch:{
          dollar:function(val) {
              this.dollar = val;
              this.rmb = this.dollar * this.exchange;
          },
      }
       filters:{
          capitalize:function(value) {
                if (!value) return '' //如果为空，则返回空字符串
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.substring(1)
          }
      }
        components:{//组件
          'product':{
              template:'<div class="product" >MAXFEEL休闲男士手包真皮手拿包大容        量信封包手抓包夹包软韩版潮</div>'
    })

1. computed 是有缓存的，只要rmb没有变化，dollar 会直接返回以前计算出来的值，而不会再次计算。 而methods每次都会调用。
2. dollar的改变是这个特殊“事件”被触发的条件，而dollar对应的函数就相当于监听到事件发生后执行的方法
3. watch擅长处理的场景：一个数据影响多个数据
   computed擅长处理的场景：一个数据受多个数据影响
   相比于watch/computed，methods不处理数据逻辑关系，只提供可调用的函数

增加监听

<button v-on:click="count">点击</button>
<button @click="count">点击</button>

调用方法

{{dollar}}

调用data

{{clickNumber}}

调用computed

{{ dollar }}

从组件获得json对象

<input v-model="clickNumber" >
<p>{{ clickNumber }}</p>   

过滤器

{{ data|capitalize }} data作为capitalize过滤器的参数

全局过滤器

Vue.filter('capitalize', function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
})

组件

<product></product>

全局组件，带参数name

Vue.component('product', {
      props:['name'],参数
      template: '<div class="product" >{{name}}</div>'内容
    })

组件绑定动态参数

组件外的值：<input v-model="outName" ><br>
    <product v-bind:name="outName"></product>组件的参数name绑定上"outName"

组件设置监听

Vue.component('product', {
      props:['name','sale'],
      template: '<div class="product" v-on:click="increaseSale">{{name}} 销量: {{sale}} </div>',
     methods:{
          increaseSale:function(){
              this.sale++
          }
      }
    })
<product name="MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮" sale="10" ></product>

组件的运用
循环 v-for="item in products"
product组件里的product参数被“item”绑定 v-bind:product="item"

<product v-for="item in products" v-bind:product="item"></product>

1. Vue.component(组件名'product',配置templateObject)
2. 配置templateObject：
   props: [参数名]
   template：html语句tempalateDiv
   methods: {函数名: function () {
   }}
3. html语句tempalateDiv=document.getElementById("tempalate").innerHTML

   var tempalateDiv=document.getElementById("tempalate").innerHTML;
   var templateObject = {
    props: ['product'],
    template: tempalateDiv,
      methods: {
            increaseSales: function () {
                this.product.sale = parseInt(this.product.sale);
              this.product.sale += 1
              this.$emit('increment')
            }
          }
   }
   Vue.component('product', templateObject)