成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

<ul id="kgy0a"></ul>

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

立即前往

首頁/文章專欄/Vue.js起手式+Vue小作品實戰(zhàn)

Vue.js起手式+Vue小作品實戰(zhàn)

付倫發(fā)布于2019-08-01 16:07 / 2151人閱讀

摘要：本文是小羊根據(jù)文檔進(jìn)行解讀的第一篇文章，主要內(nèi)容涵蓋的基礎(chǔ)部分的知識的，文章順序基本按照官方文檔的順序，每個知識點現(xiàn)附上代碼，然后根據(jù)代碼給予個人的一些理解，最后還放上在線編輯的代碼以供練習(xí)和測試之用在最后，我參考上的一篇技博，對進(jìn)行初入的

本文是小羊根據(jù)Vue.js文檔進(jìn)行解讀的第一篇文章，主要內(nèi)容涵蓋Vue.js的基礎(chǔ)部分的知識的，文章順序基本按照官方文檔的順序，每個知識點現(xiàn)附上代碼，然后根據(jù)代碼給予個人的一些理解，最后還放上在線編輯的代碼以供練習(xí)和測試之用；
在最后，我參考SegmentFault上的一篇技博，對Vue進(jìn)行初入的實戰(zhàn)，目的是將新鮮學(xué)到的知識立即派上用場；

如果你還是前端的小白，相信這篇文章可能會對產(chǎn)生一些幫助和引起思想的碰撞，因為大家的學(xué)習(xí)歷程是相似的，遇到的困惑也有一定的共通性，如果文章出現(xiàn)謬誤之處，歡迎各位童鞋及時指正；

1. Vue.js是什么

Vue.js（讀音 /vju?/, 類似于?view）是一套構(gòu)建用戶界面的?漸進(jìn)式框架。與其他重量級框架不同的是Vue 的核心庫只關(guān)注視圖層。
Vue.js 的目標(biāo)是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

Vue.js是一種MVVM框架，其中html是view層，js是model層，通過vue.js（使用v-model這個指令）完成中間的底層邏輯，實現(xiàn)綁定的效果。改變其中的任何一層，另外一層都會改變；

2.Vue的基本語法

2.1 Vue構(gòu)造函數(shù)開啟Vue之旅

通過構(gòu)造函數(shù)Vue創(chuàng)建一個Vue的根實例


---
var vm = new Vue({
  //options
  el:"#el",
  data:{},
  methods:{}
})
---
//擴(kuò)展Vue構(gòu)造器
var MyComponent = Vue.extend({
    //擴(kuò)展選項
})
var vm = new MyComponent({})

解讀：

使用Vue構(gòu)造函數(shù)創(chuàng)建一個Vue實例，然后通過Vue實例的el接口實現(xiàn)和HTML元素的掛載；

構(gòu)造函數(shù)Vue需要傳入一個選項對象，可包含掛載元素、數(shù)據(jù)、方法和生命周期鉤子等；

構(gòu)造函數(shù)Vue可以通過extend方法實現(xiàn)擴(kuò)展，從而可以用預(yù)定義的選項創(chuàng)建可復(fù)用的組件構(gòu)造函數(shù)，但是構(gòu)建組件的常用方法是使用Vue.component()接口去實現(xiàn)；

2.2 Vue實例的屬性和方法

Vue實例將代理data對象的所有屬性，也就是說部署在data對象上的所有屬性和方法都將直接成為Vue實例的屬性和方法

{{message}}
  

---
var app = new Vue({
    el:"#app",
    data:{
      message:"hello world!",
      sayHello:function(){
          console.log(1)
      }
  }
})
---
//如果想要獲取到app這一實例中選項的對象，Vue提供$進(jìn)行獲取
app.$el === document.getElementById("app")//true
app.$data.message//hello world

【demo】

【TIP】
Vue實例所代理data對象上的屬性只有在實例創(chuàng)建的同時進(jìn)行初始化才具有響應(yīng)式更新，若在實例創(chuàng)建之后添加是不會觸發(fā)視圖更新的；

2.3數(shù)據(jù)綁定操作

綁定文本和HTML


    {{msg}}
    

---
var app  = new Vue({
    el: "#app",
    data:{
      msg: "hello world!",
      hi:"hi"
  }
})

解讀：

HTML部分實現(xiàn)數(shù)據(jù)的動態(tài)綁定，這個數(shù)據(jù)是vue實例的屬性值；

JS部分的語法可以從jQuery角度去理解，相當(dāng)于創(chuàng)建一個Vue實例，這個實例指向#app，并在Vue提供的固定接口data上定義Vue實例的屬性；

使用{{message}}的mustache語法只能將數(shù)據(jù)解釋為純文本，為了輸出HTML，可以使用v-html指令；

綁定數(shù)據(jù)在元素的屬性

 
     {{message}}
  
---
var app = new Vue({
  el: "#app",
  data:{
    message: "hello world!",
    red: "color:red"
  }
})

解讀：

