====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)建的凳谦。
組件樹的存在R涑!
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
...