1. 基礎(chǔ)語法

Vue.js使用聲明式渲染、組件化、指令等一系列概念來構(gòu)建前端應(yīng)用，以下是一些Vue.js的基本語法和概念：

1.1 聲明式渲染

Vue.js 使用了基于HTML的模板語法，允許你聲明式地將 DOM 綁定到底層 Vue 實例的數(shù)據(jù)上。

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

當(dāng) Vue 實例被創(chuàng)建時，它將掛載點內(nèi)的DOM與數(shù)據(jù)綁定通過一些指令與特殊的屬性連接起來。

1.2 條件與循環(huán)

用 v-if 進行條件渲染，用 v-for 進行列表渲染。

<div id="app">
  <p v-if="seen">Now you see me</p>
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
    seen: true,
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

如果 seen 的值為 false，那么 <p> 標(biāo)簽不會被渲染，列表中的內(nèi)容會根據(jù) todos 數(shù)組動態(tài)生成。

1.3 事件處理

可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時執(zhí)行一些 JavaScript 代碼。

<div id="app">
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

點擊按鈕后，reverseMessage 方法將被調(diào)用，數(shù)據(jù) message 的內(nèi)容將被反轉(zhuǎn)。

1.4 雙向數(shù)據(jù)綁定

Vue.js 提供了一個指令 v-model 實現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定。

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

用戶輸入的每一個字符都會立即更新到 message 并反映到 <p> 標(biāo)簽里。

1.5 組件化

組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。

// 定義名為 todo-item 的新組件
Vue.component('todo-item', {
  template: '<li>This is a todo item</li>'
})

現(xiàn)在你可以在一個父級組件模板中以自定義元素 <todo-item> 的形式使用它了。

<ol>
  <!-- 創(chuàng)建一個 todo-item 組件的實例 -->
  <todo-item></todo-item>
</ol>

Vue 的組件結(jié)構(gòu)允許我們以不同的方式組合組件來構(gòu)建強大的應(yīng)用。

以上是Vue的基本概念和常用語法的介紹，Vue的設(shè)計思想很大程度上是讓開發(fā)者能夠?qū)Ｗ⒂趹?yīng)用的數(shù)據(jù)邏輯，而不需要直接操作DOM，從而簡化了前端開發(fā)的復(fù)雜度。

2. 模板語法

Vue.js 使用了基于 HTML 的模板語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實例的數(shù)據(jù)，所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析，vue將模板編譯成虛擬dom，結(jié)合響應(yīng)系統(tǒng)，Vue 能夠智能地計算出最少需要重新渲染多少組件，并把 DOM 操作次數(shù)減到最少。

• html模板語法：
  這是一種基于字符串的模板技術(shù),以字符串和數(shù)據(jù)為輸入,通過用正則表達式將占位符替換為所需數(shù)據(jù)的方式,構(gòu)建出完整的 HTML 字符串。

2.1 插值

2.1.1 文本

使用 {{msg}}的形式，標(biāo)簽將會被替換成為數(shù)據(jù)對象（data）上msg屬性值，當(dāng)綁定的數(shù)據(jù)對象上的msg屬性值發(fā)生變化時，插值處的值也會發(fā)生變化（雙向綁定）

2.1.2 html

{{}}的方式將數(shù)據(jù)處理為普通文本，如果要輸出html，需要使用v-html指令
示例：
在data中定義一個html屬性，其值為html

data: {
    html:  '<input type="text" value="hello"/>'
}

在html中取值

<span v-html="html"></span>

2.1.3 屬性

HTML屬性中的值應(yīng)使用v-bind指令，類型與jQuery中的$("#xxx").attr(propName, propVal)
示例，以修改元素的class屬性為例：
定義一個樣式

<style>
.redClass {
    font-size: 30px;
    color: red;
}
</style>

在data中定義一個屬性，其值為上面定義的樣式名

data: {
    red: 'redClass'
}

在html使用v-bind指令設(shè)置樣式

<p>設(shè)置之前:  aaaa</p>
<p>設(shè)置之后: <span v-bind:class="red">aaa</span></p>

在瀏覽器中可以看到相應(yīng)的效果

2.1.4 表達式

幾種常見的表達式：

{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }} 三元運算符
<li v-bind:>我的Id是js動態(tài)生成的</li>

示例1：
在html中加入元素，定義表達式

<span>{{str.substr(0,6).toUpperCase()}}</span>

在data中加入一個屬性，名為str與html中對應(yīng)

data: {
    str: 'hello vue'
}

查看效果：字符串被截取，并轉(zhuǎn)換為大寫

示例2：

<span>{{ number + 1 }}</span>

在data中加入一個屬性，名為str與html中對應(yīng)

data: {
    number: 10
}

在data中定義的number值將會被加1

示例3：
這是一個三元運算，如果ok為true，表達式值為YES ，如果ok為false則表達式值為NO

<span>{{ ok ? 'YES' : 'NO' }}</span>

