01-vue指令

什麼是Vue.js

• Vue.js 是目前最火的一個前端框架，React是最流行的一個前端框架（React除了開發網站，還能夠開發手機App， Vue語法也是能夠用於進行手機App開發的，須要藉助於Weex）

• Vue.js 是前端的主流框架之一，和Angular.js、React.js 一塊兒，併成爲前端三大主流框架！

• Vue.js 是一套構建用戶界面的框架，只關注視圖層，它不只易於上手，還便於與第三方庫或既有項目整合。（Vue有配套的第三方類庫，能夠整合起來作大型項目的開發）

框架和庫的區別

• 框架：是一套完整的解決方案；對項目的侵入性較大，項目若是須要更換框架，則須要從新架構整個項目。

• 庫（插件）：提供某一個小功能，對項目的侵入性較小，若是某個庫沒法完成某些需求，能夠很容易切換到其它庫實現需求。

Vue指令之v-text和v-html

v-cloak : 可以解決插值表達式的網速不佳時的閃爍問題
v-text  : 1.沒有閃爍問題
          2.會覆蓋元素原有的值
v-html  ：1.會覆蓋元素原有的值
          2.渲染html元素

Vue指令之v-bind的三種用法

v-bind ：用於綁定屬性的指令，綁定的值符合js編碼規範

1. 直接使用指令v-bind

2. 使用簡化指令 :

3. 在綁定的時候，拼接綁定內容：:title="btnTitle + ', 這是追加的內容'"

4. v-bind 縮寫

        

<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

 

Vue指令之v-on

v-on   ：用於綁定事件

   v-on 縮寫

<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>

 

 

案例：跑馬燈效果

1.html解構

<div id="app">

    <p>{{info}}</p>

    <input type="button" value="開啓" v-on:click="go">

    <input type="button" value="中止" v-on:click="stop">

  </div>

 2. vue實例

    // 建立 Vue 實例，獲得 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        info: '猥瑣發育，別浪~！',

        intervalId: null

      },

      methods: {

        go() {

          // 若是當前有定時器在運行，則直接return

          if (this.intervalId != null) {

            return;

          }

          // 開始定時器

          this.intervalId = setInterval(() => {

            this.info = this.info.substring(1) + this.info.substring(0, 1);

          }, 500);

        },

        stop() {

          clearInterval(this.intervalId);

        }

      }

    });

Vue指令之事件修飾符

事件修飾符：

• .stop 阻止冒泡

• .prevent 阻止默認事件

• .capture 添加事件偵聽器時使用事件捕獲模式

• .self 只當事件在該元素自己（好比不是子元素）觸發時觸發回調

• .once 事件只觸發一次

Vue指令之v-model和雙向數據綁定

v-model : 實現表單元素 和 model 中數據的雙向綁定
*注意：只能運用在表單元素中*


案例：簡易計算器
1.html結構

<div id="app">

    <input type="text" v-model="n1">

    <select v-model="opt">

      <option value="0">+</option>

      <option value="1">-</option>

      <option value="2">*</option>

      <option value="3">÷</option>

    </select>

    <input type="text" v-model="n2">

    <input type="button" value="=" v-on:click="getResult">

    <input type="text" v-model="result">

  </div>

2.vue實例

// 建立 Vue 實例，獲得 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        n1: 0,

        n2: 0,

        result: 0,

        opt: '0'

      },

      methods: {

        getResult() {

          switch (this.opt) {

            case '0':

              this.result = parseInt(this.n1) + parseInt(this.n2);

              break;

            case '1':

              this.result = parseInt(this.n1) - parseInt(this.n2);

              break;

            case '2':

              this.result = parseInt(this.n1) * parseInt(this.n2);

              break;

            case '3':

              this.result = parseInt(this.n1) / parseInt(this.n2);

              break;

          }

        }

      }

    });

 

在Vue中使用樣式

　　-使用class樣式

1. 數組

　　<h1 :class="['red', 'thin']">這是一個邪惡的H1</h1>

　　2.數組中使用三元表達式

<h1 :class="['red', 'thin', isactive?'active':'']">這是一個邪惡的H1</h1>

　　3.數組中嵌套對象

<h1 :class="['red', 'thin', {'active': isactive}]">這是一個邪惡的H1</h1>

　　4.直接使用對象

<h1 :class="{red:true, italic:true, active:true, thin:true}">這是一個邪惡的H1</h1>

 

　　-使用內聯樣式

1. 直接在元素上經過 :style 的形式，書寫樣式對象

<h1 :style="{color: 'red', 'font-size': '40px'}">這是一個善良的H1</h1>

　　2.將樣式對象，定義到 data 中，並直接引用到 :style 中

• 在data上定義樣式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}

• 在元素中，經過屬性綁定的形式，將樣式對象應用到元素中：

<h1 :style="h1StyleObj">這是一個善良的H1</h1>

　　3.在 :style 中經過數組，引用多個 data 上的樣式對象

• 在data上定義樣式：

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
}

• 在元素中，經過屬性綁定的形式，將樣式對象應用到元素中：

<h1 :style="[h1StyleObj, h1StyleObj2]">這是一個善良的H1</h1>

 

Vue指令之v-for和key屬性

1. 迭代數組

<ul>
  <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年齡：{{item.age}}</li>
</ul>

　　  2.迭代對象中的屬性

<div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>

　　  3.迭代數字

<p v-for="i in 10">這是第 {{i}} 個P標籤</p>

***注意***

　　2.2.0+ 的版本里，當在組件中使用 v-for 時，key 如今是必須的。

　　

當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用 「就地複用」 策略。若是數據項的順序被改變，Vue將不是移動 DOM 元素來匹配數據項的順序， 而是簡單複用此處每一個元素，而且確保它在特定索引下顯示已被渲染過的每一個元素。

爲了給 Vue 一個提示，以便它能跟蹤每一個節點的身份，從而重用和從新排序現有元素，你須要爲每項提供一個惟一 key 屬性

Vue指令之v-if和v-show

v-if ： 條件爲假，移除元素，條件爲真，建立元素  *注意：存在較高的性能消耗*v-show :  條件爲假，隱藏元素，條件爲真，顯示元素  *注意：存在較高的初始渲染消耗*