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