前端主流框架vue學(xué)習(xí)筆記第一篇

更新時(shí)間：2017年07月26日 16:12:40 作者：JerremyZhang

一步一步學(xué)Vue，這篇文章為大家分享了第一篇前端主流框架vue學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

vue應(yīng)該是前端主流框架中的集大成者，它吸取了knockout，angular，react設(shè)置avalon的經(jīng)驗(yàn)，支持各種模式寫(xiě)法，入門(mén)很簡(jiǎn)單，從本章開(kāi)始，會(huì)記錄學(xué)習(xí)vue中的點(diǎn)點(diǎn)滴滴，以筆記的形式形成博文。

1、Hello World

和任何框架一樣，使用前必先引入，我們這里直接使用cdn資源,創(chuàng)建index.html,編寫(xiě)如下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>demo1</title>
  <script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>
</head>
<body>
  <div id="app">
    {{message}}
  </div>
  <script>
    new Vue({
      el:'#app',
      data:{
        message:'hello world'
      }
    })
  </script>
</body>
</html>

雙擊文件運(yùn)行：

咱們分析一下上述代碼，一句簡(jiǎn)單的{{message}}，就把數(shù)據(jù)綁定到到了dom中，我不會(huì)說(shuō)好神奇，因?yàn)槲沂煜ngular，我知道angular也是簡(jiǎn)單一個(gè)指令就可以做到，這里和angular在使用上做一個(gè)類(lèi)比，可以看到，在當(dāng)前的代碼中創(chuàng)建Vue對(duì)象的時(shí)候，傳遞的參數(shù){el:'#id',data:{message:'hellow'}},其中el是vue掛載的元素，也就是作用的范圍和anglar中ng-app的概念類(lèi)似，都是創(chuàng)建一個(gè)根作用域，data對(duì)象可以類(lèi)比angular中的$scope,$scope對(duì)象在angular中是連接controller和view的橋梁，那么data對(duì)象就是代理vue對(duì)象中數(shù)據(jù)和template的橋梁。

2、TODO LIST

由于有angular的經(jīng)驗(yàn)，不會(huì)按部就班的過(guò)vue的文檔，那樣也沒(méi)什么意思，這里以todolist作為Hello world的延伸，由于和angular類(lèi)似的數(shù)據(jù)驅(qū)動(dòng)的特點(diǎn)，我們不需要關(guān)注如何操作dom，我們只要設(shè)計(jì)viewmode即可，todolist，首先我們要有todo item ，所以

var todoItem=function(title,desc){
      this.title=title;
      this.desc=desc;
    }

另外todolist 是包含CURD的，所以我們需要一個(gè)表單，用來(lái)新增todoItem，基于此修改index.html,添加表單部分：

<div id="app">
    <form>
      <input type="text" v-model="title"> <br>
      <input type="text" v-model="desc"> <br/>
      <input type="button" value="add todo item" v-on:click="addItem()" />
    </form>
  </div>

對(duì)上述代碼做一下簡(jiǎn)單說(shuō)明：v-model類(lèi)似angular中ng-model，實(shí)現(xiàn)雙向數(shù)據(jù)綁定，當(dāng)然這里都是語(yǔ)法糖，vue內(nèi)部做了很多工作，和angular2+中的[(ngModel)]類(lèi)似，通過(guò)屬性和事件實(shí)現(xiàn)了雙向綁定效果，v-on:click="addItem()" ,其中v-on:是事件綁定指令，后面click是參數(shù)，可以縮寫(xiě)為@click="addItem()" ,可以類(lèi)比angular中ng-click。

接下來(lái)，繼續(xù)完善我們的viewmodel，todoitem已經(jīng)設(shè)計(jì)完成，現(xiàn)在我們?cè)黾觮odolist結(jié)構(gòu)，todolist中包含多個(gè)todoitem，是todoitem集合，在javascript中，體現(xiàn)為Array，基于此修改我們的代碼，如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>demo1</title>
  <script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>
</head>

<body>
  <div id="app">
    <form>
      title:<input type="text" v-model="title"> <br>
      desc:<input type="text" v-model="desc"> <br/>
      <input type="button" value="add todo item" v-on:click="addItem()" />
    </form>
  </div>
  <script>
    var TodoItem = function (title, desc) {
      this.title = title;
      this.desc = desc;
    }
    new Vue({
      el: '#app',
      data: {
        todolist:[],
        title:'',
        desc:''
      },
      methods:{
        addItem:function(){
          this.todolist.push(new TodoItem(this.title,this.desc))

          this.title=this.desc='';

          console.log(JSON.stringify(this.todolist));
        }
      }
    })
  </script>
</body>

</html>

上述代碼中出現(xiàn)了新的屬性methods，和angular中不同，angular中事件也是綁定在$scope對(duì)象中的，只不過(guò)值是function而已，在vue中，對(duì)事件綁定和屬性綁定進(jìn)行了區(qū)分，分別使用data和methods代理，這樣也在邏輯上更清晰，指責(zé)上更單一，所以事件綁定的回調(diào)函數(shù)都代理在methods中。