定義在Vue實例的data接口上的數(shù)據(jù)的綁定靈活的，可以綁定在DOM節(jié)點內(nèi)部，也可以綁在屬性上；

綁定數(shù)據(jù)到節(jié)點屬性上時，需要使用v-bind指令，這個元素節(jié)點的?title屬性和 Vue 實例的?message屬性綁定到一起，從而建立數(shù)據(jù)與該屬性值的綁定，也可以使用v-bind:href="url"的縮寫方式:href="url"；

v-once指令能夠讓你執(zhí)行一次性的插值，當(dāng)數(shù)據(jù)改變時，插值處的內(nèi)容不會更新；
【demo】

使用JS表達(dá)式處理數(shù)據(jù)

 
    {{num + 10 }}
    {{message + "jirengu"}}

---
var app = new Vue({
  el: "#app",
  data:{
    num:10,
    message: "hello world!",
    seen:true
  }
})

【demo】

使用過濾器來格式化數(shù)據(jù)


    {{message | capitalize}}
  
---
var app = new Vue({
  el: "#app",
  data:{
    message: "hello world!",
    seen:true,
  },
  filters:{
    capitalize:function(value){
      if(!value) return ""
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

【demo】

條件指令控制DOM元素的顯示操作


     {{message}}
  
---
var app = new Vue({
  el: "#app",
  data:{
    message: "hello world!",
    seen:true
  }
})

解讀：

v-if指令可以綁定一個屬性值為布爾型的屬性，當(dāng)值為真時，元素將顯示，反之則消失；

循環(huán)指令實現(xiàn)數(shù)據(jù)的遍歷

 
    
      
        {{ item.text }}
      
    

---
var app = new Vue({
  el: "#app",
  data:{
    items:[
      {text:"Vue"},
      {text:"React"},
      {text:"Angular"}
    ]
  }
})

解讀：

v-for可以綁定數(shù)組型數(shù)據(jù)進(jìn)行綁定，并使用item in items形式，從而數(shù)據(jù)的遍歷操作；

【demo】

事件綁定指令可以實現(xiàn)事件監(jiān)聽


  {{message}}
  

---
var app = new Vue({
  el: "#app",
  data:{
    message: "hello world!"
  },
  methods:{
  reverseMessage:function(){
    this.message = this.message.split("").reverse().join("")
    }
  }
})

解讀：

v-on指令用于監(jiān)聽事件操作，click="reverseMessage"定義點擊事件后執(zhí)行的回調(diào)函數(shù)；

v-on指令也可以采用縮寫方式：@click="method"

在Vue實例中，提供methods接口用于統(tǒng)一定義函數(shù)；

【demo】

小結(jié)

本章涉及Vue的基礎(chǔ)的數(shù)據(jù)綁定操作，內(nèi)容包括：

{{message}}實現(xiàn)文本數(shù)據(jù)的綁定，并且文本數(shù)據(jù)可以使用JS表達(dá)式和過濾器進(jìn)行進(jìn)一步處理；
- v-html="hi"實現(xiàn)HTML數(shù)據(jù)的綁定；

v-bind:href="url"實現(xiàn)屬性數(shù)據(jù)的綁定；

v-if="seen"和v-for="item in items"指令實現(xiàn)流程控制；

v-on:click="method"指令實現(xiàn)事件監(jiān)聽

2.4計算屬性

使用計算屬性完成一些數(shù)據(jù)計算操作

 
    Original message : {{message}}
    Reversed message : {{ReversedMessage}}
  
---
var app = new Vue({
  el: "#app",
  data:{
    message: "hello world!",
  },
  computed:{
    ReversedMessage:function(){
     return  this.message.split("").reverse().join("")
    }
  }
})

解讀：

Vue實例提供computed對象，我們可以在對象內(nèi)部定義需要進(jìn)行計算的屬性ReverseMessage，而提供的函數(shù)將作為屬性的getter，即獲取器；

上述的代碼使得app.ReverseMessage依賴于app.message；

與先前直接在{{message.split("").reverse().join("") }}使用表達(dá)式相比，它讓模板過重并且難以維護(hù)代碼；

計算屬性 VS Methods

  
    Original message : {{message}}
    Reversed message : {{ReversedMessage}}
     Reversed message:{{reversedMessage()}}   
  
---
var app = new Vue({
  el: "#app",
  data:{
    message: "hello world!",
  },
  computed:{
    ReversedMessage:function(){
     return  this.message.split("").reverse().join("")
    }
  },
  methods:{
    reversedMessage:function(){
     return  this.message.split("").reverse().join("")
    }
  }
})

解讀：

通過Vue實例的methods接口，我們在模板中調(diào)用reversedMessage函數(shù)同樣實現(xiàn)需求；

methods與computed方法的區(qū)別在于：computed的數(shù)據(jù)依賴于app.message，只要message未變，則訪問ReverseMessage計算屬性將立即返回之前的計算結(jié)果，而methods則每次重新渲染時總是執(zhí)行函數(shù)；

如果有緩存需要，請使用computed方法，否則使用methods替代；

計算屬性的setter

Vue實例的computed對象默認(rèn)只有g(shù)etter，如果你要設(shè)置數(shù)據(jù)，可以提供一個setter，即設(shè)置器；

 
    Hi,I"m{{fullName}}

---
var app = new Vue({
  el: "#app",
  data:{
    message: "hello world!",
    name:"Teren"
  },
  computed:{
    fullName:{
      get:function(){
         return this.name   
      },
      set:function(value){
        this.name = value
      }
    }
  }
})

2.5Class與Style的綁定

綁定Class


    
      Hello world!
   
 こんにちは     
   你好
    
    
Olá
    
  
---
//css
.static{
  width: 200px;
  height: 100px;
  background: #ccc;
}
.active{
  color:red;
}
.error{
  font-weight: 800;
}
---
var app = new Vue({
  el: "#app",
  data:{
   isActive:true,
   hasError:true,
   classObj:{
     static:true,
     active:true,
     error:true,
   },
  staticClass:"static",
  activeClass:"active",
  errorClass:"error",
  
  },
  computed:{
    style:function(){
      return {
        active: this.isActive,
        static:true,
        error:this.hasError
      }
    }
  },
  methods:{
    changeColor:function(){
      this.isActive = !this.isActive
    }
  }
})

解讀：

通過v-bind:class="{}"或v-bind:class=[]方式為模板綁定class

通過v-bind:class="{active:isActive,error:hasError}"綁定class，首先要在css中設(shè)置.active和,error，然后在Vue實例的data對象中設(shè)置isActive和hasError的布爾值；也可以直接傳一個對象給class,即v-bind:class="classObj，再在data對象上直接賦值:

data:{
   classObj:{
     static:true,
     active:true,
     error:true,
   }

你也可以通過傳遞數(shù)組的方式為class賦值v-bind:class="[staticClass,activeClass,errorClass]"，此時你要在data對象上為數(shù)組的元素的屬性賦值：

data:{
  staticClass:"static",
  activeClass:"active",
  errorClass:"error",
  }

【TIP】無論是哪種方式，前提都是css中的class要先設(shè)定

【demo】

綁定style

  
    Hello World!
    你好
  
---
var app = new Vue({
  el: "#app",
  data:{
    styleObj:{
    fontWeight:800,
    color:"red"
  },
    bgObj:{
      width:"100px",
      height:"80px",
      background:"#ccc"
    }
  },
})

解讀:

綁定style到模板的方法有兩種，一是v-bind:style="styleObj"，然后在data對象上定義styleObj;而是可以通過數(shù)組方式為style傳入多個樣式對象

【demo】

2.6條件渲染和列表渲染

前面簡單介紹了一下v-if、v-for和v-on指令，下面的部分將詳細(xì)介紹以上3個指令；

條件渲染


  Hello World!
  Hello Universal
  
  Show Me
  
---
var app = new Vue({
  el: "#app",
  data:{
     ok:true,
     motto:true,
  },
})

解讀：

通過v-if和v-else指令實現(xiàn)條件渲染，其中v-if="value"的valuey
要在data對象中賦布爾值，v-if支持

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Vue.js起手式+Vue小作品實戰(zhàn)

2.1 Vue構(gòu)造函數(shù)開啟Vue之旅

2.2 Vue實例的屬性和方法

2.3數(shù)據(jù)綁定操作

hi

2.4計算屬性

2.5Class與Style的綁定

2.6條件渲染和列表渲染

Steve Jobs

2.7 事件監(jiān)聽

2.8 表單控件綁定

2.9 組件

Hello World

I"m the parent title

I"m the child title

Here might be a page title

Here might be a page title

2.10 vue-resource插件

相關(guān)文章

***Vue.js起手式+Vue小作品實戰(zhàn)***

**踩坑--- 基于釘釘?shù)腤eex微應(yīng)用開發(fā)起手式（其實寫完發(fā)現(xiàn)變成Weex相關(guān)資料匯總了）**

發(fā)表評論

0條評論

付倫

男|高級講師

TA的文章

金勝維固態(tài)硬盤MK8115主控開卡成功教程

「Mobi.css」輕量，靈活的移動端 css library， built with love

Web前端開發(fā)規(guī)范文檔

js知識梳理5：關(guān)于函數(shù)的要點梳理(1)

JavaScript面向?qū)ο缶幊獭?/a>

前端面試每日3+1（周匯總2019.08.25）

防止按鈕在短時間內(nèi)被多次點擊多次觸發(fā)事件

Git常用命令小結(jié)

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

Vue.js起手式+Vue小作品實戰(zhàn)

2.1 Vue構(gòu)造函數(shù)開啟Vue之旅

2.2 Vue實例的屬性和方法

2.3數(shù)據(jù)綁定操作

hi

2.4計算屬性

2.5Class與Style的綁定

2.6條件渲染和列表渲染

Steve Jobs

2.7 事件監(jiān)聽

2.8 表單控件綁定

2.9 組件

Hello World

I"m the parent title

I"m the child title

Here might be a page title

2.10 vue-resource插件

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！