Vue.js有什么用

這篇文章主要介紹Vue.js有什么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

首先，咋們要學(xué)習(xí)一個(gè)js框架，那么肯定要引入該框架的基礎(chǔ)庫(kù)，這里我創(chuàng)建一個(gè)頁(yè)面并且引用官網(wǎng)的庫(kù)是：

<script src="https://unpkg.com/vue/dist/vue.js"></script>

下面我們來(lái)看一段Vue的基礎(chǔ)使用代碼：

var app = new Vue({
 el: "#appVue",
 data: {
 msg: "第一個(gè)vue",
 }
 });

分析下代碼，這個(gè)Vue需要的參數(shù)傳遞是一個(gè){}對(duì)象；里面的el和data是參數(shù)名稱；el對(duì)應(yīng)的是咋們的頁(yè)面上某個(gè)塊元素的id（比如div，table的id屬性）；data對(duì)應(yīng)的是數(shù)據(jù)源；msg是咋們自定義的數(shù)據(jù)源名稱；好了咋們?cè)賮?lái)看一下對(duì)應(yīng)的html代碼和效果圖：

 <h4>Vue - 學(xué)習(xí)大雜燴</h4>
 <hr />
 <div class="container" id="appVue">
 <input type="text" v-model="msg" class="form-control" />
 </div>

效果圖：

很明顯我們初始化的數(shù)據(jù)msg(“第一個(gè)vue”)在input中體現(xiàn)出來(lái)了，細(xì)看一下這個(gè)input標(biāo)簽的屬性多了一個(gè)v-model屬性，并且她對(duì)應(yīng)的值是咋們初始化定義的msg，由此可見v-model起到了數(shù)據(jù)綁定作用；好咋們?cè)賮?lái)吧數(shù)據(jù)值弄復(fù)雜點(diǎn)，在data中再增加一個(gè)json格式的數(shù)組如：

blogs: [
 { title: "webapi" },
 { title: "wcf" },
 { title: "mvc" }
 ]

然后咋們?cè)黾尤缦碌膆tml：

 <ul>
 　　<li class="text-left " v-for="(blog,index) in blogs">{{index}} - {{blog.title}}</li>
 </ul>

直接刷新頁(yè)面，看下效果圖：

從結(jié)果能夠看出咋們定義的數(shù)據(jù)，直接被遍歷展示在了頁(yè)面，再來(lái)分析下具體的代碼，相比較普通的li元素，此時(shí)多了一個(gè)v-for屬性，并且對(duì)一個(gè)的值有一個(gè)這樣的語(yǔ)法規(guī)則 (obj,index) in arr ，就類似于for循環(huán)的寫法并且還有一個(gè)遍歷編號(hào)index，有了循環(huán)那肯定需要把值展示出來(lái)，這個(gè)時(shí)候可以看到li元素子級(jí)里面的寫法是 {{index}} - {{blog.title}} ，來(lái)分析下寫法規(guī)則：

1. {{}}是輸出文本的格式，其中包含了要輸出的對(duì)象

2. 參數(shù)index對(duì)應(yīng)就是v-for里面的index，對(duì)應(yīng)的值是遍歷的序號(hào)，從0開始

3. blog.title對(duì)應(yīng)的是v-for里面的blog，和她對(duì)應(yīng)的自定義屬性title

由上面{{}}數(shù)據(jù)綁定寫法，不得不引出我們對(duì)她的好奇心，這種寫法其實(shí)在很多js數(shù)據(jù)綁定框架中都相同（比如：angularjs），下面我們來(lái)做一個(gè)相加的小例子來(lái)更深刻記住這種寫法，首先在剛才的data屬性中增加兩個(gè)屬性x和y：

data: {
 msg: "第一個(gè)vue",
 blogs: [
 { title: "webapi" },
 { title: "wcf" },
  { title: "mvc" }
 ],
 x: 444,
 y: 2
 },

然后增加如下html代碼：

<input type="text" v-model="x" /> * <input type="text" v-model="y" /> = {{x *  y}}

屬性頁(yè)面執(zhí)行下效果：

由此能夠看出 {{x * y}} 允許表達(dá)式，并且當(dāng)我文本框中的x或y值修改后，此{(lán){x*y}}會(huì)自動(dòng)重新計(jì)算，有點(diǎn)類似于我們自己寫的js計(jì)算后重新賦值到顯示框中的概念；下面我們來(lái)看vue中怎么定義一個(gè)方法，這里用到她的一個(gè)屬性methods，我們定義如下的代碼：

var app = new Vue({
 el: "#appVue",
 data: {
 msg: "第一個(gè)vue",
 blogs: [
 { title: "webapi" },
 { title: "wcf" },
  { title: "mvc" }
 ],
 x: 444,
 y: 2
 },
 methods: {
 showMsg: function () {17  this.msg = "我是" + this.msg;
 }
 }
}

再來(lái)增加如下的html元素，

<button v-on:click="showMsg" class="btn">點(diǎn)擊</button>

好了再來(lái)看下運(yùn)行的效果圖并且多次點(diǎn)擊按鈕：

得到的效果是，一直在咋們 v-model="msg" 文本框中增加“我是”，這里得到的結(jié)論是按鈕出發(fā)了我們定義在vue中methods中的方法showMsg，再來(lái)看下按鈕上的這個(gè)屬性 v-on:click 就是用來(lái)表示綁定點(diǎn)擊事件的，這里的v-on:click可以縮寫成@click，由于我在vs中的mvc試圖模板不支持這種寫法，所以本篇還是使用v-on這種寫法來(lái)綁定事件；我們?cè)賮?lái)用一用她的過濾器，這里咋們還是在vue中增加如下filters的代碼，定義一個(gè)大小寫的過濾器：