刷新頁(yè)面，輸入表單項(xiàng)，打開(kāi)控制臺(tái)可以看到輸出項(xiàng)，運(yùn)行結(jié)果入下圖所示：

結(jié)果和我們預(yù)期的一樣，接著我們把結(jié)果以列表的形式渲染出來(lái)，在angular中，我們一般通過(guò)ng-repeat指令，實(shí)現(xiàn)列表渲染，那么在vue中，有沒(méi)有類(lèi)似的指令呢，查文檔發(fā)現(xiàn)的確有一指令叫做v-for，用法和作用都和ng-repeat類(lèi)似，基于ng-repeat經(jīng)驗(yàn)，我們使用v-for對(duì)todolist進(jìn)行渲染，修改代碼如下：

<table style="width:300px;border-collapse:collapse" border="1">
      <tr>
        <th>title</th>
        <th>desc</th>
      </tr>
      <tr v-for="todoItem in todolist">
        <td>{{todoItem.title}}</td>
        <td>{{todoItem.desc}}</td>
      </tr>
    </table>

刷新運(yùn)行，在表單中輸入后，點(diǎn)擊add todo item，向數(shù)組添加元素，及動(dòng)態(tài)刷新了列表：

有添加就有刪除，接下來(lái)，我們列表中，增加刪除操作，和所有mvvm框架一樣，我們考慮的出發(fā)點(diǎn)一定要規(guī)避dom，一定要從數(shù)據(jù)驅(qū)動(dòng)UI的方式來(lái)思考，如果刪掉UI項(xiàng)，那么根據(jù)數(shù)據(jù)驅(qū)動(dòng)UI的理念那么就是刪掉數(shù)組項(xiàng)，框架會(huì)自動(dòng)幫我們處理dom，基于此修改代碼如下：

<table style="width:300px;border-collapse:collapse" border="1">
      <tr>
        <th>title</th>
        <th>desc</th>
        <th></th>
      </tr>
      <tr v-for="(todoItem,index) in todolist">
        <td>{{todoItem.title}}</td>
        <td>{{todoItem.desc}}</td>
        <td><input type="button" value="remove" @click="remove(index)" /></td>
      </tr>
    </table>

如果按照我們以前angular的使用經(jīng)驗(yàn)，這里增加的方式有些區(qū)別，angular在ng-repeat中有內(nèi)置變量$index,所以在事件處理上，我們就會(huì)通過(guò)$index作為數(shù)組項(xiàng)索引，事件綁定也會(huì)類(lèi)似ng-click="remove($index)",在vue中就有些區(qū)別了，但是卻符合數(shù)組遍歷的方式，大家應(yīng)該知道數(shù)組方法，比如map等，參數(shù)是一個(gè)function，其中包含兩個(gè)參數(shù)，第一個(gè)參數(shù)是value，第二個(gè)參數(shù)是index是一個(gè)道理，從這一點(diǎn)上說(shuō)，這樣寫(xiě)很符合道理，因?yàn)檫@本身就是一個(gè)循環(huán)遍歷，同樣vue對(duì)象methods中添加remove方法。

new Vue({
      el: '#app',
      data: {
        todolist:[],
        title:'',
        desc:''
      },
      methods:{
        addItem:function(){
          this.todolist.push(new TodoItem(this.title,this.desc))

          this.title=this.desc='';

        },
        remove:function(index){
          this.todolist.splice(index,1);
        }

      }
    })

刷新運(yùn)行頁(yè)面：

完整代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>demo1</title>
  <script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script>
  <style>
    table{
      margin-top: 5px;
      width:300px;
      border-collapse: collapse;
      border: 1px solid #ccc; 
    }
    table > tr>th,table>tr>td{
      height: 25px;
      line-height: 25px;
    }

  </style>
</head>

<body>
  <div id="app">
    <form>
      title:<input type="text" v-model="title"> <br>
      desc:<input type="text" v-model="desc"> <br/>
      <input type="button" value="add todo item" v-on:click="addItem()" />
    </form>
    <table style="width:300px;border-collapse:collapse" border="1">
      <tr>
        <th>title</th>
        <th>desc</th>
        <th></th>
      </tr>
      <tr v-for="(todoItem,index) in todolist">
        <td>{{todoItem.title}}</td>
        <td>{{todoItem.desc}}</td>
        <td><input type="button" value="remove" @click="remove(index)" /></td>
      </tr>
    </table>
  </div>
  <script>
    var TodoItem = function (title, desc) {
      this.title = title;
      this.desc = desc;
    }
    new Vue({
      el: '#app',
      data: {
        todolist:[],
        title:'',
        desc:''
      },
      methods:{
        addItem:function(){
          this.todolist.push(new TodoItem(this.title,this.desc))

          this.title=this.desc='';

        },
        remove:function(index){
          this.todolist.splice(index,1);
        }

      }
    })
  </script>
</body>

</html>

今天就先到這里，增刪改查，查詢(xún)和修改還沒(méi)有，放在（二）中進(jìn)行添加吧，敬請(qǐng)期待。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: