new Vue({
	//選項(xiàng)
})

<div id="app">
	<p>{{ total }}</p>
</div>
<script type="text/javascript">
	new Vue({
		el: '#app',
		data: {
			a: 1
		},
		computed: {
			total(n) {
				return this.a + 5
			}
		}
	})
</script>

<div id="app">
	<p>{{ total(6) }}</p>
</div>
<script type="text/javascript">
	new Vue({
		el: '#app',
		data: {
			a: 1
		},
		computed: {
			total() {
				return (n) => {
					return this.a + n
				}
			}
		}
	})
</script>

<div id="app">
     <!--  
        當(dāng)多次調(diào)用 reverseString  的時(shí)候 
        只要里面的 num 值不改變 他會(huì)把第一次計(jì)算的結(jié)果直接返回
    直到data 中的num值改變 計(jì)算屬性才會(huì)重新發(fā)生計(jì)算
     -->
    <div>{{reverseString}}</div>
    <div>{{reverseString}}</div>
     <!-- 調(diào)用methods中的方法的時(shí)候  他每次會(huì)重新調(diào)用 -->
    <div>{{reverseMessage()}}</div>
    <div>{{reverseMessage()}}</div>
  </div>
  <script type="text/javascript">
    /*
      計(jì)算屬性與方法的區(qū)別:計(jì)算屬性是基于依賴進(jìn)行緩存的，而方法不緩存
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Nihao',
        num: 100
      },
      methods: {
        reverseMessage: function(){
          console.log('methods')
          return this.msg.split('').reverse().join('');
        }
      },
      //computed屬性的聲明和data屬性、methods屬性是平級(jí)關(guān)系 
      computed: {
        //reverseString屬性名稱是自定義的 
        reverseString: function(){
          console.log('computed')
          var total = 0;
          // 當(dāng)data中num 屬性的值發(fā)生改變時(shí)，reverseString 函數(shù)會(huì)自動(dòng)進(jìn)行計(jì)算  
          for(var i=0;i<=this.num;i++){
            total += i;
          }
         // 在reverseString函數(shù)中必須要有return，否則在頁面中無法獲取到計(jì)算后的值    
          return total;
        }
      }
    });
  </script>

<div id="app">
     <!--  
        當(dāng)多次調(diào)用 reverseString  的時(shí)候 
        只要里面的 num 值不改變 他會(huì)把第一次計(jì)算的結(jié)果直接返回
    直到data 中的num值改變 計(jì)算屬性才會(huì)重新發(fā)生計(jì)算
     -->
    <div>{{reverseString}}</div>
    <div>{{reverseString}}</div>
     <!-- 調(diào)用methods中的方法的時(shí)候  他每次會(huì)重新調(diào)用 -->
    <div>{{reverseMessage()}}</div>
    <div>{{reverseMessage()}}</div>
  </div>
  <script type="text/javascript">
    /*
      計(jì)算屬性與方法的區(qū)別:計(jì)算屬性是基于依賴進(jìn)行緩存的，而方法不緩存
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Nihao',
        num: 100
      },
      methods: {
        reverseMessage: function(){
          console.log('methods')
          return this.msg.split('').reverse().join('');
        }
      },
      //computed屬性的聲明和data屬性、methods屬性是平級(jí)關(guān)系 
      computed: {
        //reverseString屬性名稱是自定義的 
        reverseString: function(){
          console.log('computed')
          var total = 0;
          // 當(dāng)data中num 屬性的值發(fā)生改變時(shí)，reverseString 函數(shù)會(huì)自動(dòng)進(jìn)行計(jì)算  
          for(var i=0;i<=this.num;i++){
            total += i;
          }
         // 在reverseString函數(shù)中必須要有return，否則在頁面中無法獲取到計(jì)算后的值    
          return total;
        }
      }
    });
  </script>

<!-- 驗(yàn)證用戶名 -->
<div id="app">
  <div>
    姓：<input type="text" v-model='lastName'>
  </div>
  <div>
    名：<input type="text" v-model='firstName'>
  </div>
  <div>
  	全名：{{fullName}}
  </div>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      firstName: '張',
      lastName: '三'
    },
    // 計(jì)算屬性
    watch: {
      firstName(val) {
        this.fullName = val + ' ' + this.lastName;
      },
      lastName(val) {
        this.fullName = this.firstName + ' ' + val;
      }
    }
  });
</script>

new Vue({
	el: '#app',
	data: {
		num: {
			a: 1,
			b: 2,
			c: {
				d: 3
			}
		}
	},
	watch: {
		num: {
			deep: true, // 開啟深度監(jiān)聽
			handler(val, oldVal) {
				//...
			}
		}
	}
})

<div id="app">
    <input type="text" v-model='msg'>
      <!-- upper 被定義為接收單個(gè)參數(shù)的過濾器函數(shù)，表達(dá)式  msg  的值將作為參數(shù)傳入到函數(shù)中 -->
    <div>{{msg | upper}}</div>
    <!--  
      支持級(jí)聯(lián)操作
      upper  被定義為接收單個(gè)參數(shù)的過濾器函數(shù)，表達(dá)式msg 的值將作為參數(shù)傳入到函數(shù)中。
	  然后繼續(xù)調(diào)用同樣被定義為接收單個(gè)參數(shù)的過濾器 lower ，將upper 的結(jié)果傳遞到lower中
 	-->
    <div>{{msg | upper | lower}}</div>
    <div :abc='msg | upper'>測(cè)試數(shù)據(jù)</div>
  </div>

<script type="text/javascript">
  //  lower  為全局過濾器     
  Vue.filter('lower', function(val) {
    return val.charAt(0).toLowerCase() + val.slice(1);
  });

  new Vue({
  	el: '#app'
  })
</script>

var vm = new Vue({
  el: '#app',
  data: {
    msg: ''
  },
  filters: { 
    upper: function(val) {
      return val.charAt(0).toUpperCase() + val.slice(1);
    }
  }
});

{{  data | filter1 | filter2  }}

<div id="box">
  {{ message | filterA('arg1', 'arg2') }}
</div>
<script>
	  Vue.filter('filterA',function(n,a,b){
		 if(n<10){
		   return n+a;
		 }else{
		   return n+b;
		 }
	});

	new Vue({
	  el:"#box",
	  data:{
	    message: "哈哈哈"
	  }
	})
</script>