聲明:本文章并非原創(chuàng)矢棚，而是參考黑馬程序員Vue.js教程配套資料徙鱼，僅供學(xué)習(xí)使用，侵刪惭聂。

Vue.js 學(xué)習(xí)筆記

什么是Vue.js

Vue.js 是目前最火的一個(gè)前端框架窗声，React是最流行的一個(gè)前端框架（React除了開發(fā)網(wǎng)站，還可以開發(fā)手機(jī)App辜纲， Vue語法也是可以用于進(jìn)行手機(jī)App開發(fā)的笨觅，需要借助于Weex）
Vue.js 是前端的主流框架之一，和Angular.js侨歉、React.js 一起屋摇，并成為前端三大主流框架！
Vue.js 是一套構(gòu)建用戶界面的框架幽邓，只關(guān)注視圖層，它不僅易于上手火脉，還便于與第三方庫或既有項(xiàng)目整合牵舵。（Vue有配套的第三方類庫柒啤，可以整合起來做大型項(xiàng)目的開發(fā)）
前端的主要工作？

主要負(fù)責(zé)MVC中的V這一層畸颅；主要工作就是和界面打交道担巩，來制作前端頁面效果；

為什么要學(xué)習(xí)流行框架

企業(yè)為了提高開發(fā)效率：在企業(yè)中没炒，時(shí)間就是效率涛癌，效率就是金錢；
提高開發(fā)效率的發(fā)展歷程：原生JS -> Jquery之類的類庫 -> 前端模板引擎 -> Angular.js / Vue.js（能夠幫助我們減少不必要的DOM操作送火；提高渲染效率拳话；雙向數(shù)據(jù)綁定的概念【通過框架提供的指令，我們前端程序員只需要關(guān)心數(shù)據(jù)的業(yè)務(wù)邏輯种吸，不再關(guān)心DOM是如何渲染的了】）

框架和庫的區(qū)別

框架：是一套完整的解決方案弃衍；對項(xiàng)目的侵入性較大，項(xiàng)目如果需要更換框架坚俗，則需要重新架構(gòu)整個(gè)項(xiàng)目镜盯。
庫（插件）：提供某一個(gè)小功能，對項(xiàng)目的侵入性較小猖败，如果某個(gè)庫無法完成某些需求速缆，可以很容易切換到其它庫實(shí)現(xiàn)需求。

Node（后端）中的 MVC 與前端中的 MVVM 之間的區(qū)別

image

MVC 是后端的分層開發(fā)概念恩闻；
MVVM是前端視圖層的概念激涤，主要關(guān)注于視圖層分離，也就是說：MVVM把前端的視圖層判呕，分為了三部分 Model, View , VM ViewModel

mark

Vue指令

v-cloak

數(shù)據(jù)綁定倦踢，使用 v-cloak 能夠解決插值表達(dá)式閃爍的問題

<style>
    [v-cloak] {
       display: none; 
    }
</style>
<p v-cloak>{{ msg }}</p>

v-text

數(shù)據(jù)綁定，默認(rèn) v-text 是沒有閃爍問題的

v-text會覆蓋元素中原本的內(nèi)容侠草，但是插值表達(dá)式只會替換自己的這個(gè)占位符辱挥，不會把整個(gè)元素的內(nèi)容清空

<!--msg: '123'-->
<div v-text="msg2"></div>

v-html

v-html 可以將用字符串表達(dá)的html結(jié)構(gòu)渲染成html

<!--msg2: '<h1>哈哈，我是一個(gè)大大的H1边涕， 我大晤碘，我驕傲</h1>'-->
<div v-html="msg2">1212112</div>

v-html也會覆蓋元素中原本的內(nèi)容

v-bind

屬性綁定(v-bind 中，可以寫合法的JS表達(dá)式)

直接使用指令v-bind
使用簡化指令:
在綁定的時(shí)候功蜓，拼接綁定內(nèi)容：:title="btnTitle + ', 這是追加的內(nèi)容'"

v-on

事件綁定

1.縮寫:@

2.事件修飾符:

.stop 阻止冒泡
.prevent 阻止默認(rèn)事件
.capture 添加事件偵聽器時(shí)使用事件捕獲模式
.self 只當(dāng)事件在該元素本身（比如不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào)
.once 事件只觸發(fā)一次

