vue入门（供自己看）

Vue常见用法

1、花括号
{{}} 两个大花括号直接显示data内容

2、v-html

	<div v-html="message"></div>            message可以显示html标签内容

3、v-bind

	<div v-bind:class="{'class1': use}">         use为true则使用class1类
   	<div v-bind:id="'list-' + id">添加id</div>      添加id

4、v-if

	<p v-if="seen">现在你看到我了</p >        seen为true则显示内容
      	<pre><a v-bind:href="url">菜鸟教程</a ></pre>    url为链接

5、v-on:click

	<a v-on:click="doSomething">        点击事件
      	其中doSomething应该写在vue的methods上

6、v-model

	<input v-model="message">      双向绑定
      	只能用在 input、select、text、checkbox、radio 等表单控件元素上

7、过滤器 {{ message | capitalize }} capitalize需要写在vue的filters上

  例：filters: {
   	 	capitalize: function (value) {      //value即是message值
      			if (!value) return ''
      			value = value.toString()
      			return value.charAt(0).toUpperCase() + value.slice(1)
    		}
  	}

8、缩写

	<a v-bind:href="url"></a >
	<!-- 缩写 -->
	<a :href="url"></a >

	<!-- 完整语法 -->
	<a v-on:click="doSomething"></a >
	<!-- 缩写 -->
	<a @click="doSomething"></a >

9、v-for

	<li v-for="site in sites">     sites是个数组或对象(for有参和无参)
      		{{ site.name }}
    	</li>

10、vue的computed：用于处理一些复杂逻辑，用法和methods一样定义方法

11、vue的监听属性watch：只要data改变就会调用里面的方法

	// $watch 是一个实例方法
		vm.$watch('kilometers', function (newValue, oldValue) { 
			// 这个回调将在 vm.kilometers 改变后调用
		    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
		})    //kilometers是data的一个属性

12、v-bind:style

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>

13、

vue常用模板

<script type = "text/javascript">
         var vm = new Vue({
            el: ‘#app,
            data: {     /数据
               kilometers : 0,
            },

            methods: {    //方法
           	 //封装方法
  				reversedMessage2: function () {
        			return this.message.split('').reverse().join('')
     			 }
     		 //事件处理
     		 
     		 //初始化
            },

            computed :{   //计算
  // 计算属性的 getter
      reversedMessage: function () {
        // `this` 指向 vm 实例
        return this.message.split('').reverse().join('')
     	 }
        },
            watch : {     //监听属性   kilometers改变则调用方法
               kilometers:function(val) {
                  this.kilometers = val;
                  this.meters = this.kilometers * 1000
               }
           },
           filters: {
  			capitalize: function (value) {
   				 if (!value) return ''
   				 value = value.toString()
    				return value.charAt(0).toUpperCase() + value.slice(1)
 			 }
			},
         });
         // $watch 是一个实例方法
  vm.$watch('kilometers', function (newValue, oldValue) {   //监听属性
   // 这个回调将在 vm.kilometers 改变后调用
      document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
  })
      </script>
```