本文實(shí)例講述了Vue入門基本概念與使用。分享給大家供大家參考，具體如下：

1. Vue.js是什么?

1). 一位華裔前Google工程師(尤雨溪)開發(fā)的前端js庫

2). 作用: 動態(tài)構(gòu)建用戶界面

3). 特點(diǎn):

* 遵循MVVM模式
* 編碼簡潔, 體積小, 運(yùn)行效率高, 移動/PC端開發(fā)
* 它本身只關(guān)注UI, 可以輕松引入vue插件和其它第三庫開發(fā)項(xiàng)目

4). 與其它框架的關(guān)聯(lián):

* 借鑒angular的模板和數(shù)據(jù)綁定技術(shù)
* 借鑒react的組件化和虛擬DOM技術(shù)

5). vue包含一系列的擴(kuò)展插件(庫):

* vue-cli: vue腳手架
* vue-resource(axios): ajax請求
* vue-router: 路由
* vuex: 狀態(tài)管理
* vue-lazyload: 圖片懶加載
* vue-scroller: 頁面滑動相關(guān)
* mint-ui: 基于vue的組件庫(移動端)
* element-ui: 基于vue的組件庫(PC端)

2. 基本使用

1). 引入vue.js

2). 創(chuàng)建Vue實(shí)例對象(vm), 指定選項(xiàng)(配置)對象

el : 指定dom標(biāo)簽容器的選擇器
data : 指定初始化狀態(tài)數(shù)據(jù)的對象/函數(shù)(返回一個(gè)對象)

3). 在頁面模板中使用{{}}或vue指令

3. Vue對象的選項(xiàng)

1). el

指定dom標(biāo)簽容器的選擇器

Vue就會管理對應(yīng)的標(biāo)簽及其子標(biāo)簽

2). data

對象或函數(shù)類型

指定初始化狀態(tài)屬性數(shù)據(jù)的對象

vm也會自動擁有data中所有屬性

頁面中可以直接訪問使用

數(shù)據(jù)代理: 由vm對象來代理對data中所有屬性的操作(讀/寫)

3). methods

包含多個(gè)方法的對象

供頁面中的事件指令來綁定回調(diào)

回調(diào)函數(shù)默認(rèn)有event參數(shù), 但也可以指定自己的參數(shù)

所有的方法由vue對象來調(diào)用, 訪問data中的屬性直接使用this.xxx

4). computed

包含多個(gè)方法的對象

對狀態(tài)屬性進(jìn)行計(jì)算返回一個(gè)新的數(shù)據(jù), 供頁面獲取顯示

一般情況下是相當(dāng)于是一個(gè)只讀的屬性

利用set/get方法來實(shí)現(xiàn)屬性數(shù)據(jù)的計(jì)算讀取, 同時(shí)監(jiān)視屬性數(shù)據(jù)的變化

如何給對象定義get/set屬性

在創(chuàng)建對象時(shí)指定:

get name () {return xxx} / set name (value) {}

對象創(chuàng)建之后指定:

Object.defineProperty(obj, age, {get(){}, set(value){}})

5). watch

包含多個(gè)屬性監(jiān)視的對象

分為一般監(jiān)視和深度監(jiān)視

'xxx' : {
    deep : true,
    handler : fun(value)
}

另一種添加監(jiān)視方式:

vm.$watch('xxx', funn)

4. 過渡動畫

利用vue去操控css的transition/animation動畫

模板: 使用<transition name='xxx'>包含帶動畫的標(biāo)簽

css樣式

.fade-enter-active: 進(jìn)入過程, 指定進(jìn)入的transition
.fade-leave-active: 離開過程, 指定離開的transition
.xxx-enter, .xxx-leave-to: 指定隱藏的樣式

編碼例子

  .xxx-enter-active, .xxx-leave-active {
   transition: opacity .5s
  }
  .xxx-enter, .xxx-leave-to {
   opacity: 0
  }

  <transition name="xxx">
   <p v-if="show">hello</p>
  </transition>

5. 生命周期

vm/組件對象

生命周期圖

主要的生命周期函數(shù)(鉤子)

created() / mounted(): 啟動異步任務(wù)(啟動定時(shí)器,發(fā)送ajax請求, 綁定監(jiān)聽)
beforeDestroy(): 做一些收尾的工作

6. 自定義過濾器

1). 理解

對需要顯示的數(shù)據(jù)進(jìn)行格式化后再顯示

2). 編碼

1). 定義過濾器

Vue.filter(filterName, function(value[,arg1,arg2,...]){
 // 進(jìn)行一定的數(shù)據(jù)處理
 return newValue
})

2). 使用過濾器

<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>

7. vue內(nèi)置指令

v-text/v-html: 指定標(biāo)簽體

        * v-text : 當(dāng)作純文本
        * v-html : 將value作為html標(biāo)簽來解析

v-if v-else v-show: 顯示/隱藏元素

        * v-if : 如果vlaue為true, 當(dāng)前標(biāo)簽會輸出在頁面中
        * v-else : 與v-if一起使用, 如果value為false, 將當(dāng)前標(biāo)簽輸出到頁面中
        * v-show: 就會在標(biāo)簽中添加display樣式, 如果vlaue為true, display=block, 否則是none

v-for : 遍歷

        * 遍歷數(shù)組 : v-for="(person, index) in persons"  
        * 遍歷對象 : v-for="value in person"   $key

v-on : 綁定事件監(jiān)聽

       * v-on:事件名, 可以縮寫為: @事件名
        * 監(jiān)視具體的按鍵: @keyup.keyCode   @keyup.enter
        * 停止事件的冒泡和阻止事件默認(rèn)行為: @click.stop   @click.prevent
        * 隱含對象: $event

v-bind : 強(qiáng)制綁定解析表達(dá)式  

        * html標(biāo)簽屬性是不支持表達(dá)式的, 就可以使用v-bind
        * 可以縮寫為:  :id='name'
        * :class
          * :class="a"
                * :class="{classA : isA, classB : isB}"
                * :class="[classA, classB]"
        * :style
                :style="{color : color}"

v-model

        * 雙向數(shù)據(jù)綁定
        * 自動收集用戶輸入數(shù)據(jù)

ref : 標(biāo)識某個(gè)標(biāo)簽

        * ref='xxx'
        * 讀取得到標(biāo)簽對象: this.$refs.xxx

8. 自定義指令

1). 注冊全局指令

Vue.directive('my-directive', function(el, binding){
 el.innerHTML = binding.value.toUpperCase()
})

2). 注冊局部指令

directives : {
 'my-directive' : function(el, binding) {
   el.innerHTML = binding.value.toUpperCase()
 }
}

3). 使用指令

<div v-my-directive='xxx'>

希望本文所述對大家vue.js程序設(shè)計(jì)有所幫助。

最新評論