3.案例:跑馬燈效果

HTML結(jié)構(gòu)：

<div id="app">

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

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

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

  </div>

Vue實(shí)例：

    // 創(chuàng)建 Vue 實(shí)例园爷，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        info: '猥瑣發(fā)育，別浪~式撼！',

        intervalId: null

      },

      methods: {

        go() {

          // 如果當(dāng)前有定時(shí)器在運(yùn)行童社，則直接return

          if (this.intervalId != null) {

            return;

          }

          // 開始定時(shí)器

          this.intervalId = setInterval(() => {

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

          }, 500);

        },

        stop() {

          clearInterval(this.intervalId);

        }

      }
    });

v-model

唯一一個(gè)可以實(shí)現(xiàn)雙向數(shù)據(jù)綁定的指令

案例:簡易計(jì)算器

HTML 代碼結(jié)構(gòu)

  <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>

Vue實(shí)例代碼：

    // 創(chuàng)建 Vue 實(shí)例，得到 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;

          }

        }
      }

    });

v-for

迭代數(shù)組

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

迭代對象中的屬性

    <!-- 循環(huán)遍歷對象身上的屬性 -->

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

迭代數(shù)字

<p v-for="i in 10">這是第 {{i}} 個(gè)P標(biāo)簽</p>

注意:在2.2.0+ 的版本里著隆，當(dāng)在組件中使用 v-for 時(shí)扰楼，key 現(xiàn)在是必須的呀癣。

當(dāng) Vue.js 用 v-for 正在更新已渲染過的元素列表時(shí)，它默認(rèn)用 “就地復(fù)用” 策略弦赖。如果數(shù)據(jù)項(xiàng)的順序被改變项栏，Vue將不是移動 DOM 元素來匹配數(shù)據(jù)項(xiàng)的順序，而是簡單復(fù)用此處每個(gè)元素蹬竖，并且確保它在特定索引下顯示已被渲染過的每個(gè)元素沼沈。

為了給 Vue 一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份币厕，從而重用和重新排序現(xiàn)有元素列另，你需要為每項(xiàng)提供一個(gè)唯一 key 屬性。

v-if和v-show

一般來說劈榨，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗访递。因此，如果需要頻繁切換 v-show 較好同辣，如果在運(yùn)行時(shí)條件不大可能改變 v-if 較好拷姿。

在Vue中使用樣式

使用class樣式

數(shù)組

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

數(shù)組中使用三元表達(dá)式

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

數(shù)組中嵌套對象

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

直接使用對象

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

使用內(nèi)聯(lián)樣式

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

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

將樣式對象旱函，定義到 data 中响巢，并直接引用到 :style 中

在data上定義樣式：

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

在元素中，通過屬性綁定的形式棒妨，將樣式對象應(yīng)用到元素中：

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

在 :style 中通過數(shù)組踪古，引用多個(gè) data 上的樣式對象

在data上定義樣式：

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

在元素中，通過屬性綁定的形式券腔，將樣式對象應(yīng)用到元素中：

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

Vue.js 學(xué)習(xí)筆記（一）

Vue.js 學(xué)習(xí)筆記（一）

Vue.js 學(xué)習(xí)筆記

什么是Vue.js

為什么要學(xué)習(xí)流行框架

框架和庫的區(qū)別

Node（后端）中的 MVC 與前端中的 MVVM 之間的區(qū)別

Vue指令

v-cloak

v-text

v-html

v-bind

v-on

v-model

v-for

v-if和v-show

在Vue中使用樣式

使用class樣式

使用內(nèi)聯(lián)樣式

Vue.js 學(xué)習(xí)筆記（一）

Vue.js 學(xué)習(xí)筆記

什么是Vue.js

為什么要學(xué)習(xí)流行框架

框架和庫的區(qū)別

Node（后端）中的 MVC 與 前端中的 MVVM 之間的區(qū)別

Vue指令

v-cloak

v-text

v-html

v-bind

v-on

v-model

v-for

v-if和v-show

在Vue中使用樣式

使用class樣式

使用內(nèi)聯(lián)樣式

Node（后端）中的 MVC 與前端中的 MVVM 之間的區(qū)別