在data中加入一個屬性，名為str與html中對應(yīng)

data: {
    ok: true
}

示例4：
演示id屬性綁定和動態(tài)賦值

<p>
    <input type="text" v-bind:id="bookId"/></br>
    <!--動態(tài)生成Id-->
    <input type="text" v-bind:id="'bookList_' + id"/>
</p>

data: {
    bookId: 'book001',
    id: 'book002'
}

該示例可以通過開發(fā)者工具查看生成的id屬性值。

2.2 指令

指令指的是帶有“v-"前綴的特殊屬性

2.2.1 核心指令

2.2.1.1 v-if |v-else-if|v-else

根據(jù)其后表達式的bool值進行判斷是否渲染該元素， 指令特性的值預(yù)期是單個 JavaScript 表達式 (v-for 是例外情況，稍后我們再討論)

示例：
HTML

<div v-if="type === 'A'">
    type == A
</div>
<div v-else-if="type === 'B'">
    type == B
</div>
<div v-else>
    other value
</div>

JS

var vm = new Vue({

       el: '#app',

       data: {
           type: 'C'
       }
   });

可以修改data中的type值觀察頁面的輸出。

注： js = == === 之間的區(qū)別
一個等號是賦值操作，==先轉(zhuǎn)換類型再比較，===先判斷類型，如果不是同一類型直接為false
alert(1 == “1”); // true
alert(1 === “1”); // false

2.2.1.2 v-show

與v-if類似，只是不會渲染其身后表達式為false的元素，而且會給這樣的元素添加css代碼：style="display:none"。
當(dāng)v-show 表達式true則顯示，否則不顯示。
注意：使用v-show，雖然不顯示，但在頁面的dom中是存在的，只是display屬性為none
示例： 在HTML中加入如下內(nèi)容

<div v-show="show === 'yes'">
    show == yes
</div>

在data中定義show屬性

var vm = new Vue({
    el: '#app',
    data: {
        show: 'yes' 
    }
});

修改show值，觀察頁面顯示

2.2.1.3 v-for

循環(huán)遍歷

遍歷數(shù)組: v-for="item in items", items是數(shù)組，item為數(shù)組中的數(shù)組元素
遍歷對象: v-for="(value,key,index) in stu", value屬性值, key屬性名，index下標(biāo)

示例：
定義一個div，使用v-for指令輸出，items是vue實例中data中定義的對象數(shù)組

<!--數(shù)組-->
<div v-for="item in items">
     {{item.name}} -- {{item.id}}
</div>

<!--循環(huán)生成下拉列表-->
<div>
    <select >
        <option v-for="item in items" 
            v-bind:value="item.id">{{item.name}}</option>
    </select>
</div>

<!--對象-->
<div v-for="(o,key) in obj">
    {{key}}-{{o}}
</div>

var vm = new Vue({

    el: '#app',

    data: {
        itmes:[
            {name: 'zs',age:18},
            {name: 'ww',age:19},
            {name: 'ls',age:20},
            {name: 'zl',age:21}
        ],
        obj: {
            name:'張三',
            age: 21,
            addr: 'xxxx'
        }
    }
});

2.2.1.4 v-on|v-model|v-for

創(chuàng)建一組多選框，可以獲取到用戶選擇項

<!--
循環(huán)生成一組多選按鈕，v-model通過vue的雙向綁定將用戶選擇的項保存到
定義的selected組數(shù)中
-->
<div v-for="(item,index) in items">
    {{index}}:<input type="checkbox" v-bind:value="item.id"
            v-model="selected">{{item.name}}
</div>
<button v-on:click="getSelected()">獲取選擇</button>

var vm = new Vue({

    el: '#app',

    data: {
        type: 'C',
        show: 'no',
        items:[
            {name: '天津',id:18},
            {name: '昆明',id:19},
            {name: '武漢',id:20},
            {name: '南京',id:21}
        ],
        obj: {
            name:'張三',
            age: 21,
            addr: 'xxxx'
        },
        selected:[]
    },
    methods: {
        getSelected: function() {
            console.log(this.selected);
        }
    }
});

2.2.1.5 參數(shù) v-bind:href,v-on:click

示例：

<!--參數(shù)：href-->
<div>
    <a v-bind:href="url">baidu</a>
</div>

<!--
參數(shù)：動態(tài)參數(shù).
attname需要在data中定義,
注意：attname要全部小寫!!
-->
<div>
    <a v-bind:[attrname]="url">baidu</a>
    <button v-on:[evname]="clickme">點我看看</button>
</div>

注意：在動態(tài)參數(shù)中，作為參數(shù)的變量名（如：attrname）要全部小寫，否則無效 ?。?/em>

var vm = new Vue({

    el: '#app',

    data: {

        url: 'https://www.baidu.com',
        attrname:'href',
        evname: 'click'
    },

    methods: {
        clickme: function() {
            console.log("點到我了");
        }
    }

});