[vue] Foundation Series (XIX) - Analysis of scaffold - 4 grid indentation of control vue - vue config. JS configuration file - ref attribute - props configuration item - mixin (mixed) - plug in

🌕 Write in front
🍊 Blog home page: Brave cow
🎉 Welcome to: 🔎 give the thumbs-up 👍 Collection ⭐ Leave a message 📝
🌟 This article is original, CSDN first!
📆 Starting time: 🌹 April 16, 2022 🌹
🆕 Last updated: 🎄 April 16, 2022 🎄
✉️ May you survive loneliness and hide in the sea of stars!
📠 Reference books: 📚 <Vue2>

Control indentation

In setting Add this code to the JSON file;

   "vetur.format.options.tabSize": 4,

main. Role of JS

/*
  This file is the entry file of the whole project
*/
// Introduce vue
import Vue from 'vue'
// Introduce App component, which is the parent component of all components
import App from './App.vue'
// Turn off vue's production prompt
Vue.config.productionTip = false
// Often create vue instance objects
new Vue({
  render: h => h(App),
}).$mount('#app')

About different versions of vue

vue and vue runtime. xxx. JS difference:

• .vue.js is the full version of Vue, including: core functions + template parser
• .vue.runtime.xxx.js is the running version of Vue. Only includes: core functions, no template parser.
• Also because vue runtime. xxx. JS does not have a template parser, so you cannot use the template configuration item. You need to use the render function to accept the createElement function to specify the specific content

note

Scaffold file structure

├── node_modules 
├── public
│   ├── favicon.ico: Tab Icon
│   └── index.html: Main page
├── src
│   ├── assets: Storing static resources
│   │   └── logo.png
│   │── component: Store components
│   │   └── HelloWorld.vue
│   │── App.vue: Summarize all components
│   │── main.js: Entry file
├── .gitignore: git Configuration ignored by versioning
├── babel.config.js: babel Configuration file for
├── package.json: App package profile 
├── README.md: Application description file
├── package-lock.json: Package version control file

About different versions of Vue

1. vue.js and Vue runtime. xxx. JS difference:
   1. vue.js is the full version of Vue, including: core functions + template parser.
   2. vue.runtime.xxx.js is the running version of Vue, which only contains: core functions; There is no template parser.
2. Because Vue runtime. xxx. JS has no template parser, so you can't use the configuration item template. You need to use the createElement function received by the render function to specify the specific content.

vue.config.js configuration file

1. Use Vue inspect > output JS can view the default configuration of Vue scaffold.
2. Use Vue config. JS can customize the scaffold. For details, see: https://cli.vuejs.org/zh

ref attribute

1. Used to register reference information (id substitutes) for elements or subcomponents
2. The application obtains the real DOM element on the html tag, and the application on the component tag is the component instance object (vc)
3. Usage:
   1. Marking: < H1 ref = "XXX" ></ H1 > or < school ref = "XXX" > < / School >
   2. Get: this$ refs. xxx

showDOM() {
            console.log(document.getElementById("title"));
            console.log(this.$refs.title);
            console.log(this.$refs.sch);
        }

props configuration item

1. Function: let the component receive the data from the outside

2. Transfer data: < demo name = "XXX" / >

3. Receive data:

4. The first method (receive only): props:['name ']

		<Name :age="18" sex="female" name="Old eight"></Name>
		<!-- Because the gender and name itself are entered as strings rather than numbers -->

1. The second method (restriction type): props:{name:String}

2. 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.

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 ']

export const mixin = {
    methods: {
        fun() {
            alert('awesome')
        }
    },
}
export const DATA = {
    data() {
        return {
            messsige: "Old eight secret hamburger"
        }
    },
}

Call:

<template>
    <!-- Structure of components -->
    <div class="demo">
        <h2>full name:{{ name }}</h2>
        <h2>alias:{{ adders }}</h2>
        <button @click="fun">Click my prompt</button>
        <hr />
    </div>
</template>

<script>
import { mixin } from "../mixin";
export default {
    // Code related to component interaction (data, method)
    name: "Student",
    data() {
        return {
            name: "jack",
            adders: "Old eight",
        };
    },
    mixins: [mixin],
};
</script>

plug-in unit

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
   }
   

Or:

// Create a plug-in
/** 
export default {
    install() {
        console.log('wo is plugin');
    }
}
*/
// export default obj
const obj = {
    install() {
        console.log('wo is plugin');
    }
}
export default obj

1. Using plug-in: Vue use()

scoped style

1. Function: make the style take effect locally and prevent conflicts.
2. Writing method: < style scoped >
3. It can also be solved by introducing sequence, but it is not realistic