====BOOTSTRAP===========================================================================

====VUE===========================================================================

==day01===========================

一住涉、框架

軟件框架是一套可被反復使用的優(yōu)秀的代碼，用來解決復雜的問題

好處：

①提高了開發(fā)速度

②提高了代碼的復用率亏栈、

③提高了代碼的質(zhì)量

二、VueJS概述

vuejs.org

1、what

vue是一個 構建用戶界面（ui） 漸進式的js的框架

（并不是所有的做UI的框架 都是由豐富的樣式類庫）

CLI: command line interface 終端用戶界面

GUI: graphical user interface 圖形化用戶界面

vue = angular + React

2肺魁、where

餓了嗎、滴滴、阿里巴巴

主要是用在數(shù)據(jù)操作比較頻繁的 單頁面應用程序中

3舞竿、why

①中文文檔的支持

②容易上手 學習曲線比較緩和

③速度快

④體積小

⑤基于組件化的開發(fā)方式

⑥代碼的可讀性好、可維護性比較好

⑦極大的降低了耦合度(解耦：降低耦合度)

4窿冯、how

方式1：引入對應的文件

方式2：基于命令行的開發(fā)方式

# 全局安裝 vue-cli

npm install --global vue-cli

# 創(chuàng)建一個基于 webpack 模板的新項目

vue init webpack my-project

# 安裝依賴骗奖，走你

cd my-project

npm install

npm run dev

三、Vue基本語法（雙花括號+常用指令）

1醒串、雙花括號

interploation 插值表達式/mustache 胡子

語法：

<any> {{表達式}} </any>

將表達式執(zhí)行的結果 輸出到當前調(diào)用雙花括號的元素 的innerHTML中

（10:32 - 10:42）

練習：創(chuàng)建一個demo03_lianxi.html

將一個對象數(shù)組（學生數(shù)組执桌，學生是有sex/age/score,一共有3個學生）

展示在table中，thead有3列芜赌，分別是性別仰挣、年齡、成績

2缠沈、循環(huán)指令

程序 ：

順序結構椎木、選擇結構违柏、循環(huán)結構

v-for用法：

<any v-for="臨時變量 in 集合"></any>

<any v-for="(臨時變量,下標) in 集合"></any>

目的就是①遍歷集合 ②在遍歷結合的同時，創(chuàng)建多個調(diào)用v-for的元素

舉例：

<li v-for="myValue in list">{{myValue}}</li>

3香椎、選擇指令

file->new->edit file templates->左上角的加號-》修改name為vue，extension為html--》把模板內(nèi)容粘貼-》ok

語法：

<any v-if="表達式"></any>

多重分支判斷：

<p v-if=""></p>

<p v-else-if=""></p>

<p v-else></p>

作用：

根據(jù)表達式執(zhí)行結果的真假禽篱，來決定是否要將當前的元素掛載到DOM

總結：3w1h\雙花括號\v-for\v-if/v-else-if\v-else

4畜伐、事件綁定

<any v-on:eventName="處理函數(shù)"> </any>

給指定的標簽 綁定上當eventName事件觸發(fā)時，要執(zhí)行的處理函數(shù)

舉例：

<input type='text' v-on:change="handleChange"/>

練習：（2:36 - 2:46）

創(chuàng)建一個demo07_lianxi.html

在視圖中有一個列表躺率，有一個按鈕玛界，當點擊按鈕時，向列表中插入一條100以內(nèi)隨機的數(shù)據(jù)悼吱；當列表長度大于10的時候慎框，列表自動從DOM中移除。

視圖：無序列表后添、按鈕

功能：

①準備一個數(shù)組 [100,200,300],展示在列表中

②點擊按鈕笨枯，創(chuàng)建隨機數(shù)，將隨機數(shù)插入到數(shù)組中

③調(diào)用選擇指令遇西，當條件為：列表長度大于10馅精，從DOM中移除

