vue系列基礎篇（一）

伊澤瑞爾發表於2018-08-29
Vue

Vue基礎篇

Vue是什麼?

vue是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

Vue環境搭建

這裡我們引用官方推薦的開發庫，下面是一個基礎的vue開發環境。

<!doctype html>
<html lang="en">
<head>
  <title>vue基礎環境</title>
</head>
<body>
<div id="app">
  {{ test }}
</div>
</body>
<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      test: 'Hello Vue!'    
    }
  })
</script>
</html>
複製程式碼

基礎語法

Vue.js 的核心是一個允許採用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統。這裡解釋一下，可以在頁面上使用this（vue）物件上的變數和函式，可以使用原生js方法，js表示式，一切符合js語法的單行js都能執行。下面的例子進行一些舉例。

html部分：

  <!--使用{{}}，在頁面上是用了this下的test變數，並執行了一個js原生的Math.random方法-->
  <div>{{ Math.random(test + 1) }}</div>
  <!--這裡使用v-bind和v-on分別繫結了一個變數和一個事件,意思是，當clickCount < 0 時，那麼按鈕就具有disabled屬性。當點選按鈕是，會執行clickCount方法-->
  <button v-bind:disabled="count < 0" v-on:click="clickCount">試著點選我</button>
  <!--上面的程式碼可以簡寫-->
  <button :disabled="count < 0" @click="clickCount">試著點選我</button>
  <!--指令，指令可以用內建指令，也可以自定義指令,這裡用v-text給p標籤渲染一個count值，後面會具體講指令-->
  <p v-text="count"></p>
複製程式碼

js部分：

var app = new Vue({
    el: '#app',
    data: {
      count:5
    },
    methods:{              //所有掛載在this物件上的方法，可以在頁面上使用
      clickCount(){
        this.count -= 1
      }
    }
  })
複製程式碼

最後執行結果：

執行結果

當我們點選按鈕5次以後，按鈕就不能被點選。 說明disabled屬性啟到了作用，也說明，vue的變數繫結的特性。

內建指令

vue內建了多個指令，指令能直接作用到頁面上，而且能使用上面講到的所有語法。v-text、v-html、v-if、v-show、v-for、v-model是常用的內建指令，指令還可以使用自定義指令，後面會講到。

html:

<!--使用v-html渲染一段html-->
  <h5 class="title">v-html測試</h5>
  <p v-html="template"></p>
  <!--v-if判斷是否顯示，v-els展示了相反的情況-->
  <h5 class="title">v-if,v-else測試</h5>
  <template v-if="count > 2">
    <p>我不顯示</p>
  </template>
  <template v-else>
    <p>我顯示了</p>
  </template>
  <!--v-show判斷是否顯示-->
  <h5 class="title">v-show測試</h5>
  <p v-show="count > 2">我顯示了</p>
  <!--v-for來迴圈渲染一段程式碼-->
  <h5 class="title">v-for測試</h5>
  <ul>
    <li v-for="i in count">{{i}}</li>
  </ul>
  <!--v-model來繫結一個輸入框的變數，具有雙向繫結-->
  <h5 class="title">
    v-model測試:
  </h5>
  <span>輸入count的值：</span><input type="number" v-model.number="count">
複製程式碼

js部分：

var app = new Vue({
    el: '#app',
    data: {
      count:5,
      template:"<span>我是測試</span>"
    },
    methods:{              //所有掛載在this物件上的方法，可以在頁面上使用
      clickCount(){
        if(this.count < 2){
          return
        }
        this.count -= 1

      }
    }
  })
複製程式碼

最後看一下執行效果：

內建指令測試

可以看到，上面所有的指令，都會被cout變數影響或者改變，這裡提一下，v-if和v-show的區別，v-if可以作用在template這個內建元件上，可以不對html結構產生影響，並可以結合v-else-if和v-else使用。v-show就是一段thml的顯示和隱藏。他們的渲染順序不一樣，v-if是在需要的時候才開始渲染，而v-show是一開始就渲染了裡面的html。

v-mode指令，一般是繫結在表單上，如input、testarea、radio、select等可以讓使用者輸入或改變的demo上。這種變數就具有雙向繫結，意思是使用者輸入的，能馬上被js捕獲到，而js改變的，就能馬上展現在頁面上。上面的count變數就具有著一特性。

Class 與 Style 繫結

class和style的繫結在vue裡面比較特殊，但是比較常用，這裡具體講一下。 html程式碼：

<!--class測試-->
  <div class="title" :class="{'active':count > 2,'active1':getCount,'test':1}">:class測試</div>
  <!--style測試-->
  <div class="title1" :style="[{'height':getCount() ? '20px' : '40px'},styleObj]">:style測試</div>
複製程式碼

js部分：

data: {
      count:5,
      styleObj:{
        'font-size':'20px',
        'color':'red'
      },
    },
    methods:{              //所有掛載在this物件上的方法，可以在頁面上使用
      getCount(){
        return true
      }
    }
複製程式碼

最後我們看一下渲染的html程式碼：

渲染結果

可以看到，:class和:style支援物件語法和陣列語法，能否拿到對應的樣式和class都覺得表示式後面的值是true還是false。語法裡面完全支援vue的基礎語法，能執行函式，能支援單行表示式，根據表示式結果渲染html.

元件基礎

元件是vue的核心功能，這裡做基礎講解，後面會單獨出一片詳細的元件。元件：意思是說，我把一段公共的模組提出處理，封裝在一起，然後在多個頁面去引用這個模組，從而達到避免寫重複程式碼的目的。

html程式碼：

<!--這裡在box1和box2中都引用元件button-counter-->
  <h5>元件示例：</h5>
  <div class="box1" style="margin: 20px 0;">
    <button-counter></button-counter>
  </div>
  <div class="box2">
    <button-counter></button-counter>
  </div>
複製程式碼

js程式碼：

// 註冊一個全域性元件
  var clickTimes = {
    data: function () {
      return {
        myCount: 0
      }
    },
    template: '<button v-on:click="myCount++">You clicked me {{ myCount }} times.</button>'
  }
複製程式碼

這裡寫圖片描述

可以看到，我們在box1和box2中都引用了元件button-counter，然後可以發現他們獨立執行，並且相互不影響。後面會專門講一下，元件傳參，父子元件相互訪問等問題。這裡就簡單講一下。

總結

上面的原始碼可以在我的github上下載：github.com/jackzhujie/…

這裡寫圖片描述

相關文章