Vue.js有什么用
這篇文章主要介紹Vue.js有什么用，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián) 專業(yè)提供成都主機托管四川主機托管成都服務(wù)器托管四川服務(wù)器托管，支持按月付款！我們的承諾：貴族品質(zhì)、平民價格，機房位于中國電信/網(wǎng)通/移動機房，服務(wù)器托管機柜 服務(wù)有保障！
首先，咋們要學(xué)習(xí)一個js框架，那么肯定要引入該框架的基礎(chǔ)庫，這里我創(chuàng)建一個頁面并且引用官網(wǎng)的庫是：
下面我們來看一段Vue的基礎(chǔ)使用代碼：
var app = new Vue({
el: "#appVue",
data: {
msg: "第一個vue",
}
}); 分析下代碼，這個Vue需要的參數(shù)傳遞是一個{}對象；里面的el和data是參數(shù)名稱；el對應(yīng)的是咋們的頁面上某個塊元素的id（比如div，table的id屬性）；data對應(yīng)的是數(shù)據(jù)源；msg是咋們自定義的數(shù)據(jù)源名稱；好了咋們再來看一下對應(yīng)的html代碼和效果圖：
Vue - 學(xué)習(xí)大雜燴
效果圖：
很明顯我們初始化的數(shù)據(jù)msg(“第一個vue”)在input中體現(xiàn)出來了，細看一下這個input標簽的屬性多了一個v-model屬性，并且她對應(yīng)的值是咋們初始化定義的msg，由此可見v-model起到了數(shù)據(jù)綁定作用；好咋們再來吧數(shù)據(jù)值弄復(fù)雜點，在data中再增加一個json格式的數(shù)組如：
blogs: [
{ title: "webapi" },
{ title: "wcf" },
{ title: "mvc" }
] 然后咋們增加如下的html：
{{index}} - {{blog.title}}
直接刷新頁面，看下效果圖：
從結(jié)果能夠看出咋們定義的數(shù)據(jù)，直接被遍歷展示在了頁面，再來分析下具體的代碼，相比較普通的li元素，此時多了一個v-for屬性，并且對一個的值有一個這樣的語法規(guī)則 (obj,index) in arr ，就類似于for循環(huán)的寫法并且還有一個遍歷編號index，有了循環(huán)那肯定需要把值展示出來，這個時候可以看到li元素子級里面的寫法是 {{index}} - {{blog.title}} ，來分析下寫法規(guī)則：
1. {{}}是輸出文本的格式，其中包含了要輸出的對象
2. 參數(shù)index對應(yīng)就是v-for里面的index，對應(yīng)的值是遍歷的序號，從0開始
3. blog.title對應(yīng)的是v-for里面的blog，和她對應(yīng)的自定義屬性title
由上面{{}}數(shù)據(jù)綁定寫法，不得不引出我們對她的好奇心，這種寫法其實在很多js數(shù)據(jù)綁定框架中都相同（比如：angularjs），下面我們來做一個相加的小例子來更深刻記住這種寫法，首先在剛才的data屬性中增加兩個屬性x和y：
data: {
msg: "第一個vue",
blogs: [
{ title: "webapi" },
{ title: "wcf" },
{ title: "mvc" }
],
x: 444,
y: 2
}, 然后增加如下html代碼：
屬性頁面執(zhí)行下效果：
由此能夠看出 {{x * y}} 允許表達式，并且當我文本框中的x或y值修改后，此{{x*y}}會自動重新計算，有點類似于我們自己寫的js計算后重新賦值到顯示框中的概念；下面我們來看vue中怎么定義一個方法，這里用到她的一個屬性methods，我們定義如下的代碼：
var app = new Vue({
el: "#appVue",
data: {
msg: "第一個vue",
blogs: [
{ title: "webapi" },
{ title: "wcf" },
{ title: "mvc" }
],
x: 444,
y: 2
},
methods: {
showMsg: function () {17 this.msg = "我是" + this.msg;
}
}
} 再來增加如下的html元素，
點擊
好了再來看下運行的效果圖并且多次點擊按鈕：
得到的效果是，一直在咋們 v-model="msg" 文本框中增加“我是”，這里得到的結(jié)論是按鈕出發(fā)了我們定義在vue中methods中的方法showMsg，再來看下按鈕上的這個屬性 v-on:click 就是用來表示綁定點擊事件的，這里的v-on:click可以縮寫成@click，由于我在vs中的mvc試圖模板不支持這種寫法，所以本篇還是使用v-on這種寫法來綁定事件；我們再來用一用她的過濾器，這里咋們還是在vue中增加如下filters的代碼，定義一個大小寫的過濾器：
filters: {
toUpper: function (val, isUpper) {
if (!val) { return ""; }
return isUpper ? val.toUpperCase() : val.toLowerCase();
}
} 為了方便看效果，我們修改上面的v-model="msg"的文本框代碼如下：
我們在文本框中增加了一個 {{msg|toUpper(true)}} 寫法，細心朋友能發(fā)下后面的toUpper就是我們剛才定義的過濾器的方法，傳遞了一個參數(shù)true，然后看下效果圖：
通過使用不同參數(shù)的filter的對比，能看出我們過濾器在此實例中的效果，這里注意的是在msg后面直接使用‘|'隔開就可以增加我們定義的過濾器了，如果多個以此類推使用‘|'追加隔開就行了，還有就是我們定義的 toUpper: function (val, isUpper) 方法中有兩個參數(shù)，第一個參數(shù)就是綁定的msg本身，第二個參數(shù)才是我們需要手動傳遞的，這個一定要分開；時間不多了，這里就不再講解其他的常用的特性和屬性了，直接來看下面vue使用webapi的數(shù)據(jù)體現(xiàn)的一個例子；
» WebApi + Vue.js 示例
首先，這里用到了Vue提供的組件概念component，她和js變量一樣有全局和局部（私有）兩種，代碼方面差距不是很大效果也一樣，這里我們用到的是局部方式來定義一個組件，下面先來看整體代碼：
var blogApp = new Vue({
el: "#divBlogs",
data: {
blogs: []
},
methods: {
getBlogs: function () {
var that = this;
$.getJSON("http://www.lovexins.com:1001/api/values?task=2", function (result) {
if (!result) { return; }
that.blogs = result;
});
}
},
components: {
"div-blog": {
props: ["item"],
template: '' +
' ' +
' {{item.Title | toUpperOrLower(false)}}' +
' ' +
' ' +
' {{item.Des}}' +
'
' +
' ' +
' 作者：{{item.NickName}} 發(fā)布時間：{{item.CreateTime}} 推薦：{{item.ZanNum}} 閱讀：{{item.ReadNum}} 評論：{{item.CommiteNum}}' +
' ' +
' ',
filters: {
toUpperOrLower: function (val, isUpper) {
if (!val) { return ""; }
return isUpper ? val.toUpperCase() : val.toLowerCase();
}
}
}
}
});
1. blogs: []是我們定義的一個博客信息數(shù)組
2. methods屬性中g(shù)etBlogs方法用到了一段 var that = this; 這樣的代碼，這里的this是上面創(chuàng)建的 var blogApp = new Vue() 對象，她可以直接使用data中定義的博客數(shù)據(jù)數(shù)組blogs，因此有了下面通過jquery的getJSON獲取webapi數(shù)據(jù)后，直接賦值給博客數(shù)組bolgs
3. components組件中自定義了一個名為“div-blog”的組件，參數(shù)名稱是props定義的item；template是對應(yīng)的模板，里面可以直接使用item來獲取對應(yīng)的參數(shù)值；
4. 這里也定義了一個filters，同樣是轉(zhuǎn)大小寫的，寫法可以忽略了，主要注意的地方這里局部的定義的主鍵里面使用filters的時候也同樣是 {{item.Title | toUpperOrLower(false)}} 格式
重慶分公司
重慶分公司