filters: {
 toUpper: function (val, isUpper) {
 if (!val) { return ""; }
 return isUpper ? val.toUpperCase() : val.toLowerCase();
 }
 }

為了方便看效果，我們修改上面的v-model="msg"的文本框代碼如下：

<input type="text" v-model="msg" class="form-control" />{{msg|toUpper(true)}}<br />{{msg|toUpper(false)}}

我們?cè)谖谋究蛑性黾恿艘粋€(gè) {{msg|toUpper(true)}} 寫法，細(xì)心朋友能發(fā)下后面的toUpper就是我們剛才定義的過濾器的方法，傳遞了一個(gè)參數(shù)true，然后看下效果圖：

通過使用不同參數(shù)的filter的對(duì)比，能看出我們過濾器在此實(shí)例中的效果，這里注意的是在msg后面直接使用‘|'隔開就可以增加我們定義的過濾器了，如果多個(gè)以此類推使用‘|'追加隔開就行了，還有就是我們定義的 toUpper: function (val, isUpper) 方法中有兩個(gè)參數(shù)，第一個(gè)參數(shù)就是綁定的msg本身，第二個(gè)參數(shù)才是我們需要手動(dòng)傳遞的，這個(gè)一定要分開；時(shí)間不多了，這里就不再講解其他的常用的特性和屬性了，直接來(lái)看下面vue使用webapi的數(shù)據(jù)體現(xiàn)的一個(gè)例子；

» WebApi + Vue.js 示例

首先，這里用到了Vue提供的組件概念component，她和js變量一樣有全局和局部（私有）兩種，代碼方面差距不是很大效果也一樣，這里我們用到的是局部方式來(lái)定義一個(gè)組件，下面先來(lái)看整體代碼：

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: '<div class=" bs-callout bs-callout-danger">' +
  ' <h5>' +
  ' <a v-bind:href="item.Url" target="_blank">{{item.Title | toUpperOrLower(false)}}</a>' +
  ' </h5>' +
  ' <p>' +
  ' {{item.Des}}' +
  ' </p>' +
  ' <hr />' +
  ' <h6>' +
  ' 作者：<a v-bind:href="item.BlogUrl" target="_blank">{{item.NickName}}</a> 發(fā)布時(shí)間：<code>{{item.CreateTime}}</code> 推薦：<code>{{item.ZanNum}}</code> 閱讀：<code>{{item.ReadNum}}</code> 評(píng)論：<code>{{item.CommiteNum}}</code>' +
  ' </h6>' +
  ' </div>',
 filters: {
  toUpperOrLower: function (val, isUpper) {
  if (!val) { return ""; }

  return isUpper ? val.toUpperCase() : val.toLowerCase();
  }
 }
 }
 }
 });

這里定義的格式和上面第一小節(jié)使用到的差不多，只是多了一個(gè)components的定義，這個(gè)就是組件的關(guān)鍵字，咋們來(lái)逐一分析下代碼步驟；

1. blogs: []是我們定義的一個(gè)博客信息數(shù)組

2. methods屬性中g(shù)etBlogs方法用到了一段 var that = this; 這樣的代碼，這里的this是上面創(chuàng)建的 var blogApp = new Vue() 對(duì)象，她可以直接使用data中定義的博客數(shù)據(jù)數(shù)組blogs，因此有了下面通過jquery的getJSON獲取webapi數(shù)據(jù)后，直接賦值給博客數(shù)組bolgs

3. components組件中自定義了一個(gè)名為“div-blog”的組件，參數(shù)名稱是props定義的item；template是對(duì)應(yīng)的模板，里面可以直接使用item來(lái)獲取對(duì)應(yīng)的參數(shù)值；

4. 這里也定義了一個(gè)filters，同樣是轉(zhuǎn)大小寫的，寫法可以忽略了，主要注意的地方這里局部的定義的主鍵里面使用filters的時(shí)候也同樣是 {{item.Title | toUpperOrLower(false)}} 格式

好了通過上面總結(jié)注意點(diǎn)，咋們?cè)賮?lái)看下怎么在html中使用這個(gè)自定義的組件呢，如下整體html代碼：

<div class="row" id="divBlogs">
 <div class="col-md-12">
 <button v-on:click="getBlogs" class="btn btn-default">查 詢</button>
 <div-blog v-for="blog in blogs" v-bind:item="blog"></div-blog>
 <div  id="toTop" onclick="toTop()">
 <img title="返 回"  src="http://121.42.208.152/images/top.png">
 </div>
 </div>
</div>

引用自定義組件的代碼就一句：

 <div-blog v-for="blog in blogs" v-bind:item="blog"></div-blog>

這里的div-blog就是對(duì)應(yīng)上面總結(jié)的第3點(diǎn)說(shuō)的，自定義主鍵名稱，需要注意的是如果自定義組件名稱格式如divBlog(駝峰格式)，那么我們?cè)趆tml中使用格式就必須是div-Blog，通過‘-'分割開來(lái)，這個(gè)細(xì)節(jié)特別要注意不然頁(yè)面不會(huì)有效果，好了說(shuō)了這么多來(lái)看下運(yùn)行的效果圖：

以上是“Vue.js有什么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！