編程方式發(fā)生了變化，從DOM驅(qū)動 變成了 數(shù)據(jù)驅(qū)動型的粱檀。

5洲敢、屬性綁定

基本用法：

<any v-bind:屬性名稱="表達式"></any>

作用：將表達式執(zhí)行的結果的值 綁定給 屬性

舉例：

new Vue({

data:{

myUrl:'http://www.tmooc.com',

imgUrl:'img/1.jpg',

imgName:'1.jpg'

}

})

<a v-bind:href="myUrl"></a>

<img v-bind:src="imgUrl"/>

<img v-bind:src="'img/'+imgName"/>

5.2 樣式和樣式類的綁定

<any v-bind:style="{fontSize:mySize}">

</any>

<any v-bind:class="{myRed:true}"></any>

:src

:style

:class

:disabled

綁定：

①雙向數(shù)據(jù)綁定

方向1：將數(shù)據(jù)綁定到視圖中，當數(shù)據(jù)發(fā)生變化茄蚯，視圖會自動的更新

方式： {{}} v-if v-for 等常用指令

方向2：將表單元素中用戶操作的結果 綁定到 某一個變量

方式： v-model

②事件綁定

v-on:click

@click

③屬性綁定

v-bind:src

:src

:style

:class

:disabled

v-for/v-if/v-else-if/v-else/v-on/v-bind

v-html/v-show/v-bind

練習：

視圖 兩個input和一個按鈕

功能：點擊按鈕压彭，將input中輸入的數(shù)字進行求和 并在控制臺輸出結果

四、Vue中的組件

組件是一個可被反復使用的渗常，帶有特定功能的視圖壮不；

組件并不是vue的專利，Vue/Angular/React的組件都是以w3c中的WebComponent為標準創(chuàng)建的凳谦。

組件樹的存在Ｒ涑！

4.1 組件如何進行封裝尸执？

4.1.1 全局組件：

Vue.component('my-component',{

template:'<h1>hello</h1>'

});

4.1.2 局部組件：

