Vue.js
首先學(xué)習(xí)vue.js琢岩，應(yīng)該要了解前段開(kāi)發(fā)基礎(chǔ)：html氮双、css慕蔚、js等适秩，熟悉前端模塊化基礎(chǔ)余爆，對(duì)ES6有初步的了解纷宇。
vue.js的官網(wǎng)：http://cn.vuejs.org
vue.js官網(wǎng)教程: http://cn.vuejs.org/guide/installation.html
vue.js的一個(gè)組件就是一個(gè)*.vue文件。
1.安裝vue.js
推薦使用淘寶的npm鏡像: cnpm
$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm -v #查看版本
$ sudo cnpm install -g vue-cli #全局安裝 vue-cli
$ vue #查看vue是否安裝
$ vue init webpack my-first-project #創(chuàng)建一個(gè)基于 "webpack" 模板的新項(xiàng)目
# 創(chuàng)建項(xiàng)目后按回車蛾方，輸入項(xiàng)目描述介紹像捶、作者名、是否使用ESLint語(yǔ)法檢查工具等（輸入n即可）
$ cd my-first-project
$ sudo cnpm install # 安裝依賴
$ npm run dev #運(yùn)行項(xiàng)目
運(yùn)行項(xiàng)目后桩砰，在瀏覽器里打開(kāi)localhost:8080即可查看頁(yè)面效果作岖，可進(jìn)行熱更新。另外在編輯項(xiàng)目過(guò)程中五芝，一般在項(xiàng)目目錄src下編寫(xiě)代碼文件痘儡。像vue.js這樣來(lái)編寫(xiě)頁(yè)面其實(shí)就是進(jìn)行模板渲染的應(yīng)用。
2.vue.js組件的重要選項(xiàng)
- data是一個(gè)對(duì)象枢步，代表數(shù)據(jù)
- methods - 方法
- watch - 監(jiān)聽(tīng)數(shù)據(jù)方法等變化
模板指令:
數(shù)據(jù)渲染: v-text 沉删、v-html 、{{}}
<p>{{a}}</p>
<p v-text="a"></p>
<p v-html="a"></p>
控制模塊隱藏: v-if 醉途、v-show
<p v-if="isShow"></p>
<p v-show="isShow"></p>
渲染循環(huán)列表: v-for
<ul>
<li v-for='item in items'>
<p v-text='item.label'></p>
</li>
</ul>
事件綁定: v-on
<button v-on:click="doThis"></button>
<button @click="doThis"></button>
屬性綁定: v-bind
<img v-bind:src="imageSrc">
<div :class="{red:isRed}"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, {classB: isB, classC: isC}]"></div>
3.總結(jié)：
- new一個(gè)vue對(duì)象的時(shí)候你可以設(shè)置它的屬性矾瑰，其中最重要的包括三個(gè)，分別是data隘擎，methods殴穴，watch。
- 其中data代表vue對(duì)象的數(shù)據(jù)货葬，methods代表vue對(duì)象的方法采幌，watch設(shè)置了對(duì)象監(jiān)聽(tīng)的方法。
- vue對(duì)象里的設(shè)置通過(guò)html指令進(jìn)行關(guān)聯(lián)震桶。
- 重要的指令包括
- v-text 渲染數(shù)據(jù)
- v-if 控制顯示
- v-on 綁定事件
- v-for 循環(huán)渲染 等
