本篇和你們分享的是學習Vuejs的總結和調用webapi的一個小示例;快到年末了爭取和你們多分享點東西,但願能對各位有所幫助;本章內容但願你們喜歡,也但願各位多多掃碼支持和推薦謝謝:html
» Vuejs - 學習大雜燴vue
» WebApi + Vue.js 示例jquery
下面一步一個腳印的來分享:angularjs
» Vuejs - 學習大雜燴web
首先,咋們要學習一個js框架,那麼確定要引入該框架的基礎庫,這裏我建立一個頁面而且引用官網的庫是: <script src="https://unpkg.com/vue/dist/vue.js"></script> ,下面咱們來看一段Vue的基礎使用代碼:json
1 var app = new Vue({ 2 3 el: "#appVue", 4 data: { 5 msg: "第一個vue", 6 } 7 });
分析下代碼,這個Vue須要的參數傳遞是一個{}對象;裏面的el和data是參數名稱;el對應的是咋們的頁面上某個塊元素的id(好比div,table的id屬性);data對應的是數據源;msg是咋們自定義的數據源名稱;好了咋們再來看一下對應的html代碼和效果圖:api
1 <h3>Vue - 學習大雜燴</h3> 2 <hr /> 3 <div class="container" id="appVue"> 4 <input type="text" v-model="msg" class="form-control" /> 5 </div>
效果圖:跨域
很明顯咱們初始化的數據msg(「第一個vue」)在input中體現出來了,細看一下這個input標籤的屬性多了一個v-model屬性,而且她對應的值是咋們初始化定義的msg,因而可知v-model起到了數據綁定做用;好咋們再來吧數據值弄複雜點,在data中再增長一個json格式的數組如:數組
1 blogs: [ 2 { title: "webapi" }, 3 { title: "wcf" }, 4 { title: "mvc" } 5 ]
而後咋們增長以下的html:mvc
1 <ul> 2 <li class="text-left " v-for="(blog,index) in blogs">{{index}} - {{blog.title}}</li> 3 </ul>
直接刷新頁面,看下效果圖:
從結果可以看出咋們定義的數據,直接被遍歷展現在了頁面,再來分析下具體的代碼,相比較普通的li元素,此時多了一個v-for屬性,而且對一個的值有一個這樣的語法規則 (obj,index) in arr ,就相似於for循環的寫法而且還有一個遍歷編號index,有了循環那確定須要把值展現出來,這個時候能夠看到li元素子級裏面的寫法是 {{index}} - {{blog.title}} ,來分析下寫法規則:
1. {{}}是輸出文本的格式,其中包含了要輸出的對象
2. 參數index對應就是v-for裏面的index,對應的值是遍歷的序號,從0開始
3. blog.title對應的是v-for裏面的blog,和她對應的自定義屬性title
由上面{{}}數據綁定寫法,不得不引出咱們對她的好奇心,這種寫法其實在不少js數據綁定框架中都相同(好比:angularjs),下面咱們來作一個相加的小例子來更深入記住這種寫法,首先在剛纔的data屬性中增長兩個屬性x和y:
1 data: { 2 msg: "第一個vue", 3 blogs: [ 4 { title: "webapi" }, 5 { title: "wcf" }, 6 { title: "mvc" } 7 ], 8 x: 444, 9 y: 2 10 },
而後增長以下html代碼:
1 <input type="text" v-model="x" /> * <input type="text" v-model="y" /> = {{x * y}}
屬性頁面執行下效果:
由此可以看出 {{x * y}} 容許表達式,而且當我文本框中的x或y值修改後,此{{x*y}}會自動從新計算,有點相似於咱們本身寫的js計算後從新賦值到顯示框中的概念;下面咱們來看vue中怎麼定義一個方法,這裏用到她的一個屬性methods,咱們定義以下的代碼:
1 var app = new Vue({ 2 3 el: "#appVue", 4 data: { 5 msg: "第一個vue", 6 blogs: [ 7 { title: "webapi" }, 8 { title: "wcf" }, 9 { title: "mvc" } 10 ], 11 x: 444, 12 y: 2 13 }, 14 methods: { 15 showMsg: function () {17 this.msg = "我是" + this.msg; 18 } 19 }
}
再來增長以下的html元素, <button v-on:click="showMsg" class="btn">點擊</button> ,好了再來看下運行的效果圖而且屢次點擊按鈕:
獲得的效果是,一直在咋們 v-model="msg" 文本框中增長「我是」,這裏獲得的結論是按鈕出發了咱們定義在vue中methods中的方法showMsg,再來看下按鈕上的這個屬性 v-on:click 就是用來表示綁定點擊事件的,這裏的v-on:click能夠縮寫成@click,因爲我在vs中的mvc試圖模板不支持這種寫法,因此本篇仍是使用v-on這種寫法來綁定事件;咱們再來用一用她的過濾器,這裏咋們仍是在vue中增長以下filters的代碼,定義一個大小寫的過濾器:
1 filters: { 2 toUpper: function (val, isUpper) { 3 if (!val) { return ""; } 4 5 return isUpper ? val.toUpperCase() : val.toLowerCase(); 6 } 7 }
爲了方便看效果,咱們修改上面的v-model="msg"的文本框代碼以下:
1 <input type="text" v-model="msg" class="form-control" />{{msg|toUpper(true)}}<br />{{msg|toUpper(false)}}
咱們在文本框中增長了一個 {{msg|toUpper(true)}} 寫法,細心朋友能發下後面的toUpper就是咱們剛纔定義的過濾器的方法,傳遞了一個參數true,而後看下效果圖:
經過使用不一樣參數的filter的對比,能看出咱們過濾器在此實例中的效果,這裏注意的是在msg後面直接使用‘|’隔開就能夠增長咱們定義的過濾器了,若是多個以此類推使用‘|’追加隔開就好了,還有就是咱們定義的 toUpper: function (val, isUpper) 方法中有兩個參數,第一個參數就是綁定的msg自己,第二個參數纔是咱們須要手動傳遞的,這個必定要分開;時間很少了,這裏就再也不講解其餘的經常使用的特性和屬性了,直接來看下面vue使用webapi的數據體現的一個例子;
» WebApi + Vue.js 示例
首先,這裏用到了Vue提供的組件概念component,她和js變量同樣有全局和局部(私有)兩種,代碼方面差距不是很大效果也同樣,這裏咱們用到的是局部方式來定義一個組件,下面先來看總體代碼:
1 var blogApp = new Vue({ 2 el: "#divBlogs", 3 data: { 4 blogs: [] 5 }, 6 methods: { 7 getBlogs: function () { 8 9 var that = this; 10 $.getJSON("http://www.lovexins.com:1001/api/values?task=2", function (result) { 11 if (!result) { return; } 12 that.blogs = result; 13 }); 14 } 15 }, 16 components: { 17 "div-blog": { 18 props: ["item"], 19 template: '<div class=" bs-callout bs-callout-danger">' + 20 ' <h4>' + 21 ' <a v-bind:href="item.Url" target="_blank">{{item.Title | toUpperOrLower(false)}}</a>' + 22 ' </h4>' + 23 ' <p>' + 24 ' {{item.Des}}' + 25 ' </p>' + 26 ' <hr />' + 27 ' <h5>' + 28 ' 做者:<a v-bind:href="item.BlogUrl" target="_blank">{{item.NickName}}</a> 發佈時間:<code>{{item.CreateTime}}</code> 推薦:<code>{{item.ZanNum}}</code> 閱讀:<code>{{item.ReadNum}}</code> 評論:<code>{{item.CommiteNum}}</code>' + 29 ' </h5>' + 30 ' </div>', 31 filters: { 32 toUpperOrLower: function (val, isUpper) { 33 if (!val) { return ""; } 34 35 return isUpper ? val.toUpperCase() : val.toLowerCase(); 36 } 37 } 38 } 39 } 40 });
這裏定義的格式和上面第一小節使用到的差很少,只是多了一個components的定義,這個就是組件的關鍵字,咋們來逐一分析下代碼步驟;
1. blogs: []是咱們定義的一個博客信息數組
2. methods屬性中getBlogs方法用到了一段 var that = this; 這樣的代碼,這裏的this是上面建立的 var blogApp = new Vue() 對象,她能夠直接使用data中定義的博客數據數組blogs,所以有了下面經過jquery的getJSON獲取webapi數據後,直接賦值給博客數組bolgs
3. components組件中自定義了一個名爲「div-blog」的組件,參數名稱是props定義的item;template是對應的模板,裏面能夠直接使用item來獲取對應的參數值;
4. 這裏也定義了一個filters,一樣是轉大小寫的,寫法能夠忽略了,主要注意的地方這裏局部的定義的主鍵裏面使用filters的時候也一樣是 {{item.Title | toUpperOrLower(false)}} 格式
好了經過上面總結注意點,咋們再來看下怎麼在html中使用這個自定義的組件呢,以下總體html代碼:
1 <div class="row" id="divBlogs"> 2 <div class="col-md-12"> 3 <button v-on:click="getBlogs" class="btn btn-default">查 詢</button> 4 <div-blog v-for="blog in blogs" v-bind:item="blog"></div-blog> 5 6 <div style="position:fixed; right:0px; bottom:10px; width:44px; height:40px; background-color:#F8F8F8; font-weight:100; cursor:pointer;" id="toTop" onclick="toTop()"> 7 <img title="返 回" style="width:38px;height:38px;border:1px solid #ccc" src="http://121.42.208.152/images/top.png"> 8 </div> 9 </div> 10 </div>
引用自定義組件的代碼就一句: <div-blog v-for="blog in blogs" v-bind:item="blog"></div-blog> ,這裏的div-blog就是對應上面總結的第3點說的,自定義主鍵名稱,須要注意的是若是自定義組件名稱格式如divBlog(駝峯格式),那麼咱們在html中使用格式就必須是div-Blog,經過‘-’分割開來,這個細節特別要注意否則頁面不會有效果,好了說了這麼多來看下運行的效果圖:
這裏我用的是上一篇博客開放出來抓取博客園首頁數據的接口:http://www.lovexins.com:1001/api/values?task=2,後臺設置了容許跨域請求,若是各位有興趣能夠直接使用該數據,順便再發下本次實例的線上地址:http://www.lovexins.com:1001/home/vue,但願各位喜歡,一樣但願各位多多點「推薦」