Atguigu---- scaffold --02- use scaffold (2)

ref attribute

1. Used to register reference information for an element or subcomponent （id The replacement of ）
2. Apply to html What you get on the label is real DOM Elements , Applied on the component label is the component instance object （vc）
3. Usage mode ：
   1. Marking ：<h1 ref="xxx">.....</h1> or <School ref="xxx"></School>
   2. obtain ：this.$refs.xxx

<template>
	<div>
		<h1 v-text="msg" ref="title"></h1>
		<button ref="btn" @click="showDOM"> Click on the top of my output DOM Elements </button>
		<School ref="sch"/>
	</div>
</template>

<script> // introduce School Components  import School from './components/School' export default {
       name:'App', components:{
      School}, data() {
       return {
       msg:' Welcome to learn Vue！' } }, methods: {
       showDOM(){
       console.log(this.$refs.title) // real DOM Elements  console.log(this.$refs.btn) // real DOM Elements  console.log(this.$refs.sch) //School Component instance objects （vc） } }, } </script>

props Configuration item

1. function ： Let the component receive the data transmitted from the outside

2. To transfer data ：<Demo name="xxx"/>

3. receive data ：

   1. The first way （ Only receive ）：props:['name']

   2. The second way （ Type of restriction ）：props:{name:String}

   3. The third way （ Type of restriction 、 Necessity of restriction 、 Specify default ）：

      props:{
              
       name:{
              
       type:String, // type 
       required:true, // The need for 
       default:' Lao Wang ' // The default value is 
       }
      }
      

   remarks ：props Is read-only ,Vue The bottom will monitor you for props Modification of , If it's changed , A warning will be issued , If business requirements really need to be modified , Then please copy props Content to data Middle portion , Then go and modify data Data in .

<template>
	<div>
		<h1>{
   {msg}}</h1>
		<h2> The student's name ：{
   {name}}</h2>
		<h2> Student gender ：{
   {sex}}</h2>
		<h2> Student age ：{
   {myAge+1}}</h2>
		<button @click="updateAge"> Try to modify the age received </button>
	</div>
</template>

<script> export default {
       name:'Student', data() {
       console.log(this) return {
       msg:' I am a student in Silicon Valley ', myAge:this.age } }, methods: {
       updateAge(){
       this.myAge++ } }, // Simple declaration of receipt  // props:['name','age','sex']  // While receiving, the type of data is limited  /* props:{ name:String, age:Number, sex:String } */ // Receive data at the same time ： Make type restrictions + Specify the default value + The limits of necessity  props:{
       name:{
       type:String, //name The type of is string  required:true, //name be necessary  }, age:{
       type:Number, default:99 // The default value is  }, sex:{
       type:String, required:true } } } </script>

mixin( Mix in )

1. function ： The configuration shared by multiple components can be extracted into a mixed object

2. Usage mode ：

   The first step is to define the blend ：

   {
       data(){....},
       methods:{....}
       ....
   }
   

   Step 2 use blending ：

   The whole thing is in ：Vue.mixin(xxx)
   To mix in partially ：mixins:['xxx']

export const hunhe = {
    
	methods: {
    
		showName(){
    
			alert(this.name)
		}
	},
	mounted() {
    
		console.log(' How do you do ！')
	},
}
export const hunhe2 = {
    
	data() {
    
		return {
    
			x:100,
			y:200
		}
	},
}



// introduce Vue
import Vue from 'vue'
// introduce App
import App from './App.vue'
import {
    hunhe,hunhe2} from './mixin'
// close Vue Production tips for 
Vue.config.productionTip = false

Vue.mixin(hunhe)
Vue.mixin(hunhe2)


// establish vm
new Vue({
    
	el:'#app',
	render: h => h(App)
})

<template>
	<div>
		<h2 @click="showName"> School name ：{
   {name}}</h2>
		<h2> School address ：{
   {address}}</h2>
	</div>
</template>

<script> // The introduction of a hunhe // import {hunhe,hunhe2} from '../mixin' export default {
       name:'School', data() {
       return {
       name:' Silicon Valley ', address:' Beijing ', x:666 } }, // mixins:[hunhe,hunhe2], } </script>


<template>
	<div>
		<h2 @click="showName"> The student's name ：{
   {name}}</h2>
		<h2> Student gender ：{
   {sex}}</h2>
	</div>
</template>

<script> // import {hunhe,hunhe2} from '../mixin' export default {
       name:'Student', data() {
       return {
       name:' Zhang San ', sex:' male ' } }, // mixins:[hunhe,hunhe2] } </script>

plug-in unit

1. function ： For enhancement Vue

2. The essence ： contain install Method ,install The first parameter of Vue, The second parameter after 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 directive 
       Vue.directive(....)
   
       // 3.  Configure global blending ( close )
       Vue.mixin(....)
   
       // 4.  Add instance method 
       Vue.prototype.$myMethod = function () {
         ...}
       Vue.prototype.$myProperty = xxxx
   }
   

4. The use of plug-in ：Vue.use()

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 an instruction is successfully bound to an element （ at first ）
			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 of the instruction is parsed again 
			update(element,binding){
    
				element.value = binding.value
			}
		})

		// Define blend 
		Vue.mixin({
    
			data() {
    
				return {
    
					x:100,
					y:200
				}
			},
		})

		// to Vue Add a method to the prototype （vm and vc It'll work ）
		Vue.prototype.hello = ()=>{
    alert(' How do you do ')}
	}
}

main.js

// introduce Vue
import Vue from 'vue'
// introduce App
import App from './App.vue'
// Introducing plug-ins 
import plugins from './plugins'
// close Vue Production tips for 
Vue.config.productionTip = false

// application （ Use ） plug-in unit 
Vue.use(plugins,1,2,3)
// establish vm
new Vue({
    
	el:'#app',
	render: h => h(App)
})

scoped style

1. effect ： Let the style take effect locally , To prevent conflict .

2. How to write it ：<style scoped>

Less Use

If not installed , Just install npm i [email protected] Install the specified version

View version of npm view less-loader versions