vuejs學習筆記（1）--屬性，事件綁定，ajax

標籤：資料互動   text   play   put   綁定   button   href   字元   ref   

本文轉自：http://www.cnblogs.com/shuai5288/archive/2017/04/05/6670923.html屬性

v-for 類似於angular中的 ng-repeat ，用於重複產生html片段；

<ul id="box">       <li v-for="(v, i) in list">{{v}}</li></ul><script>    var vm = new Vue({        el: ‘#box‘,              // 對應的元素選取器 或者是 指向元素的變數        data: {                  // data            list: [1,2,3]        }    });</script>

也可以寫成這種形式 v-for=‘v in list‘ ，重複的資料也可以是js對象格式的。

 

v-show 與angular中的 ng-show 是一樣的，值為 true 則顯示，false 則隱藏（display：none）。

v-model 與angular中的 ng-model 一樣，主要用於input元素值的綁定。

v-bind: 用於綁定屬性值；

<img v-bind:class="class" v-bind:src="src"/><script>    var vm = new Vue({        el: ‘#box‘,              // 對應的元素選取器 或者是 指向元素的變數        data: {                  // data            class: [‘class1‘,‘class2‘], //             src: ‘img/1.png‘        }    });</script>

這裡的class資料也可以是對象形式的 {‘class1‘: true, ‘class2‘: false}，對象中的key值為類名，value為真則應用此類名，否則反之；
還可以是字串 ‘class1‘ 。

v-bind: 的簡寫形式，如 v-bind:class 可以寫成 :class ,  v-bind:src 可以寫成 :src ，推薦使用簡寫。

事件綁定

vuejs中使用 v-on:click="fn()" 的形式綁定事件：

<input type="button" v-on:click="add()">              //<input type="reset" v-on:click=" username=‘123‘ ">   // 也可以是一條js語句<input type="button" @click="add($event)">           // @click 是 v-on:click 的簡寫，推薦使用<input type="text" @click.stop="add($event)">        // .stop 表示阻止冒泡<input type="text" @click.prevent="add($event)">     // .prevent 表示預設行為<input type="text" @keydown.up="add($event)">        // .up 對應鍵盤up鍵<input type="text" @keydown.left="add($event)">     // .left 對應鍵盤left鍵

<input type="text" @keydown.13="add($event)">       // .13 對應 enter 鍵

<script>    var vm = new Vue({        el: ‘#box‘,              // 對應的元素選取器 或者是 指向元素的變數        data: {                  // data            username: ‘vuejs‘        },
        methods: {              // 存放事件對應的方法
　　　　　　add:function(e){}
　　　　}    });</script>

vue 提供多種形式的事件綁定，沒有他做不到，只有你想不到。

ajax

vue 本身並沒有封裝ajax模組，我們可以使用vue的外掛程式 vue-resource.js 來做資料互動；當然也可以使用 jquery 

vue-resource.js 的API 與jquery的 ajax 類似，容易上手：

<script src="vue.js"></script><script src="vue-resource.js"></script>

<script>    var vm = new Vue({        el: ‘#box‘,              // 對應的元素選取器 或者是 指向元素的變數        data: {                  // data            username: ‘vuejs‘        },
        methods: {              // 存放事件對應的方法
　　　　　　get: function(e){
          　　this.$http.get(‘url‘).then(
　　　　　　　　    function(result){console.log(‘success‘)},  // 請求成功的回呼函數
　　　　　　　　　　 function(result) {console.log(‘fail‘)}     // 失敗時的回呼函數
　　　　　　　　)
          }
　　　　}    });</script>

$http.get() 返回的是 promise 對象。大白話講解Promise（一）

$http也支援 post(), jsonp()跨域 等方法。 

vuejs學習筆記（1）--屬性，事件綁定，ajax