new Vue({

? ? ? ? ? ? el: '#example',

? ? ? ? ? ? data: {

? ? ? ? ? ? ? msg: 'VueJS is Awesome'

? ? ? ? ? ? },

? ? ? ? ? ? components: {

? ? ? ? ? ? ? 'my-header': {

? ? ? ? ? ? ? ? template:'<h1>it is a header</h1>'

? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? })

4.2 調(diào)用組件

像使用普通的html標簽一樣家凯，去調(diào)用組件類

<my-component></my-component>

4.3 注意事項

①全局組件并不是意味著可以用在任何一個位置，嵌套在任何一個組件

②局部組件只能直接用在el所指定的標簽范圍內(nèi)如失，不能嵌套在其他組件

③組件在使用必須寫開閉標簽

<my-buttton></my-button>

練習：

搞定分頁功能

視圖：

上一頁 下一頁 分頁按鈕構成的

功能：

①默認第一頁高亮顯示

②第一頁選中绊诲，上一頁不能點擊

③最后一個選中，下一頁不能點擊

④選中某一頁褪贵，當前頁面高亮顯示

v-bind v-for v-on {{}}

初始化：指定一個數(shù)組[1,2,3,4,5]

把數(shù)組遍歷創(chuàng)建多個按鈕

定義一個數(shù)據(jù)掂之，保存當前選中的是第一頁

==day02===================================

Vue組件

Vue自定義指令

Vue自定義過濾器

一抗俄、Vue組件

1、組件

組件就是可被反復使用的世舰，帶有特定功能的視圖

將需要經(jīng)常的視圖动雹，比如登錄窗口、頁頭跟压、頁腳封裝成組件胰蝠，然后方便復用，提高代碼的可讀性震蒋，降低了代碼的維護成本茸塞，降低了耦合度

1.1 復合組件

復合組件就是一個組件，只不過復合組件可以有其它的組件構成

新建一個demo02_lianxi.html

練習：my-cart my-header my-footer my-list

my-header 渲染一個h1

my-footer 渲染一個p

my-list 渲染一個由3個元素構成的無序列表

最后放到my-cart中查剖，將my-cart作為跟組件渲染出來钾虐。

二、Vue中自定義指令

1笋庄、創(chuàng)建和使用

創(chuàng)建指令

Vue.directive('change',{

//調(diào)用指令會自定執(zhí)行效扫，并只調(diào)用一次

bind:function(el,binding){},

//當模板的數(shù)據(jù)發(fā)生變化，會自動執(zhí)行

update:function(el,binding){},

//解除綁定會自定執(zhí)行无切，并只調(diào)用一次

unbind:function(){}

})

使用指令：

v-change

注意事項：

Vue中的指令的命名 烤串式命名方式荡短，在調(diào)用指令時，要記得加上v-

2哆键、自定義指令時掘托，完成參數(shù)的傳遞和接收

在自定義指令時，指定指令的鉤子函數(shù)（處理函數(shù)）籍嘹，經(jīng)常用到的是bind/update/unbind

處理函數(shù)是有參數(shù)的闪盔，第一個參數(shù)是el，指的是調(diào)用指令的元素辱士；第二參數(shù)是binding泪掀，是一個對象 ，包含一個value屬性颂碘，記錄的是傳過來的參數(shù)

舉例：

傳遞參數(shù)：

<h1 v-change="'#ff0000'"></h1>

接收參數(shù)：

el.style.backgroundColor = binding.value

練習：

demo04_lianxi.html

要求創(chuàng)建一個自定義的指令异赫，任何調(diào)用該指令的元素背景色，都會變成通過參數(shù)头岔，所傳遞的顏色

基本步驟：

1塔拳、完成指令的創(chuàng)建和使用

2、完成參數(shù)的發(fā)送和接收

3峡竣、將接受到的顏色 設置為 當前元素的背景色

三靠抑、Vue中的過濾器

一個優(yōu)秀的基于Vue的過濾器的項目：

https://github.com/wy-ei/vue-filter

過濾器：可以將數(shù)據(jù)進行篩選、過濾适掰、格式化的操作颂碧，把數(shù)據(jù)更好的呈現(xiàn)給用戶

Vue中1.*版本 是支持內(nèi)置的過濾器

Vue的2.*荠列，自定義過濾器。

1载城、過濾器創(chuàng)建肌似、使用

過濾器的本質(zhì)就是一個帶有參數(shù)、帶有返回值的方法

創(chuàng)建：

//第一個參數(shù)用來指定過濾器的名字

//第二個參數(shù)指定過濾器要執(zhí)行的操作诉瓦，是一個方法锈嫩，方法的參數(shù)是通過管道所傳遞來的數(shù)據(jù)

Vue.filter('過濾器名稱',function(arg){

return arg處理后的結果

})

使用：

支持多重過濾

<any>

{{表達式 | 自定義過濾器(參數(shù)1，參數(shù)2) | 過濾器 }}

</any>

2垦搬、過濾器如何傳參

①過濾器在創(chuàng)建時，讓方法支持能夠接受參數(shù)

Vue.filter(

'myCurrency',

function(arg,arg1,arg2艳汽，arg3){

return ‘處理后的結果’

}

)

②調(diào)用過濾器時發(fā)送參數(shù)

<any>{{表達式 | myCurrency(100,200,300)}}</any>

練習：demo06_lianxi.html

創(chuàng)建一個過濾器猴贰，將服務器端返回的

性別信息0 女/1男，

如果過濾器指定參數(shù)為en,返回boy\girl,

如果指定參數(shù)為zh,轉(zhuǎn)換為男河狐、女

0 | sex('en') --》girl

1 | sex('en') --》boy

0 | sex('zh') --》女

1 | sex('zh') --》男

四米绕、Vue中的組件生命周期處理函數(shù)

分為4個階段：

create : 事件綁定、數(shù)據(jù)的初始化

beforeCreate

created

mount：元素掛載前后

beforeMount

mounted

update ：當數(shù)據(jù)發(fā)生變化

beforeUpdate

updated

destroy：收尾工作

beforeDestroy

destroyed

練習：demo08_lianxi.html

創(chuàng)建一個組件馋艺，在組件中渲染一個h1栅干。

在組件掛載完畢之后，希望啟動一個定時器來實現(xiàn)h1標簽的透明度的漸變效果

0~1 0~1 ...

①創(chuàng)建和調(diào)用組件

②mounted

③ h1 style opacity

Vue.component('my-com',{

生命周期的處理函數(shù):function(){},

data:function(){return {}},

methods:{handleClick:function(){}},

template:`<h1></h1>`

});

五捐祠、常見屬性

1碱鳞、watch 監(jiān)聽屬性

①先給要監(jiān)聽的變量 初始化

Vue.component('test',{

data:function(){

return {uName:''}

}

})

②表單元素在雙向數(shù)據(jù)綁定，綁定到該變量

<select v-model="uName"></select>

③添加監(jiān)聽屬性

Vue.component('test',{

data:function(){

return {uName:'',uAgree:false}

}踱蛀，

template:`

<form>

<select v-model="uName"></select>

<input type="checkbox" v-model="uAgree"/>

</form>

`,

watch:{

uName:function(newValue,oldValue){},

uAgree:function(newValue,oldValue){}

}

})

2窿给、computed 計算屬性

計算屬性和methods中定義的方法，執(zhí)行的結果確實是一樣的率拒，但是計算屬性是根據(jù)依賴進行緩存的崩泡。

在Vue的代碼編寫過程中，設計到復雜的業(yè)務邏輯 建議放在計算屬性computed猬膨，而不是放在methods

//創(chuàng)建計算屬性

new Vue({

computed:{

myComputed:function(){

return 變量

}

}

})

//使用計算屬性

<p>{{myComputed}}</p>

每日一練：

==day03=========================================

安排：

Vue中組件之間的通信的方式

Vue中路由模塊的使用

掌握的重點：

組件間通信+路由模塊+網(wǎng)絡請求模塊

一角撞、組件間通信

1、父組件 與 子組件 通信 (props down)

①傳值

<son uname=“zhangsan”></son>

②接受

Vue.component('son',{

props:['uname','tips'],

template:'<div>

<p>{{uname}}</p>

<input type='text' :placeholder="tips"/>

</div>

'

})

練習：demo02_lianxi.html

三個組件：

my-input

my-button

my-login

2勃痴、子組件 與 父組件 通信 (events? up)

確認：子組件 把數(shù)據(jù) 發(fā)給父組件

①綁定事件

1.1

在父組件中 定義一個方法谒所，用來給子組件指定事件的處理函數(shù)

rcvMsg:function(msg){

//msg就是通過事件所傳遞來的值

}

1.2

在父組件中調(diào)用子組件時，綁定事件

<son @customEvent="rcvMsg"></son>

②觸發(fā)事件

子組件的內(nèi)部 去觸發(fā)事件

this.$emit('customEvent',123)

綜合練習：

my-user:用戶名 輸入框 按鈕

my-chatroom：無序列表+ my-user +my-user

3召耘、ref 可以讓父組件主動的到子組件中取值

①指定引用的名稱

<son ref="mySon"></son>

②根據(jù)引用的名稱找到組件的實例(對象)

this.$refs.mySon

注意事項：不要試圖通過ref屬性去傳值百炬，ref在使用的過程中是一個關鍵詞，旨在指定一個引用的名稱

4污它、$parent

子組件可以通過this.$parent得到父組件的實例對象

總結：在父子相互通信的過程的

父-》子

props down

this.$parent

子-》父

events up

this.$refs.mySon

5剖踊、兄弟組件之間的通信

var bus = new Vue();

bus.$on('eventName',function(msg){});

bus.$emit('eventName',數(shù)據(jù))

練習：

在當前案例的基礎上庶弃，給熊二組件添加一個按鈕，點擊按鈕德澈，告訴熊大：‘怕啥歇攻！’

熊二（發(fā)送 觸發(fā)事件） -》 熊大（接收 綁定）

二、擴展

為了讓Vue組件化的開發(fā)方式 更容易維護和開發(fā)梆造，有多種方式來創(chuàng)建組件

①全局組件

Vue.component('test',{

template:`<h1></h1>`

})

②局部組件

new Vue({

components:{

my-component:{

template:''

}

}

})

③通過模板指定

<script type='text/x-template' id="myContent">

</script>

Vue.component('my-component',{

template:'#myContent'

})

④單文件組件

以.vue結尾的文件

一個vue結尾的文件就是一個組件缴守，而這個文件中是通過template去指定模板內(nèi)容，通過script去指定業(yè)務邏輯镇辉，通過style指定樣式

三屡穗、綜合練習

todobox

①完成組件的創(chuàng)建和使用

②add

功能1：

在todoinput中的按鈕單擊時，將輸入框中的內(nèi)容 傳遞給todolist（兄弟組件通信）忽肛；

功能2：

todolist將接受到數(shù)據(jù) 傳遞給 todoitem（父與子通信）

步驟1：todoinput

輸入框 v-model

按鈕 bus.$emit

步驟2：todolist

bus.$on

定義一個數(shù)組 保存通過事件所傳遞來的數(shù)據(jù)

v-for

步驟3：

通過屬性傳值todoitem

③delete

==day04=========================================

刪除功能：

①todolist在調(diào)用todoitem時候村砂，通過content和myIndex將內(nèi)容和下標傳遞給了todoitem

②在調(diào)用todoitem時 綁定一個事件處理函數(shù)

在事件處理函數(shù)中，去接收傳遞來的下標屹逛，并從數(shù)組中刪除指定下標的元素

③在todoitem中 點擊delete按鈕時础废，觸發(fā)自定義事件

并將當前是第一個(this.myIndex)傳遞給todolist

一、Vue中路由的使用

單頁面應用程序(single page application):在一個完整的工程罕模，可以只有一個完整的頁面评腺，其余的都是代碼片段。

SPA的基本工作原理：

①加載完整的頁面

②解析地址欄中的頁面地址和路由地址

③根據(jù)配置好的路由詞典淑掌，找到該路由地址所對應的要加載的真實的頁面

④發(fā)起ajax請求蒿讥，將真實的頁面從服務器加載過來

⑤將頁面加載到指定的容器中

1、路由的基本用法

任何一個框架的路由模塊：建立起url和頁面之間的映射關系

實現(xiàn)一個SPA基本思路：

①指定一個容器

<router-view></router-view>

②創(chuàng)建代碼片段

創(chuàng)建組件

var Login = Vue.component('login-component',{

template:`<h1>登錄頁面</h1>`

})

③配置路由詞典

new Vue({

router:new VueRouter({

routes:[

{path:'/myLogin',component:Login}

]

})

})

④測試

測試路由詞典中 路由地址能否按照需求 正確加載所需要用到的頁面

2锋拖、頁面跳轉(zhuǎn)的方式

①可以直接修改地址欄（內(nèi)部測試）

②可以通過js

this.$router.push('目的地的路由地址')

③routerLink

<router-link to="目的地的路由地址"></router-link>

練習：demo02_lianxi.html

login? 在登錄頁面 放上一個routerLink 跳轉(zhuǎn)到Main頁面

main? 在main頁面中诈悍，放上一個按鈕（退出登錄），點擊跳轉(zhuǎn)到login

3兽埃、跳轉(zhuǎn)的同時如何進行傳參

擴充：路由匹配規(guī)則

①將路由地址為空的放在路由詞典的最上邊

{path:'',component:Login}

②具體的路由地址 對應 具體的組件

{path:'/login',component:Login}

③異常處理侥钳，如果當前頁面中的路由地址 在路由詞典中沒有匹配到，作為異常處理

{path：'*'....}

參數(shù)的傳遞：

①發(fā)送

http://****.com/#/main/zhangsan

this.$router.push('/main/zhangsan')

②接收

配置接收方自身的路由地址

const myRoutes = [

{path:'/main/:uname',component:Main}

]

this.$route.params.uname

綜合練習:demo04.html（15:10 - 15:30）

通過Vue和VueRouter來實現(xiàn)一個SPA柄错，這個SPA中有3個頁面：

Check 商品的查看頁面 btn 點擊跳轉(zhuǎn)pay（同時將價格 100發(fā)送）

Pay? 商品的支付頁面 接收參數(shù) 顯示在h1 舷夺，routerLink點擊時 跳轉(zhuǎn)到send

Send? 商品的發(fā)貨頁面 btn 點擊跳轉(zhuǎn)到Check

①SPA

②跳轉(zhuǎn)

③傳參

高級用法

? ? alias? ? 起別名(訪問路徑);

? ? {path:"/send",component:Send,alias:'/sss'},

? ? redirect 重定向

? ? {path:"/send",redirect:'/sends'},

? ? path:""? 錯誤處理

? ? {path:"*",component:NotFound},

4、嵌套路由

嵌套路由 在一個SPA中的某一個路由地址所對應的組件中售貌，還可以接著再嵌套其它的組件给猾。

步驟1：先到準備嵌套組件的組件中 指定一個容器

步驟2：給組件在配置路由詞典，指定一個children

舉例：

假設A組件 需要嵌套B組件颂跨、C組件

①給A組件的模板 指定一個router-view

② {

path:'',

component:A,

children:[

{path:'/b',component:B}

]

}

擴充：

如果想要實現(xiàn)頁面的前進或者后退敢伸？

this.$router.go(-1);

Vue的基礎知識（指令、過濾器恒削、組件）

Vue中組件間通信

Vue中創(chuàng)建SPA（基本步驟池颈、跳轉(zhuǎn)尾序、傳參、嵌套）

Vue中與服務器端通信的方式

5躯砰、與服務器端通信

5.1 具體方式

①引入vue-resource.js

②發(fā)請求

this.$http

.get('url')

.then((response)=>{

//response.data

})

5.2 fake online api

jsonplaceholder.typicode.com/users

6每币、搭建.vue結尾的文件運行的一個環(huán)境

①tpls.zip

②將壓縮包考到指定的目錄

C:\xampp\htdocs\13_FRAMEWORK\vue\project

③解壓縮到當前文件夾

④進入到tpls文件夾

⑤安裝依賴

shift+右鍵--》打開終端

npm install

⑥啟動環(huán)境

npm start

每日一練：

路由嵌套

創(chuàng)建兩個組件，購物車琢歇，訂單確認

在訂單確認的組件中 能夠嵌套首次確認兰怠、再次確認組件

①引入vue-router.js

②指定router-view

③創(chuàng)建Cart OrderConfirm

④配置路由詞典

⑤找到OrderConfirm 指定容器 router-view

⑥創(chuàng)建要用到的組件 firstConfirm\secondConfirm

⑦配置上述兩個組件的路由地址

==day05=====================================

include 包含 引入

exclude 從當中移除

npm node package manager 包管理器

舉例：

brew/apt-get/...

brew install ***

0、創(chuàng)建組件類的方式

①? 全局組件

Vue.component('',{

template:'<h1></h1>'

})

② 局部組件

new Vue({

components:{

my-header:{

template:''

}

}

})

③ 指定模板內(nèi)容

<script type='text/x-template' id='myTPL'>

<h1> it is a header</h1>

</script>

Vue.component('',{

template:'#myTPL'

})

④.vue結尾的文件 ---》 單文件組件

.vue結尾的文件 不能直接被瀏覽器識別

1李茫、npm start之后啟動了頁面揭保，顯示內(nèi)容？魄宏？

①找package.json,

執(zhí)行scripts中的node build/dev-server.js

②加載index.html

③加載main.js掖举，

指定模板是App.Vue導出的組件類

指定一個路由詞典(router/index.js去配置)，而路由詞典是默認要加載Hello.vue

④而在App.vue中是有一個router-view

2娜庇、 模板項目的目錄介紹

①build 包含webpack、開發(fā)服務器等相關的設置

②config 針對項目做些配置

③node_modules 根據(jù)package.json中的dependencies和 devDependencies安裝所有的依賴

④src

assets 存儲資源文件 css方篮、js

components 放組件

router index.js 配置路由詞典

App.vue 根組件 (router-view)

main.js 創(chuàng)建一個Vue的示例名秀，同時指定路由模塊、要加載的頁面

⑤package.json

記錄工程信息藕溅，比如工程名稱匕得、依賴。巾表。汁掠。

3、demo list detail

①創(chuàng)建兩個組件

②配置路由詞典

③測試

④實現(xiàn)跳轉(zhuǎn)

⑤實現(xiàn)傳參

list --index--> detail

接收 （配置接收方的路由地址）

發(fā)送

在spa中 有一個組件 MyHeader.vue 渲染一個h1標簽集币；希望在List組件中 能夠調(diào)用MyHeader.vue

4考阱、單文件組件如何形成復合組件？

方式1：作為全局組件去調(diào)用

①創(chuàng)建.vue結尾的組件

MyHeader.vue

②到router/index.js中鞠苟，通過Vue.component 真正的全局組件

import MyHeader from '@/components/MyHeader',

Vue.component('my-header',MyHeader)

③作為標簽去調(diào)用組件

<my-header></my-header>

? 方式2：作為局部組件去調(diào)用

①創(chuàng)建組件

MyFooter.vue

②在需要調(diào)用該組件的地方乞榨，創(chuàng)建成一個局部組件

List.vue

import MyFooter from '@/components/MyFooter'

export default{

components:{

myfooter:MyFooter

}

}

③調(diào)用組件

<myfooter></myfooter>

練習：（14:40 - 14:55）

在src/components創(chuàng)建

ToDoBox.vue

ToDoList.vue

ToDoInput.vue

ToDoItem.vue

實現(xiàn)靜態(tài)頁面

5、如何在Vue的項目中使用第三方的樣式類文件当娱？

①在src/assets,先去創(chuàng)建一個css的文件夾

②將需要用到的樣式類文件拷貝到css文件夾中

③在main.js,直接引入

import './assets/css/bootstrap.css'

項目安排：

目標：使用Vue來實現(xiàn)學子商城的后臺管理界面

架構: SPA

login登錄

main 主頁面 吃既，能夠嵌套charts組件、productList組件跨细、userList組件

要求：

①默認加載login

②進入到main頁面鹦倚，默認加載charts組件

步驟:(16:40 - 17:10)

1、創(chuàng)建要用到的各個組件

2冀惭、配置路由詞典

3震叙、具體實現(xiàn)login

①在assets目錄下 去創(chuàng)建js/css/fonts文件夾掀鹅，引入對應的資源文件

（js文件只需要引入jquery jquery-flot）

②在main.js

import方式引入到工程，比如

import './assets/css/bootstrap.css'

③找到admin/login.html

將需要用到的模板內(nèi)容 拷貝Login.vue的template

④實現(xiàn)登錄功能（需要與服務器端通信）

4捐友、具體實現(xiàn)charts

...