VUE learning (13), ref attribute, props configuration item, minix mixing, custom plug-in, scoped style
1, ref attribute
<template>
<div>
<h1 v-text="msg" ref="title"></h1>
<button ref="btn" @click="showDOM">Click on the top of my output DOM element</button>
<School ref="sch"/>
</div>
</template>
<script>
//Introducing School components
import School from './components/School'
export default {
name:'App',
components:{School},
data() {
return {
msg:'Welcome to study Vue!'
}
},
methods: {
showDOM(){
console.log(this.$refs.title) //Real DOM elements
console.log(this.$refs.btn) //Real DOM elements
console.log(this.$refs.sch) //Instance object of School component (vc)
}
},
}
</script>
2, props configuration item
The value passed in by props should not be modified after it is passed in. If it needs to be modified, it should be modified according to specific methods (there are below)
to configure:
<template>
<div>
<h1>{{msg}}</h1>
<h2>Student Name:{{name}}</h2>
<h2>Student gender:{{sex}}</h2>
<h2>Student age:{{myAge+1}}</h2>
<button @click="updateAge">Try to modify the age of the received</button>
</div>
</template>
<script>
export default {
name:'Student',
data() {
console.log(this)
return {
msg:'I am a xxx College Students',
myAge:this.age //The data of props configuration item cannot be easily modified. If you really want to modify it, use this method
}
},
methods: {
updateAge(){
this.myAge++
}
},
//Simple claim receipt
// props:['name','age','sex']
//Limit the type of data while receiving
/* props:{
name:String,
age:Number,
sex:String
} */
// required and default cannot exist at the same time
//At the same time of receiving data: type restriction + default value designation + necessity restriction
props:{
name:{
type:String, //The type of name is a string
required:true, //name is necessary
},
age:{
type:Number,
default:99 //Default value
},
sex:{
type:String,
required:true
}
}
}
</script>
use
<template>
<div>
<Student name="Li Si" sex="female" :age="18" />
</div>
</template>
<script>
import Student from "./components/Student";
export default {
name: "App",
components: { Student }
};
</script>
props configuration item
-
Function: let the component receive the data from the outside
-
Transfer data: < demo name = "XXX" / >
-
Receive data:
-
The first method (receive only):
props:['name']
- Second method (restriction type):
props:{name:String}
- The third method (restriction type, restriction necessity, specifying default value):
props:{
name:{
type:String, //type
required:true, //necessity
default:'Lao Wang' //Default value
}
}
Note: props is read-only. Vue bottom layer will monitor your modification of props. If it is modified, it will issue a warning. If the business requirements really need to be modified, please copy the contents of props into data, and then modify the data in data.
3, mixin (mixed)
1. Function:
The configuration shared by multiple components can be extracted into a mixed object
2. Usage:
Step 1: define mixing:
{
data(){....},
methods:{....}
....
}
Step 2: use blending:
Global blending: Vue mixin(xxx)
Local mixing: mixins:['xxx ']
mixin.js file
/* Public configuration of multiple components */
export const hunhe = {
methods: {
showName(){
alert(this.name)
}
},
mounted() {
console.log('How do you do!')
},
}
export const hunhe2 = {
data() {
return {
x:100,
y:200
}
},
}
Local use (single component)
<template>
<div>
<h2 @click="showName">School Name:{{name}}</h2>
<h2>School address:{{address}}</h2>
</div>
</template>
<script>
//Introduce a hunhe (local)
// import {hunhe,hunhe2} from '../mixin'
export default {
name:'School',
data() {
return {
name:'xxx university',
address:'Beijing',
x:666 //The integration of data and blending is mainly based on the current data, but the life cycle hooks are required, and the hooks in the blending are executed first
}
},
// Use a hunhe (local)
// mixins:[hunhe,hunhe2],
}
</script>
Global (in main.js)
//Introduce Vue
import Vue from 'vue'
//Introduce App
import App from './App.vue'
// Global blending
import {hunhe,hunhe2} from './mixin'
//Turn off Vue's production prompt
Vue.config.productionTip = false
// Global mixed use
Vue.mixin(hunhe)
Vue.mixin(hunhe2)
//Create vm
new Vue({
el:'#app',
render: h => h(App)
})
4, Custom plug-ins
1. Features: for enhancing Vue
2. Essence: an object containing the install method. The first parameter of install is Vue, and the second parameter is the data passed by the plug-in user.
3. Define plug-ins:
object.install = function (Vue, options) {
// 1. Add global filter
Vue.filter(....)
// 2. Add global instruction
Vue.directive(....)
// 3. Configure global mixing (integration)
Vue.mixin(....)
// 4. Add instance method
Vue.prototype.$myMethod = function () {...}
Vue.prototype.$myProperty = xxxx
}
4. Using plug-in: Vue use()
Custom plug-in file pbugin js
export default {
install(Vue,x,y,z){
console.log(x,y,z)
//Global filter
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
//Define global instructions
Vue.directive('fbind',{
//When the instruction is successfully bound to the element (I)
bind(element,binding){
element.value = binding.value
},
//When the element of the instruction is inserted into the page
inserted(element,binding){
element.focus()
},
//When the template where the instruction is located is parsed again
update(element,binding){
element.value = binding.value
}
})
//Define blending
Vue.mixin({
data() {
return {
x:100,
y:200
}
},
})
//Add a method to the Vue prototype (vm and vc can be used)
Vue.prototype.hello = ()=>{alert('How do you do')}
}
}
use
<template>
<div>
<h2>Student Name:{{name}}</h2>
<h2>Student gender:{{sex}}</h2>
<input type="text" v-fbind:value="name">
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
name:'Zhang San',
sex:'male'
}
},
}
</script>
<template>
<div>
<h2>School Name:{{name | mySlice}}</h2>
<h2>School address:{{address}}</h2>
<button @click="test">Let me test one hello method</button>
</div>
</template>
<script>
export default {
name:'School',
data() {
return {
name:'xxx university atguigu',
address:'Beijing',
}
},
methods: {
test(){
this.hello()
}
},
}
</script>
5, scoped style and lang attribute specify style language
The styles in the style of each plug-in will be integrated finally. If the style class name and id in multiple plug-ins are the same, there may be style rendering errors. At this time, use scoped to solve this problem
Function: make the style take effect locally and prevent conflicts.
Writing method: < style scoped >
<style scoped>
.demo{
background-color: skyblue;
}
</style>
When using lang attribute, if there is no compilation environment such as less, it needs to be installed
If the lang attribute is written, it must be assigned. If not, css is the default
<style lang="less" scoped>
.demo{
background-color: pink;
.ceshi{
font-size: 40px;
}
}
</style>