1.todulist
v-model=“value” value會(huì)自動(dòng)把輸入賦值給vue實(shí)例的字段
@click@click不光可以綁定方法，也可以就地修改data里的數(shù)據(jù) @click綁定多個(gè)操作的時(shí)候用；隔開
:class 動(dòng)態(tài)綁定
v-for 可以綁定數(shù)據(jù)到數(shù)組來(lái)渲染一個(gè)列表：
例子：
<div id="app">
? ? ? <div class="input">
? ? ? ? <input type="text" @keydown.enter="enterkeyDown" v-model="name" placeholder="請(qǐng)輸入完成的事情" />
? ? ? </div>
? ? ? <div class="tab">
? ? ? ? <div class="header">
? ? ? ? ? <div @click="allClick(0)" :class="{bg:index==0}" >全部</div>
? ? ? ? ? <div @click="todoClick(1)" :class="{bg:index==1}">未完成</div>
? ? ? ? ? <div @click="readyClick(2)" :class="{bg:index==2}">已完成</div>
? ? ? ? </div>
? ? ? ? <div class="body">
? ? ? ? ? <ul class="all a" :class="{n:index==0}">
? ? ? ? ? ? <li v-for="item in allLst" @click="rClick(item.id)" :class="{h:item.status == 1}">{{item.name}}</li>
? ? ? ? ? </ul>
? ? ? ? ? <ul class="todo a" :class="{n:index==1}">
? ? ? ? ? ? <li v-for="item in tolst" @click="rClick(item.id)">{{item.name}} </li>
? ? ? ? ? </ul>
? ? ? ? ? <ul class="ready a" :class="{n:index==2}">
? ? ? ? ? ? <li v-for="item in readList" class="h">{{item.name}}? <span @click="remove(item.id)">*</span></li>
? ? ? ? ? </ul>
? ? ? ? </div>
? ? ? </div>
? ? </div>
js代碼片段
const vm = new Vue({
? ? ? el:"#app",
? ? ? data: {
? ? ? ? name:"",
? ? ? ? // status 0 未完成 1 已完成
? ? ? ? allLst:[? // 所有的事情
? ? ? ? ? {id:0,name:"事情的名字",status:0},
? ? ? ? ? {id:1,name:"事情的名字1",status:1},
? ? ? ? ? {id:2,name:"事情的名字2",status:0}
? ? ? ? ? ],
? ? ? ? index:0 ,// 當(dāng)前顯示的是第幾個(gè)tab
? ? ? ? id:10 // 從10開始的
? ? ? },
? ? ? methods:{
? ? ? ? allClick(index) { // 顯示所有
? ? ? ? ? this.index = index;
? ? ? ? },
? ? ? ? todoClick(index) { // 未完成
? ? ? ? ? this.index = index;
? ? ? ? },
? ? ? ? readyClick(index) { // 已經(jīng)完成
? ? ? ? ? this.index = index;
? ? ? ? },
? ? ? ? enterkeyDown() {
? ? ? ? ? if (this.name == null || this.name == "") {
? ? ? ? ? ? return;
? ? ? ? ? }
? ? ? ? ? let item = {id:++this.id,"name":this.name,status:0};
? ? ? ? ? this.allLst.push(item);
? ? ? ? ? this.name = "";
? ? ? ? },
? ? ? ? rClick(id) {
? ? ? ? ? let item = null;
? ? ? ? ? // 根據(jù)id從數(shù)組查詢出對(duì)應(yīng)的元素
? ? ? ? ? for (let i = 0; i < this.allLst.length; i++) {
? ? ? ? ? ? item = this.allLst[i];
? ? ? ? ? ? if (item.id == id) {
? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ? // 修改元素的狀態(tài)
? ? ? ? ? item.status = 1;
? ? ? ? },
? ? ? ? remove(id) {
? ? ? ? ? let index = null;
? ? ? ? ? // 根據(jù)id從數(shù)組查詢出對(duì)應(yīng)的元素
? ? ? ? ? for (let i = 0; i < this.allLst.length; i++) {
? ? ? ? ? ? const item = this.allLst[i];
? ? ? ? ? ? if (item.id == id) {
? ? ? ? ? ? ? index = i;
? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ? // 從數(shù)組中把元素刪除掉
? ? ? ? ? this.allLst.splice(index,1)
? ? ? ? }
? ? ? },
? ? ? computed:{
? ? ? ? tolst:function() {
? ? ? ? ? return this.allLst.filter(function(item) {
? ? ? ? ? ? return item.status == 0;
? ? ? ? ? })
? ? ? ? },
? ? ? ? readList:function() {
? ? ? ? ? return this.allLst.filter(function(item) {
? ? ? ? ? ? return item.status == 1;
? ? ? ? ? })
? ? ? ? }
? ? ? }
? ? })
2.vue生命周期
主要的生命周期函數(shù)分類：
? 1.創(chuàng)建期間的生命周期函數(shù)：
? ? ? ? ? beforeCreate：實(shí)例剛在內(nèi)存中被創(chuàng)建出來(lái)，此時(shí)蹬铺，還沒(méi)有初始化好 data 和 methods 屬性
? ? ? ? ? created：實(shí)例已經(jīng)在內(nèi)存中創(chuàng)建OK，此時(shí) data 和 methods 已經(jīng)創(chuàng)建OK秉撇，此時(shí)還沒(méi)有開始 編譯模板
? ? ? ? ? beforeMount：此時(shí)已經(jīng)完成了模板的編譯甜攀，但是還沒(méi)有掛載到頁(yè)面中
? ? ? ? ?? mounted：此時(shí)，已經(jīng)將編譯好的模板琐馆，掛載到了頁(yè)面指定的容器中顯示
? 2.運(yùn)行期間的生命周期函數(shù)：
? ? ? beforeUpdate：狀態(tài)更新之前執(zhí)行此函數(shù)规阀， 此時(shí) data 中的狀態(tài)值是最新的，但是界面上顯示的數(shù)據(jù)還是舊的瘦麸，因?yàn)榇藭r(shí)還沒(méi)有開始重新渲染DOM節(jié)點(diǎn)
? ? ? updated：實(shí)例更新完畢之后調(diào)用此函數(shù)谁撼，此時(shí) data 中的狀態(tài)值 和 界面上顯示的數(shù)據(jù)，都已經(jīng)完成了更新，界面已經(jīng)被重新渲染好了厉碟！
銷毀期間的生命周期函數(shù)：
? ? ? beforeDestroy：實(shí)例銷毀之前調(diào)用喊巍。在這一步，實(shí)例仍然完全可用箍鼓。
? ? ? destroyed：Vue 實(shí)例銷毀后調(diào)用崭参。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定款咖，所有的事件監(jiān)聽器會(huì)被移除何暮，所有的子實(shí)例也會(huì)被銷毀。
const vm = new Vue({
? ? ? el:"#app",
? ? ? data: {
? ? ? ? name:"張三"
? ? ? },
? ? ? created() { // 在created中發(fā)送網(wǎng)絡(luò)請(qǐng)求
? ? ? ? console.log("初始化完成就會(huì)執(zhí)行")
? ? ? },
? ? ? mounted() {
? ? ? ? console.log("掛載")
? ? ? },
? ? ? destroyed() { // 移除一些監(jiān)聽铐殃，例如定時(shí)器
? ? ? ? console.log("銷毀")
? ? ? }
? ? })
node
? ? 簡(jiǎn)單的說(shuō) Node.js 就是運(yùn)行在服務(wù)端的 JavaScript海洼。Node.js 是一個(gè)基于Chrome JavaScript 運(yùn)行時(shí)建立的一個(gè)平臺(tái)。Node.js是一個(gè)事件驅(qū)動(dòng)I/O服務(wù)端JavaScript環(huán)境富腊，基于Google的V8引擎坏逢，V8引擎執(zhí)行Javascript的速度非常快赘被，性能非常好是整。
? ? js運(yùn)行在瀏覽器中， 不能擁有操作文件帘腹， 二進(jìn)制等這些功能
? ? 運(yùn)行環(huán)境，es規(guī)范许饿，提供依賴包（http,io,buffer...）
? ? 我們可以利用node這個(gè)環(huán)境開發(fā)后臺(tái)服務(wù)器
npm
NPM是隨同NodeJS一起安裝的包管理工具阳欲，能解決NodeJS代碼部署上的很多問(wèn)題，常見的使用場(chǎng)景有以下幾種：
????允許用戶從NPM服務(wù)器下載別人編寫的第三方包到本地使用陋率。
????允許用戶從NPM服務(wù)器下載并安裝別人編寫的命令行程序到本地使用球化。
????允許用戶將自己編寫的包或命令行程序上傳到NPM服務(wù)器供別人使用。
#npm 切換到 cnpm
? npm install cnpm -g --registry=https://registry.npm.taobao.org
使用cnpm 安裝依賴包 -g是全局安裝
? ? cnpm install? 包名 -g
????cnpm install 包名 --save
????如果不添加 --save 只會(huì)下載這個(gè)包,在package.json文件不會(huì)下載的記錄
????--dev 開發(fā)的時(shí)候使用瓦糟，上線之后就不在使用的一些包
? cnpm uninstall 包名 下載包
? dependencies 上線之后還在用（bootstrap,jquery）
? devDependencies 開發(fā)打包的時(shí)候使用筒愚，上線之后就不使用了（webpack）
如果沒(méi)有添加 --save,? 在package.json中不會(huì)有記錄
如果下載的項(xiàng)目由package.json， 只需要執(zhí)行 cnpm install , 他就會(huì)把依賴包都下載下來(lái)
webpack (gulp)
? webpack： 自動(dòng)化的打包工具
瀏覽器只能認(rèn)識(shí) html, css, js, 圖片
?? 為了快速開發(fā)(es6,sass,typeScript...,aa.Vue ) -> 工具 ->? html,css,js,圖片
? 插件
?? 安裝 cnpm install webpack webpack-cli --save --dev
?? 編寫webpack的文件 webpack.config.js
vue-cli
? ? 腳手架菩浙，? 創(chuàng)建半成品巢掺，我們?cè)诎氤善坊A(chǔ)上開發(fā)
? ? npm install -g @vue/cli 安裝腳手架
? ? 創(chuàng)建項(xiàng)目 vue create 項(xiàng)目名 （先通過(guò)cd進(jìn)入到創(chuàng)建項(xiàng)目的目錄）
作者：李憨憨的特殊昵稱
鏈接：http://www.reibang.com/p/308eecfd1568
來(lái)源：簡(jiǎn)書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)劲蜻，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處陆淀。
