1.框架和庫的區別
框架(framework):有着自己的語法特點、都有對應的各個模塊。
庫(library):專注於一點。
框架的好處:
-
提到代碼的質量,開發速度
-
提高代碼的複用率
-
降低模塊之間的耦合度(高內聚低耦合)
UI:user interface
GUI:graphical user interface
CLI:command line interface
API:application interface
思維模式的轉換:從操作DOM的思維模式 切換到以數據爲主。
2.Vue概述
1、what
是一個漸進式的構建用戶界面的js框架
2、where
小到的簡單的表單處理,大到複雜的數據操作比較頻繁的單頁面應用程序
3、why
-
方便閱讀的中文文檔
-
容易上手 (學習曲線比較緩和)
-
體積小
-
基於組件化的開發方式
-
代碼的可讀性、可維護性得到了提高
4、how
工作方式:可以通過豐富的指令擴展模板,可以通過各種各樣的插件來增強功能
搭建環境
方式1
全局安裝 vue-cli
-
$ npm install --global vue-cli
創建一個基於 webpack 模板的新項目
-
$ vue init webpack my-project
安裝依賴,走你
-
$ cd my-project
-
$ npm install
-
$ npm run dev
方式2
直接引入對應的js文件
3.Vue中基礎知識
1、雙花括號
mustache(鬍子)/interpolation(插值表達式)
語法:
-
<any>{{表達式}}</any>
作用:將表達式執行的結果 輸出當調用元素的innerHTML中;還可以將數據綁定到視圖。
2、指令-循環指令
基本語法1:
-
<any v-for="tmp in array"></any>
基本語法2:
-
<any v-for="(value,index) in array"></any>
作用:在遍歷array這個集合時,將臨時變量保存在tmp中,創建多個any標籤。
3、指令-選擇指令
語法:
-
<any v-if="表達式"></any>
-
<any v-else-if="表達式"></any>
-
<any v-else="表達式"></any>
作用:根據表達式執行結果的真假,來決定是否要將當前的這個元素 掛載到DOM樹
4、指令-事件綁定
語法:
-
<any v-on:eventName="handleEvent"></any>
作用:給指定的元素 將handleEvent的方法綁定給指定eventName事件。
5、指令-屬性綁定
基本語法:
-
<any v-bind:myProp="表達式"></any>
補充,支持簡寫:
-
<any :myProp="表達式"></any>
作用:將表達式執行的結果綁定到當前元素的myProp屬性。
-
<img v-bind:src="'img/'+myImg" alt="">
動態樣式綁定:
-
<p :style="{backgroundColor:myBGColor}">動態樣式綁定</p>
動態樣式類綁定:
-
<h1 :class="{myRed:false}">動態樣式類的綁定</h1>
6、指令-雙向數據綁定
方向1:數據綁定到視圖
方向2:將視圖中(表單元素)用戶操作的結果綁定到數據
基本語法:
-
<表單元素 v-model="變量"></表單元素>
4.組件化
組件:組件就是可被反覆使用的,帶有特定功能的視圖。
所謂的組件化,就像玩積木一樣,把封裝的組件進行復用,把積木(組件)拼接在一起,構成一個複雜的頁面應用程序。
組件樹就是由各個組件構成的一種數據結構,它存在的意義是爲了幫梳理應用程序。
1、組件的創建
全局組件:
-
Vue.component('my-com',{
-
template:`
-
<h2>it is a header</h2>
-
`
-
})
局部組件:
-
new Vue({
-
components:{
-
'my-footer':{
-
template:''
-
}
-
}
-
})
2、組件使用
作爲普通的標籤去使用
-
<my-com></my-com>
3、注意事項
-
組件的id和使用方式 遵循烤串式命名方式:a-b-c
-
如果一個組件 要渲染多個元素,將多個元素放在一個頂層標籤中,比如div、form
-
全局組件可以用在id爲example的範圍內的任何一個組件內部,直接調用可以;但是局部組件只能在父模板中直接調用
5.自定義指令
創建:
-
Vue.directive('change',{
-
bind:function(el,bindings){
-
//首次調用
-
},
-
update:function(el,bindings){
-
//只要是有數據變化,都會調用
-
},
-
unbind:function(){
-
//解綁
-
}
-
})
使用:
-
<any v-change="count"></any>
6.過濾器
過濾器是針對一些數據 進行篩選、過濾、格式化等相關的處理,變成我們想要的數據。
過濾器的本質 就是一個帶有參數帶有返回值的方法。
Vue1.* 支持內置的過濾器,但是Vue2.* 就不再內置過濾器,但是支持自定義過濾器。
1、過濾器的創建和使用
1.創建
-
Vue.filter(
-
'myFilter',
-
function(myInput){
-
//myInput是在調用過濾器時,管道前表達式執行的結果
-
//針對myInput,按照業務需求做處理
-
//返回
-
return '處理後的結果'
-
})
2.使用
-
<any>{{expression | myFilter}}</any>
2、如何在調用過濾器時,完成參數的發送和接受
1.發送
-
<any>{{expression | myFilter(參數1,參數2)}}</any>
2.接受
-
Vue.filter('myFilter',function(myInput,參數1,參數2){
-
return '處理後的結果'
-
})
7.複合組件
知識回顧:
-
Vue.component('my-header',{
-
template:`<div></div>`
-
});
-
-
<my-header></my-header>
複合組件:並不是新的概念,就是一個組件,只不過這個組件中 可以調用其他的組件。
注意事項:
1.組件要渲染的內容 取決於在定義組件時template
-
<my-list>
-
<my-item></my-item>
-
</my-list>
效果是出不來的。
2.允許在一個組件中,直接來調用另外一個組件。
8.生命週期
四個階段:
-
create 準備工作 (數據的初始化。。。)
-
mount 掛載前後針對元素進行操作
-
update 數據發生變化,
-
destroy 清理工作 (關閉定時器、集合清空..)
-
beforeCreate/created
-
beforeMount/mounted
-
beforeUpdate/updated
-
beforeDestroy/destroyed
9.常用屬性
1、watch
1.表單元素的雙向數據綁定
-
v-model="myValue"
2.監聽
-
watch:{
-
myValue:function(newValue,oldValue){
-
-
}
-
}
2、computed
計算屬於是用於在模板中,搞定複雜的業務邏輯,因爲有依賴緩存。
1.指定計算屬性
-
computed:{
-
myHandle:function(){
-
return 數據
-
}
-
}
2.調用
-
<any>{{myHandle}}</any>
10.組件間通信
1、父與子通信 (props down)
1.發送
-
<son myName='zhangsan'></son>
2.接受到son組件:
-
Vue.component('son',{
-
props:['myName'],
-
template:`
-
<p>{{myName}}</p>
-
`
-
})
2、子與父通信 (events up)
1.綁定
-
methods:{
-
handleEvent:function(msg){}
-
}
-
<son @customEvent="handleEvent"></son>
2.觸發
子組件內部:
-
this.$emit(‘customEvent’,100);
3、ref(reference 引用/參考 外號)
幫助在父組件中 得到子組件中的數據、方法。
1.指定ref屬性
-
<son ref="mySon"></son>
2.根據ref得到子組件實例
-
this.$refs.mySon
4、$parent
this.$parent得到父組件的實例
5、兄弟組件通信
1.
-
var bus = new Vue();
2.接收方
-
bus.$on('eventName',function(msg){})
3.發送方
-
bus.$emit('eventName',123);
11.補充組件創建的方式
1、直接在template屬性中指定模板內容
1.全局組件
-
Vue.component
2.局部組件
-
{
-
components:{
-
'my-footer':{template:``}
-
}
-
}
2、.vue結尾的文件
-
<template></template>
-
<script></script>
-
<style></style>
3、單獨指定一個模板內容
-
<script
-
id='myContent'
-
type='text/x-template'>
-
</script>
-
-
Vue.component('',{
-
template:'#myContent'
-
})
12.路由模塊
路由模塊的本質 就是建立起url和頁面之間的映射關係。
1、SPA的基本概念和工作原理
SPA:single page application 單一頁面應用程序,只有一個完整的頁面;它在加載頁面時,不會加載整個頁面,而是隻更新某個指定的容器中內容,比如Gmail、移動的webApp。
工作原理:
-
解析地址欄:完整的頁面地址、路由地址
-
根據路由地址從路由詞典中找到真正的要加載的頁面
-
發起ajax請求:請求要加載的頁面
-
像指定的容器中插入加載來的頁面
2、路由模塊的基本使用
專業術語:
-
router路由器
-
route路由
-
routes 路由數組(路由詞典)
1.引入 vue.js vue-router.js
2.指定一個容器
-
<router-view></router-view>
3.創建業務所需要用到的組件類
-
var MyLogin = Vue.component()
4.配置路由詞典
-
const myRoutes = [
-
{path:'',component:MyLogin},
-
{path:'/login',component:MyLogin}
-
];
-
-
const myRouter = new VueRouter({
-
routes:myRoutes
-
})
-
-
new Vue({
-
router:myRouter
-
})
5.測試
修改地址欄中的路由地址,測試看加載的組件是否正確
注意事項:
1.先引入vue,再引入插件
2.一定要指定router-view
3.route路由 {path:'',component:}
routes:路由數組 []
router:路由器,按照指定的路由規則去訪問對應的組件 new VueRouter
3、使用路由模塊來實現頁面跳轉的方式
方式1:
直接修改地址欄
方式2:
-
this.$router.push(‘路由地址’);
方式3:
-
<router-link
-
to="路由地址"></router-link>
4、完成參數的傳遞
在頁面之間跳轉的時候,在有些場景下,需要同時指定參數
1.明確發送方和接收方
-
list --20--> detail
2.配置接收方的路由地址
-
/detail --》 /detail/:index
-
-
this.$route.params.index
3.發送
-
routerLink to="/detail/20"
-
this.$router.push('/detail/20')
5、路由嵌套
在一個路由中,path對應一個component,如果這個component需要根據
不同的url再加載其他的component,稱之爲路由的嵌套
舉例:比如A組件現在需要根據不同的url,加載B組件或者C組件
1.給A組件指定一個容器
-
<router-view></router-view>
2.配置路由詞典
-
{
-
path:'/a',
-
component:A,
-
children:[
-
{path:'/b',component:B}
-
]
-
}
需求:現在有兩個組件,分別是login/mail,建立SPA。
在此基礎上,希望mail組件 嵌套inbox/outbox/draft
補充:在設置子路由,路由匹配規則依然是適用的,只不過路由地址爲空和異常,要攜帶父組件的路由地址
-
/mail /mail/draft
13.搭建基於CLI開發環境的方式
1.指定一個文件夾: C:\xampp\htdocs\framework\vue\project
2.將tpls.zip拷貝到project中
3.右鍵單擊壓縮包,解壓縮到當前文件夾
4.進入到tpls
5.同時按下shift和鼠標右鍵,選擇在此位置打開命令行串口
6.執行npm install
7.執行npm start