如未看
vue.js入門(1)-安裝并生成自己的vue項目可以點擊查閱一下，可能會方便您閱讀接下來的內(nèi)容。（入門1介紹安裝）
一、引入cdnCdn引入百度百科原話為：CDN的全稱是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡。CDN是構建在網(wǎng)絡之上的內(nèi)容分發(fā)網(wǎng)絡，依靠部署在各地的邊緣服務器，通過中心平臺的負載均衡、內(nèi)容分發(fā)、調度等功能模塊，使用戶就近獲取所需內(nèi)容，降低網(wǎng)絡擁塞，提高用戶訪問響應速度和命中率。CDN的關鍵技術主要有內(nèi)容存儲和分發(fā)技術。
1) 那么vue.js怎么引入cdn呢？很簡單，使用圖片（圖1）上的兩個鏈接即可，直接使用，為了方便在無網(wǎng)情況下編寫代碼，建議把js下載下來。
2) 下載方法：
選中鏈接，右鍵單擊，選擇轉到....或復制（復制就在搜索欄進行搜索）（如圖2）
圖2
跳到此頁面后，右鍵單擊，選擇另存為（如圖3）
圖3
把js保存到本地，并引入項目（圖4）
圖4
一、介紹vue.js的常用參數(shù)和使用方法
- 實例化Vue對象（圖5）
圖5
代碼：
<body>
<div id="app">
<h1>{{name}}</h1>
</div>
</body>
<script>
// 實例化vue對象
new Vue({
el: '#app',
data: {
name: '秋寧'
}
});
/* *
* el:需要獲取、控制的元素；一定是html的根容器元素
* data:存儲數(shù)據(jù)
* 編輯真實對象（dom），通過虛擬對象{{name}}傳遞到頁面里面去
* */
</script>
結果圖：（圖6）
圖6
tips:對象數(shù)據(jù)和方法都需要在el（#app）中操作
- 使用方法/函數(shù)：（圖7）
圖7
使用到的代碼：
<body>
<div id="app">
<p>{{doing()}}</p>
</div>
</body>
<script>
// 實例化vue對象 new Vue({ el: '#app', methods:{ doing:function () { return '正在打代碼！' } } });
/* * * methods:用于存儲各種方法; * */
</script>
結果圖（圖8）
圖8
- 進行數(shù)據(jù)綁定（圖9）
圖9
代碼：
<body>
<div id="app"><a v-bind:href="href">這是一個a標簽</a><p v-html="href1"></p> </div>
</body>
<script>
// 實例化vue對象
new Vue({
el:'#app',
data:{ href:'http://zsyzsj.com/',href1:'<a href="http://zsyzsj.com/">使用v-html</a>'}});
/* ** v-bind:對數(shù)據(jù)進行綁定 * */
</script>
結果圖（圖10）：
圖10
二、vue.js計算屬性與vue.js事件處理方法的差別
計算屬性關鍵詞: computed。
事件處理方法關鍵詞: methods。
Vue.js的計算屬性和事件處理方法使用起來的效果是沒什么區(qū)別的，相較于方法來，Vue.js的計算屬性更有利于服務器的運行。但是！重點?。∮欣牟灰欢ù碜詈线m哦！所以，這邊推薦常規(guī)使用事件處理方法，想需要大規(guī)模運算，相對比較繁瑣的運算就推薦計算屬性。
舉個例子，當前有個需求，需要計算產(chǎn)品a價格加上產(chǎn)品b價格等于多少。那么就使用事件處理方法來做這個需求。
再舉個例子，某天產(chǎn)品經(jīng)理需要你做出搜索功能，那么這個需求，就需要使用計算屬性來做。因為搜索功能是需要調用大量數(shù)據(jù)來進行搜索檢測的功能。它耗時，耗力；因此，我們需要使用計算屬性優(yōu)化它。
三、總結：
學習的不易就是在于自我的堅持！
這章寫到了常用的基本使用參數(shù)和vue.js計算屬性與vue.js事件處理方法的差別，其他方面，個人覺得需要進一步加深這方面的話，可以看一下官方api或者研究一下菜鳥教程的教學案例。
下章我這邊總結一下vue.js的常用事件和指令給各位參考，如果還有時間就寫一個小的demo案例給各位參考。
