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