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