一、ref屬性

? ? ? ? 1.被用來給元素或子組件注冊引用信息（id的替代者）

? ? ? ? 2.應用在html標簽上獲取的是真實DOM元素，用在組件標簽上是組件實例對象

? ? ? ? 3.使用方式：

? ? ? ? ? ? ? ? (1).打標識：<h1 ref="xxx">...</h1> 或 <School ref="xxx" />

? ? ? ? ? ? ? ? (2).獲取：this.$refs.xxx

<template><div><h2 v-text="msg" ref="text"></h2><button @click="showDOM" ref="btn">點擊獲取DOM元素</button><School ref="sch"/></div>
</template><script>import School from './Components/School'export default {name:'App',components:{School},data() {return {msg:'歡迎學習CLI！！！'}},methods: {showDOM(){console.log(this.$refs.text) //真實DOM元素console.log(this.$refs.btn) //真實DOM元素console.log(this.$refs.sch) //School組件的實例對象}},}
</script>

二、props配置

? ? ? ? 功能：讓組件接收外部傳過來的數據

? ? ? ? ? ? ? ? (1).傳遞數據：

? ? ? ? ? ? ? ? ? ? ? ? <Demo name="xxx">

? ? ? ? ? ? ? ? (2).接收數據：

? ? ? ? ? ? ? ? ? ? ? ? 第一種方式（只接收）：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? props:['name']

? ? ? ? ? ? ? ? ? ? ? ? 第二種方式（限制類型）：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? props：{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? name:String

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ? ? 第三種方式（限制類型、限制必要性、指定默認值）：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? props：{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? name:{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? type:String, //類型

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? required:true, //必要性

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? default:'張三' //默認值

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? 備注：props是只讀的，Vue底層會監測你對props的修改，就會發出警告，若業務需求確實需要修改，那么請復制props的內容到data中一份，然后去修改data中的數據。

????????School.vue:

<template><div class="school"><h2>{{ msg }}</h2><h2>{{ name }}</h2><h2>{{ myAge+1 }}</h2><h2>{{ sex }}</h2><button @click="updateAge">點擊修改年齡</button></div>
</template><script>export default {name:'Student',data() {return {msg:'歡迎學習CLI！！！',myAge:this.age}},methods: {updateAge(){this.myAge++}},// 簡單聲明接收props:['name','age','sex']//接收的同時對數據進行類型限制// props:{//     name:String,//     sex:String,//     age:Number// }//接收的同時對數據進行類型限制+默認值的指定+必要性的限制// props:{//     name:{//         type:String,//         required:true//     },//     age:{//         type:Number,//         default:18//     },//     sex:{//         type:String,//         required:true//     }// }}
</script>

?????????App.vue:

<template><div><Student name="張三" :age="18" sex="男"/></div>
</template><script>import Student from './Components/Student'export default {name:'App',components:{Student},}
</script>

三、mixin配置

? ? ? ? 1.功能：可以把多個組件共用的配置提取成一個混入對象

? ? ? ? 2.使用方式：

? ? ? ? ? ? ? ? (1).定義混合：

? ? ? ? ? ? ? ? ? ? ? ? {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? data(){...},

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? methods:{...},

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ...

????????????????????????}

? ? ? ? ? ? ? ? (2).使用混合：

? ? ? ? ? ? ? ? ? ? ? ? (1.全局混入：Vue.mixin(xxx)

? ? ? ? ? ? ? ? ? ? ? ? (2.局部混入：mixins:['xxx']

/* 定義mixin.js */
export const mixin = {methods: {showName(){alert(this.name)}},mounted() {console.log('你好啊!')},
}export const mixin2 = {data() {return {x:100,y:200}},
}  

/* 全局混入 */
//全局混入會在所有的Vue節點上混入
import Vue from "vue";
import App from "./App"
import {mixin,mixin2} from './mixin'Vue.mixin(mixin)
Vue.mixin(mixin2)Vue.config.productionTip = falsenew Vue({el:'#App',render: h => h(App)
})

/* 局部混入 */
<template><div><h2 @click="showName()">{{ name }}</h2><h2>{{ sex }}</h2></div>
</template><script>import {mixin,mixin2} from '../mixin'export default {name:'Student',data() {return {name:'張三',sex:'男',x:666 //若組件中已有定義變量，則優先使用組件中定義的變量}},//若組件中已經定義相同生命周期鉤子，則使用兩遍對應的生命周期鉤子mounted(){alert('你好啊!') },mixins:[mixin,mixin2]}
</script>

四、插件

? ? ? ? 1.功能：用于增強Vue

? ? ? ? 2.本質：包含install方法的一個對象，install的第一個參數是Vue，第二個以后的參數是插件使用者傳遞的參數。

? ? ? ? 3.定義插件：

? ? ? ? ? ? ? ? 對象.install = function (Vue,options) {

????????????????????????Vue.filter(......)?//添加全局過濾器

? ? ? ? ? ? ? ? ? ? ? ? Vue.directive(......) //添加全局指令

? ? ? ? ? ? ? ? ? ? ? ? Vue.mixin(......) //配置全局混入

? ? ? ? ? ? ? ? ? ? ? ? //添加實例方法

? ? ? ? ? ? ? ? ? ? ? ? Vue.prototype.$myMethod = function () {......}

????????????????????????Vue.prototype.$myProperty= xxx

? ? ? ? ? ? ? ? }

? ? ? ? 4.使用插件：Vue.use()

/* 定義plugins插件 */
export default {install(Vue){console.log("@@install",Vue)//過濾器Vue.filter('mySlice',function(value) {return value.slice(0,2)})//自定義指令Vue.directive('fbind',{bind(element,binding){element.value = binding.value},inserted(element,binding){element.focus()},updat(element,binding) {element.value = binding.value},})//mixinVue.mixin({data() {return {x:100}},})//在Vue原型上添加一個方法Vue.prototype.hello = () => (alert('你好呀!'))},
}

/* 在main.js中使用插件 */
import Vue from "vue";
import App from "./App"
import plugins from "./plugins";Vue.config.productionTip = falseVue.use(plugins)new Vue({el:'#App',render: h => h(App)
})

/* School.vue */
<template><div><h2>{{ name | mySlice }}</h2><h2>{{ address }}</h2><button @click="test">點擊我</button></div>
</template><script>export default {name:'School',data() {return {name:'清華大學',address:'北京'}},methods:{test(){this.hello()}}}
</script>/* Student.vue */
<template><div><h2>{{ name }}</h2><h2>{{ sex }}</h2><input type="text" v-fbind:value="name"></div>
</template><script>export default {name:'Student',data() {return {name:'張三',sex:'男',}},}
</script>

五、scoped樣式

? ? ? ? 1.作用：讓樣式在局部生效，防止沖突。

? ? ? ? 2.寫法：<style scoped>

? ? ? ? 當兩個組件的css樣式名相同時，后導入的組件會覆蓋掉先導入組件中相同樣式名的樣式，style中引入scoped樣式即可分割作用域。

/* School.vue */
<template><div class="demo"><h2>{{ name | mySlice }}</h2><h2>{{ address }}</h2></div>
</template><script>export default {name:'School',data() {return {name:'清華大學',address:'北京'}},}
</script><style scoped>.demo{background-color: orange;}
</style>/* Student */
<template><div class="demo"><h2 class="font-color">{{ name }}</h2><h2>{{ sex }}</h2></div>
</template><script>export default {name:'Student',data() {return {name:'張三',sex:'男',}},}
</script><style lang="less" scoped>.demo{background-color: skyblue;.font-color{color: orange;}}
</style>