首先，要進行腳手架的安裝
1）在安裝之前，我們需要先安裝vpm， 所以要先安裝一個node js(這個軟件的安裝很簡單，無腦下一步就行)
2）然后有了vpm之后，我們配置一個淘寶鏡像，有助於我們對腳手架的下載
npm config set registry https://registry.npm.taobao.org
3)安裝vue腳手架
npm install -g @vue/cli
等待他安裝完成，然后重新打開小黑窗口，輸入vue 如果能夠看到類似的界面，就表示安裝成功了
接下來，我們在桌面創建一個vue-test，做法是：在小黑窗口轉換到桌面，然后執行 vue create vue-test
然后他就會進行加載，最后到如下界面，就證明成功了
我們可以用上面的地址進行訪問，如果是同個局域網的同事，就可以通過第二個地址進行訪問
實現一個小案例如下：（本來是想呈現出school、student的組件，可是一直顯示不出來。。。）
我們創建一個gubi組件，然后讓其在APP.vue中引入，然后呈現
<template> <div class="demo"> <h4>{{name}}</h4> </div> </template> <script> export default{ data(){ return { name:'gubi' } } } </script> <style> </style>
<template> <div> <h3>hh</h3> <gubi></gubi> </div> </template> <script> import gubi from './components/gubi.vue' export default{ components:{ gubi } } </script> <style> </style>
腳手架文件結構
配置文件
使用 vue inspect >output.js 可以查看到Vue腳手架的默認配置
使用Vue.config.js可以對腳手架進行個性化定制
ref
1）被用來給元素或子組件注冊引用信息 （id的替代者）
2）應用在html標簽上獲取的是真實DOM元素，應用在組件標簽上是組件實例對象（vc）
3）使用方式 <h1 ref=“xxx”></h1> <School ref="xxx"></School>
在原生html中，如果我們要獲取某個標簽，通常是 ==》 【document.getElementById】 這種寫法
但vue並不推薦直接操作dom對象，他給了【ref】這個屬性，我們給想要過去的標簽配上這個屬性，就可以在控制台上查詢到
props
功能：讓組件接收外部傳過來的數據，我們可以通過props來自定義表情前內的屬性，如下框
使用props的三種方式如下： 第一種只接收 第二種限制數據類型 第三種限制類型，限制必要性，指定默認值
//第一種做法
//props:['name','age','sex']
//第二種做法，限制了數據類型
/* props:{
name:String,
age:Number,
sex:String
} */
methods:{
updateAge(){
this.myAge++
}
},
props:{
name:{
type:String,
required:true
},
age:{
type:Number,
default:99
},
sex:{
type:String,
required:true
}
}
備注：
props是只讀的，Vue底層會監測你對props的修改，如果進行了修改，就會發出警告，若業務需求確實需要修改，那么請復制props的內容到data中（但是要換個名字），然后去修改data中的數據，代碼如下：
<template> <div> <h4>{{name}}</h4> <h4>{{myAge}}</h4> <h4>{{sex}}</h4> <button @click="updateAge">修改年齡</button> <!-- 修改數據--> </div> </template> <script> export default{ data(){ return { //name:'gubi', //age:'18', //sex:'男' myAge:this.age } }, //第一種做法 //props:['name','age','sex'] //第二種做法，限制了數據類型 /* props:{ name:String, age:Number, sex:String } */ methods:{ //修改數據的方法 updateAge(){ this.myAge++ } }, props:{ name:{ type:String, required:true }, age:{ type:Number, default:99 }, sex:{ type:String, required:true } } } </script> <style> </style>
mixin
功能：可以把多個組件共用的配置提取成一個混入對象
使用方式：
第一步定義混合，例如： 其中maxin是名字，即我們其他地方調用時所需要輸入的內容
export const maxin = { methods:{ showName(){ alert(this.name) } }, }
第二步使用
1）全局混入
2）局部混入
插件
功能：用於增強Vue
本質：包含install方法的一個對象，install的第一個參數是Vue，第二個以后的參數是插件使用者傳遞的數據
定義插件： （創建一個js文件，名字隨意）
使用插件（在main.js進行引入）
scoped 樣式
我們在一個組件（比如App）中引入其他組件時，他們的樣式是放在App的style之下，也就是說，會有重復沖突問題，一個組件中的樣式可能應用在另一個組件中，如下
我只是在gubi當中定義了樣式，然后在mm中引用了相同class標簽，然后就呈現了出來，所以 scoped的作用就是，讓每一個組件的樣式只服務於自己
作用：讓樣式在局部生效，防止沖突
寫法：<style scoped>
總結TodoList案例
1.組件化i編碼
1）拆分靜態組件 組件要按照功能點拆分，命名不要於html元素沖突
2）實現動態組件 考慮好數據的存放位置，數據是一個組件在用，還是一些組件在用
1）一個組件在用，放在組件自身即可
2）一些組件在用，放在他們共用的父組件上
3）實現交互 從綁定事件開始
2.props適用於：
1）父組件 ==> 子組件 通信
2）子組件 ==> 父組件 通信 （要求父先給子一個函數）
3.使用v-model時要切記： v-model綁定的值不能時props傳過來的值，因為props時不可以被修改的
4.props傳過來的若是對象類型的值，修改對象中的屬性時Vue不會報錯，但不推薦這樣做
WebStorage
存儲內容大小一般在5MB左右
瀏覽器通過Window.sessionStorage和Window.loaclStorage屬性來實現本地存儲機制
相關API
備注
1）SessionStorage 存儲的內容會隨着瀏覽器窗口關閉而消失
2）LocalStorage存儲的內容，需要手動清除才會消失
3）xxxxStorage.getItem(xxx) 如果xxx對應的value獲取不到，那么getItem的返回值是null
4）JSON.parse(null)的結果依然是null
組件的自定義事件
1）一種組件間通信的方式 適用於：子組件==>父組件
2）使用場景：A是父組件，B是子組件，B想給A傳數據，那么就要在A中給B綁定自定義事件（事件的回調在A中）
3）綁定自定義事件
1）第一種方式：在父組件中， <Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>
2）第二種方式：在父組件中：大致如下的代碼
<Student ref="student"></Student> mounted(){ this.$refs.student.$on('atguigu',this.getStudentName) }
3）若想讓自定義事件只能觸發一次，可以使用once修飾符，或者$once方法
4）觸發自定義事件：this.$emit('atguigu',數據)
5）解綁自定義事件：this.$off('atguigu')
6）組件上也可以綁定原生DOM事件，需要使用native修飾符
全局事件總線
1）一種組件間通信的方式，適用於任意組件通信
2）安裝全局事件總線： (在main.js中給生命周期鈎子的【beforeCreate（）】創建全局總線)
new Vue({
el:'#app',
render: h => h(App),
//創建事件總線管理對象的第二種方式
beforeCreate(){
Vue.prototype.$bus = this
},
})
3）使用，若某個組件想要跟其他組件進行事件綁定，則可以大致如下例子
若其他組件想要用到該事件，則可以用一個button綁定事件，然后大致如下：
4）因為全局總線可能會綁定很多的事件，如果沒有及時的銷毀，會造成浪費，所以，要進行解綁
消息訂閱與發布
首先，需要下載一個庫（我這里下載的是pubsub-js）（竟然下載失敗了。。沒有進行實操）
使用步驟如下
1）引入
2）創建方創建事件
3）接收方事件
nextTick
1）語法： this.$nextTick(回調函數)
2）作用: 在下一次DOM更新結束后執行其指定的回調
3）什么時候用：當改變數據后，要基於更新后的新DOM進行某些操作時，要在nextTick所指定的回調函數中執行
過度與動畫
1）准備好樣式
元素進入的樣式
1）v-enter 進入的起點
2）v-enter-active 進入過程中
3）v-enter-to 進入的終點
元素離開的樣式
1）v-leave 離開的起點
2）v-leave-active 離開過程中
3）v-leave-to 離開的終點
2）使用 transition 包裹要過度的元素，並且配置name屬性，例子如下：
<template> <div> <button @click="isShow = !isShow">顯示/隱藏</button> <transition name="hello" appear> <h1 v-show="isShow">你好啊！</h1> </transition> </div> </template> <script> export default { name:'Test', data() { return { isShow:true } }, } </script> <style scoped> h1{ background-color: orange; } .hello-enter-active{ animation: atguigu 0.5s linear; } .hello-leave-active{ animation: atguigu 0.5s linear reverse; } @keyframes atguigu { from{ transform: translateX(-100%); } to{ transform: translateX(0px); } } </style>
插槽
1）作用：讓父組件可以向子組件指定位置插入html結構，也是一種組件間通信的方式，適用於 父組件 ==> 子組件
2）分類：默認插槽、具名插槽，作用域插槽
3）使用方式
1）默認插槽，就是沒有增加插槽name屬性的插槽
我們使用時，只需要將我們想要存放的位置上放上一個插槽標簽，然后在父組件定義並且使用即可
子組件
<template> <div class="category"> <h3>{{title}}分類</h3> <slot>我是插槽填放位置，當使用者傳遞具體結構時，我會出現</slot> <!-- <ul> <li v-for="(item,index) in listData" :key="index">{{item}}</li> </ul> --> </div> </template> <script> export default{ name:'Category', props:['title'] } </script> <style> .category{ background-color: #006666; width: 200px; height: 300px; } </style>
父組件
<template> <div class="cantainer"> <Category title="美食"> <h3>美食插槽</h3> </Category> <Category title="游戲"> <ul> <li v-for="(g,index) in games" :key="index">{{g}}</li> </ul> </Category> <Category title="電影"> <h3>電影插槽</h3> </Category> </div> </template> <script> import Category from './components/Category.vue' export default { name:'App', components:{Category}, data(){ return{ foods:['火鍋','燒烤','小龍蝦','牛排'], games:['紅色警戒','穿越火線','勁舞團','超級瑪麗'], films:['《教父》','《拆彈專家》','《你好，李煥英》','《尚硅谷》'] } }, } </script> <style> .cantainer{ display: flex; justify-content: space-around; } h3{ text-align: center; background-color: orange; } </style>
2）具名插槽，當我們所想要插入的插槽數量不是一個的時候，我們就需要給對應的插槽附上name，才能做到精准調用
子組件
<template> <div class="category"> <h3>{{title}}分類</h3> <slot name="center">我是插槽填放位置，當使用者傳遞具體結構時，我會出現</slot> <slot name="footer">我是插槽填放位置，當使用者傳遞具體結構時，我會出現</slot> <!-- <ul> <li v-for="(item,index) in listData" :key="index">{{item}}</li> </ul> --> </div> </template> <script> export default{ name:'Category', props:['title'] } </script> <style> .category{ background-color: #006666; width: 200px; height: 300px; } </style>
父組件
<template> <div class="cantainer"> <Category title="美食"> <h3 slot="center">美食插槽</h3> </Category> <Category title="游戲"> <ul slot="center"> <li v-for="(g,index) in games" :key="index">{{g}}</li> </ul> <div class="foot" slot="footer"> <a>單機游戲</a> <a>網絡游戲</a> </div> </Category> <Category title="電影"> <h3 slot="center">電影插槽</h3> <div class="foot" slot="footer"> <a>經典</a> <a>熱門</a> <a>推薦</a> </div> <h4 slot="footer" style="text-align: center;">歡迎觀影</h4> </Category> </div> </template> <script> import Category from './components/Category.vue' export default { name:'App', components:{Category}, data(){ return{ foods:['火鍋','燒烤','小龍蝦','牛排'], games:['紅色警戒','穿越火線','勁舞團','超級瑪麗'], films:['《教父》','《拆彈專家》','《你好，李煥英》','《尚硅谷》'] } }, } </script> <style> .cantainer{ display: flex; justify-content: space-around; } .foot{ display: flex; justify-content: space-around; } h3{ text-align: center; background-color: orange; } </style>
3）作用域卡槽，有些時候，父組件並不像以上兩種情況，數據存在於父組件這里，那么如果數據存在於子組件的話，然后父組件又要獲取到子組件的數據，那么該如何操作呢？作用域插槽幫我們解決了這個問題
在作用域卡槽中，有這樣一個屬性，我們在插槽上定義data()中的games屬性
然后再父組件中要調用的話
1）包含在 <template> </template>中
2）給其賦予屬性 scope=“tmp” (其中tmp是我們傳遞過來的參數，如果想要調用里面的數據，就調用tmp.games【本例子中是games，具體問題具體分析】)
子組件
<template> <div class="category"> <h3>{{title}}分類</h3> <slot :games="games">我是插槽填放位置，當使用者傳遞具體結構時，我會出現</slot> <!-- <ul> <li v-for="(item,index) in listData" :key="index">{{item}}</li> </ul> --> </div> </template> <script> export default{ name:'Category', props:['title'], data(){ return{ games:['紅色警戒','穿越火線','勁舞團','超級瑪麗'], } }, } </script> <style> .category{ background-color: #006666; width: 200px; height: 300px; } </style>
父組件
<template> <div class="cantainer"> <Category title="游戲"> <template scope="tmp"> <ul> <li v-for="(g,index) in tmp.games" :key="index">{{g}}</li> </ul> </template> </Category> <Category title="游戲"> <template scope="tmp"> <ol> <li style="color: red;" v-for="(g,index) in tmp.games" :key="index">{{g}}</li> </ol> </template> </Category> <Category title="游戲"> <template scope="tmp"> <h4 style="color: black;" v-for="(g,index) in tmp.games" :key="index">{{g}}</h4> </template> </Category> </div> </template> <script> import Category from './components/Category.vue' export default { name:'App', components:{Category}, } </script> <style> .cantainer{ display: flex; justify-content: space-around; } .foot{ display: flex; justify-content: space-around; } h3{ text-align: center; background-color: orange; } </style>