Bootstrap Vue

====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

...

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末淫半,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子匣砖,更是在濱河造成了極大的恐慌科吭,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,744評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件猴鲫,死亡現(xiàn)場離奇詭異对人,居然都是意外死亡,警方通過查閱死者的電腦和手機拂共,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,505評論 3 392
  • 文/潘曉璐 我一進店門棘脐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人陨收,你說我怎么就攤上這事岸啡。” “怎么了抚恒?”我有些...
    開封第一講書人閱讀 163,105評論 0 353
  • 文/不壞的土叔 我叫張陵咱台,是天一觀的道長。 經(jīng)常有香客問我俭驮,道長回溺,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,242評論 1 292
  • 正文 為了忘掉前任混萝,我火速辦了婚禮遗遵,結果婚禮上,老公的妹妹穿的比我還像新娘逸嘀。我一直安慰自己车要,他們只是感情好,可當我...
    茶點故事閱讀 67,269評論 6 389
  • 文/花漫 我一把揭開白布崭倘。 她就那樣靜靜地躺著屯蹦,像睡著了一般。 火紅的嫁衣襯著肌膚如雪绳姨。 梳的紋絲不亂的頭發(fā)上登澜,一...
    開封第一講書人閱讀 51,215評論 1 299
  • 那天,我揣著相機與錄音飘庄,去河邊找鬼脑蠕。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的谴仙。 我是一名探鬼主播迂求,決...
    沈念sama閱讀 40,096評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼晃跺!你這毒婦竟也來了揩局?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,939評論 0 274
  • 序言:老撾萬榮一對情侶失蹤掀虎,失蹤者是張志新(化名)和其女友劉穎凌盯,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體烹玉,經(jīng)...
    沈念sama閱讀 45,354評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡驰怎,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,573評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了二打。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片县忌。...
    茶點故事閱讀 39,745評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖继效,靈堂內(nèi)的尸體忽然破棺而出症杏,到底是詐尸還是另有隱情,我是刑警寧澤瑞信,帶...
    沈念sama閱讀 35,448評論 5 344
  • 正文 年R本政府宣布鸳慈,位于F島的核電站,受9級特大地震影響喧伞,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜绩郎,卻給世界環(huán)境...
    茶點故事閱讀 41,048評論 3 327
  • 文/蒙蒙 一潘鲫、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧肋杖,春花似錦溉仑、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,683評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至津畸,卻和暖如春振定,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背肉拓。 一陣腳步聲響...
    開封第一講書人閱讀 32,838評論 1 269
  • 我被黑心中介騙來泰國打工后频, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 47,776評論 2 369
  • 正文 我出身青樓卑惜,卻偏偏與公主長得像膏执,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子露久,可洞房花燭夜當晚...
    茶點故事閱讀 44,652評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 第一章 Vue概述 what? Vue是實現(xiàn)UI層的漸進式js框架更米,核心庫關注視圖層,簡單的ui構建毫痕,復雜的路由控...
    fastwe閱讀 715評論 0 0
  • Vue 實例 屬性和方法 每個 Vue 實例都會代理其 data 對象里所有的屬性:var data = { a:...
    云之外閱讀 2,207評論 0 6
  • 1.css只在當前組件起作用答:在style標簽中寫入scoped即可 例如: 2.v-if 和 v-show 區(qū)...
    小棋子js閱讀 515評論 0 0
  • 快速完成一個包含前后端的todolist應用征峦,利用Bootstrap+Vue+Flask是個不錯的選擇。 后臺: ...
    crazy_banana閱讀 2,581評論 2 5
  • 組件簡介 組件系統(tǒng)是Vue.js其中一個重要的概念镇草,它提供了一種抽象眶痰,讓我們可以使用獨立可復用的小組件來構建大型應...
    前端一菜鳥閱讀 860評論 0 16