Vue CLI 腳手架
文檔：https://cli.vuejs.org/zh/
具體步驟
- 第一步（僅第一次執(zhí)行）：全局安裝@vue/cli。
npm install -g @vue/cli - 第二步：切換到你要?jiǎng)?chuàng)建項(xiàng)目的目錄，然后使用命令創(chuàng)建項(xiàng)目
vue create xxxx - 第三步：啟動(dòng)項(xiàng)目
npm run serve
備注：
- 如出現(xiàn)下載緩慢請(qǐng)配置 npm 淘寶鏡像：npm config set registry
https://registry.npm.taobao.org - Vue 腳手架隱藏了所有 webpack 相關(guān)的配置，若想查看具體的 webpakc 配置，
請(qǐng)執(zhí)行：vue inspect > output.js
腳手架文件結(jié)構(gòu)
├── node_modules
├── public
│ ├── favicon.ico: 頁簽圖標(biāo)
│ └── index.html: 主頁面
├── src
│ ├── assets: 存放靜態(tài)資源
│ │ └── logo.png
│ │── component: 存放組件
│ │ └── HelloWorld.vue
│ │── App.vue: 匯總所有組件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 應(yīng)用包配置文件
├── README.md: 應(yīng)用描述文件
├── package-lock.json：包版本控制文件
關(guān)于不同版本的Vue
- vue.js與vue.runtime.xxx.js的區(qū)別：
- vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
- vue.runtime.xxx.js是運(yùn)行版的Vue，只包含：核心功能；沒有模板解析器。
- 因?yàn)関ue.runtime.xxx.js沒有模板解析器，所以不能使用template這個(gè)配置項(xiàng)，需要使用render函數(shù)接收到的createElement函數(shù)去指定具體內(nèi)容。
vue.config.js配置文件
- 使用vue inspect > output.js可以查看到Vue腳手架的默認(rèn)配置。
- 使用vue.config.js可以對(duì)腳手架進(jìn)行個(gè)性化定制，詳情見：https://cli.vuejs.org/zh
ref屬性
- 被用來給元素或子組件注冊(cè)引用信息（id的替代者）
- 應(yīng)用在html標(biāo)簽上獲取的是真實(shí)DOM元素，應(yīng)用在組件標(biāo)簽上是組件實(shí)例對(duì)象（vc）
- 使用方式：
- 打標(biāo)識(shí)：
<h1 ref="xxx">.....</h1>```或 ```<School ref="xxx"></School> - 獲?。?code>this.$refs.xxx
- 打標(biāo)識(shí)：
<template>
<div>
<h1 v-text="msg" ref="title"></h1>
<button @click="showDOM" ref="btn">點(diǎn)我輸出上方的DOM元素</button>
<School ref="sch"/>
</div>
</template>
<script>
// 引入School組件
import School from './components/School.vue'
export default {
name:'App',
components:{School},
data(){
return {
msg:'歡迎來學(xué)習(xí)ref'
}
},
methods:{
showDOM(){
console.log(this.$refs.title); //真實(shí)DOM元素
console.log(this.$refs.btn); //真實(shí)DOM元素
console.log(this.$refs.sch); //School組件的元素對(duì)象（vc）
}
}
}
</script>
<style>
</style>
props配置項(xiàng)
-
功能：讓組件接收外部傳過來的數(shù)據(jù)
-
傳遞數(shù)據(jù)：
<Demo name="xxx"/>
-
接收數(shù)據(jù)：
-
第一種方式（只接收）：
props:['name']
-
第二種方式（限制類型）：
props:{name:String}
-
第三種方式（限制類型、限制必要性、指定默認(rèn)值）：
-
props:{
name:{
type:String, //類型
required:true, //必要性
default:'老王' //默認(rèn)值
}
}
備注：props是只讀的，Vue底層會(huì)監(jiān)測你對(duì)props的修改，如果進(jìn)行了修改，就會(huì)發(fā)出警告，若業(yè)務(wù)需求確實(shí)需要修改，那么請(qǐng)復(fù)制props的內(nèi)容到data中一份，然后去修改data中的數(shù)據(jù)。
- 在data里面定義一個(gè)myAge變量，使用this接收props傳遞過來變量未age的數(shù)據(jù)
- 將動(dòng)態(tài)顯示的數(shù)據(jù)替換成myAge變量
- 在updateAge點(diǎn)擊事件里面修改myAge變量即可
mixin(混入)
- 功能：可以把多個(gè)組件共用的配置提取成一個(gè)混入對(duì)象
- 使用方式：
- 第一步定義混合（新建一個(gè)mixin.js文件）：
export const mixin = { methods:{ showName(){ alert(this.name) } }, mounted() { console.log('你好??！'); }, } export const mixin2 = { data() { return { x:200, y:100 } }, }- 第二步使用混入：
全局混入：Vue.mixin(xxx)- 在main.js中
// 引入Vue import Vue from 'vue' // 引入所有組件的父組件App import App from './App' //引入mixin.js import { mixin,mixin2 } from './mixin' // 關(guān)閉生產(chǎn)提示 Vue.config.productionTip = false //使用全局混入 Vue.mixin(mixin) Vue.mixin(mixin2) // 創(chuàng)建vm new Vue({ // el:'#app', render: h => h(App) }).$mount('#app')
mixins:['xxx']- 在需要混入的組件中引入mixin.js
import {mixin} from '../mixin' - 在與data平級(jí)使用mixins
mixins:[mixin]<script> // 引入一個(gè)mixin import {mixin} from '../mixin' export default { name:'School', data(){ return { name:'張三', sex:'男', } }, mixins:[mixin] } </script>
- 在main.js中
插件（install方法）
- 功能：用于增強(qiáng)Vue
- 本質(zhì)：包含install方法的一個(gè)對(duì)象，install的第一個(gè)參數(shù)是Vue，第二個(gè)以后的參數(shù)是插件使用者傳遞的數(shù)據(jù)。
- 定義插件（創(chuàng)建一個(gè)plugins.js文件）：
export default {
install(Vue,x,y,z) {
console.log(x,y,z)
//全局過濾器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
//定義全局指令
Vue.directive('fbind',{
//指令與元素成功綁定時(shí)（一上來）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入頁面時(shí)
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析時(shí)
update(element,binding){
element.value = binding.value
}
})
//定義混入
Vue.mixin({
data() {
return {
x:100,
y:200
}
},
})
//給Vue原型上添加一個(gè)方法（vm和vc就都能用了）
Vue.prototype.hello = ()=>{alert('你好啊')}
}
}
- 使用插件（在main.js里面使用）：
Vue.use()
// 引入Vue
import Vue from 'vue'
// 引入所有組件的父組件App
import App from './App'
// 引入插件
import plugins from './plugins'
// 關(guān)閉生產(chǎn)提示
Vue.config.productionTip = false
// 應(yīng)用（使用）插件
Vue.use(plugins,1,2,3)
// 創(chuàng)建vm
new Vue({
// el:'#app',
render: h => h(App)
}).$mount('#app')
scoped樣式
- 作用：讓樣式在局部生效，防止沖突。
- 寫法：
<style scoped>
webStorage
-
存儲(chǔ)內(nèi)容大小一般支持5MB左右（不同瀏覽器可能還不一樣）
-
瀏覽器端通過 Window.sessionStorage 和 Window.localStorage 屬性來實(shí)現(xiàn)本地存儲(chǔ)機(jī)制。
-
相關(guān)API：
-
xxxxxStorage.setItem('key', 'value');
該方法接受一個(gè)鍵和值作為參數(shù)，會(huì)把鍵值對(duì)添加到存儲(chǔ)中，如果鍵名存在，則更新其對(duì)應(yīng)的值。 -
xxxxxStorage.getItem('person');? 該方法接受一個(gè)鍵名作為參數(shù)，返回鍵名對(duì)應(yīng)的值。
-
xxxxxStorage.removeItem('key');? 該方法接受一個(gè)鍵名作為參數(shù)，并把該鍵名從存儲(chǔ)中刪除。
-
xxxxxStorage.clear()? 該方法會(huì)清空存儲(chǔ)中的所有數(shù)據(jù)。
-
-
備注：
- SessionStorage存儲(chǔ)的內(nèi)容會(huì)隨著瀏覽器窗口關(guān)閉而消失。
- LocalStorage存儲(chǔ)的內(nèi)容，需要手動(dòng)清除才會(huì)消失。
-
xxxxxStorage.getItem(xxx)如果xxx對(duì)應(yīng)的value獲取不到，那么getItem的返回值是null。 -
JSON.parse(null)的結(jié)果依然是null。
組件的自定義事件
-
一種組件間通信的方式，適用于：子組件 ===> 父組件
-
使用場景：A是父組件，B是子組件，B想給A傳數(shù)據(jù)，那么就要在A中給B綁定自定義事件（事件的回調(diào)在A中）。
-
綁定自定義事件：
-
第一種方式，在父組件中：
<Demo @student="test"/>或<Demo v-on:student="test"/> -
第二種方式，在父組件中：
<Demo ref="demo"/> ...... methods:{ test(){ ...... }, mounted(){ this.$refs.demo.$on('student',this.test) }
-
-
若想讓自定義事件只能觸發(fā)一次，可以使用
once修飾符，或$once方法。this.$refs.student.$once('student',this.getStudentName) //綁定自定義事件（一次性） -
觸發(fā)自定義事件（子組件中）：
this.$emit('student',數(shù)據(jù)) -
解綁自定義事件（父組件中）
this.$off('student') -
組件上也可以綁定原生DOM事件，需要使用
native修飾符。<Student ref="student" @click.native="show"/> -
注意：通過
this.$refs.xxx.$on('student',回調(diào))綁定自定義事件時(shí)，回調(diào)要么配置在methods中，要么用箭頭函數(shù)，否則this指向會(huì)出問題！
全局事件總線（GlobalEventBus）
-
一種組件間通信的方式，適用于任意組件間通信。
-
安裝全局事件總線（main.js中）：
new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安裝全局事件總線，$bus就是當(dāng)前應(yīng)用的vm }, ...... }) -
使用事件總線：
- 接收數(shù)據(jù)：A組件想接收數(shù)據(jù)，則在A組件中給$bus綁定自定義事件，事件的回調(diào)留在A組件自身。
methods(){ demo(data){......} } ...... mounted() { this.$bus.$on('xxxx',this.demo) }-
提供數(shù)據(jù)：
this.$bus.$emit('xxxx',數(shù)據(jù)) -
最好在beforeDestroy鉤子中，用$off去解綁當(dāng)前組件所用到的事件。哪里綁定自定義事件，就在哪里解綁
beforeDestroy(){ this.$bus.$off('xxxx') }
消息訂閱與發(fā)布（pubsub）
-
一種組件間通信的方式，適用于任意組件間通信。
-
使用步驟：
-
安裝pubsub：
npm i pubsub-js -
引入:
import pubsub from 'pubsub-js' -
接收數(shù)據(jù)：A組件想接收數(shù)據(jù)，則在A組件中訂閱消息，訂閱的回調(diào)留在A組件自身。
methods(){ demo(data){......} } ...... mounted() { this.pid = pubsub.subscribe('xxx',this.demo) //訂閱消息 } -
提供數(shù)據(jù)：
pubsub.publish('xxx',數(shù)據(jù)) -
最好在beforeDestroy鉤子中，用
pubSub.unsubscribe(this.pid)去取消訂閱。
-
nextTick
- 語法：
this.$nextTick(回調(diào)函數(shù))
this.$nextTick(function(){
this.$refs.inputTitle.focus()
})
- 作用：在下一次 DOM 更新結(jié)束后執(zhí)行其指定的回調(diào)。
- 什么時(shí)候用：當(dāng)改變數(shù)據(jù)后，要基于更新后的新DOM進(jìn)行某些操作時(shí)，要在nextTick所指定的回調(diào)函數(shù)中執(zhí)行。
Vue封裝的過度與動(dòng)畫
-
作用：在插入、更新或移除 DOM元素時(shí)，在合適的時(shí)候給元素添加樣式類名。
-
寫法：
-
準(zhǔn)備好樣式（可將v改為transition中的name中的值，即可只給name中值相同的使用）：
- 元素進(jìn)入的樣式：
- v-enter：進(jìn)入的起點(diǎn)
- v-enter-active：進(jìn)入過程中
- v-enter-to：進(jìn)入的終點(diǎn)
- 元素離開的樣式：
- v-leave：離開的起點(diǎn)
- v-leave-active：離開過程中
- v-leave-to：離開的終點(diǎn)
- 元素進(jìn)入的樣式：
-
使用
<transition>包裹要過度的元素，并配置name屬性：<transition name="hello"> <h1 v-show="isShow">你好??！</h1> </transition>
-
-
備注：若有多個(gè)元素需要過度，則需要使用：
<transition-group>，且每個(gè)元素都要指定key值。文章來源：http://www.zghlxwxcb.cn/news/detail-805000.html<transition-group name="hello" appear> <h1 v-show="!isShow" key="1">你好??！</h1> <h1 v-show="isShow" key="2">張三！</h1> </transition-group> -
第三方動(dòng)畫：https://animate.style/文章來源地址http://www.zghlxwxcb.cn/news/detail-805000.html
<transition-group appear name="animate__animated animate__bounce" enter-active-class="animate__swing" leave-active-class="animate__backOutUp" > <h1 v-show="!isShow" key="1">你好啊！</h1> <h1 v-show="isShow" key="2">張三！</h1> </transition-group>
到了這里，關(guān)于Vue2學(xué)習(xí)之第三章——Vue CLI腳手架的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
