Mixing (Mixins)

What is mixins?Is a way to reuse functions during component development in vue

When the page styles are different, but the methods you perform and the data you need are similar, you can use Mix Bar, a common and identical part of the extract to encapsulate, reduce the amount of code and make modifications and tests more difficult

To write:

Is to extract components and methods and store them centrally in the mix

1. Create a folder MIxins under the src folder of the project - >index.js

var myMixins={
    data(){
        return {
            // Reused variables
            text:"Ha ha ha"
        }
    },
    methods:{
        // Reuse methods
        fun(){
            console.log("I'm the same way across multiple components")
        }
    }
}
export default myMixins

2. Use encapsulated reused content

(1) Reference module to page

// Reference Mixing
import Mixins from "@/Mixins/index"

(2) Setting associations in files

//Reference Mixing
import Mixins from "@/Mixins/index"
export default {
     // Set up associations
    // mixins:[Mixins],
     data(){
        return {
           
        }
    },
}

(3) How to use variables as well as methods in forward and vue

Global Mixing

Global blending is available in any component

Use:

1. Reference to mixing in main.js

2. Use in main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
// Reference Mixing
import Mixins from "@/Mixins/index"
Vue.mixin(Mixins)

import axios from "axios"
Vue.prototype.axios=axios
new Vue({
  render: h => h(App),
}).$mount('#app')

3. Call directly when used in any component

If there is a variable or method with the same name in the component, the variable or method in the component will be used.

**** Because if you want to use his data, you don't need to define one more, just don't want to use it****

How to Manipulate dom Elements in vue

ref

What's this

Direct dom operations are rarely done in vue, but ref can be used to do dom operations at this point if extreme circumstances require us to do so

ref: Used to test the reference name/reference information for an element or a subcomponent group, the reference information is registered on the parent component's $refs object, if the binding refers to a DOM element on a normal dom, if the binding refers to a component instance on a subcomponent

$refs is an object that contains elements or component information that bind ref attributes

Bind child dom element - can get dom information object

Use:

1. Binding binds a dom element by ref

<template>
    <div>
        <input type="text" ref="con"/>
        <button @click="fun()">Point I get text Value of</button>
        <button @click="funb()">Click me to change the color of the text above</button>
    </div>
</template>

2. Get this.$refs.xxx

export default {
    data(){
        return {
            aaa:"xxxxxx"
        }
    },
    methods:{
        fun(){
         
            console.log(this.$refs.con.value)
        },funb(){
            this.$refs.text.style.color="red";
        }
    }
}

Data Request Address Encapsulation

1. Create a folder api-index.js

// http://localhsot:3000/xxx/xxx
var location="http://localhost:3001"
export var api={
    home:location+"/user/home",
    phone:location+"/user/phone",
    all:location+"/user/all",
}

2. Use

<script>
import {api} from "@/api/index.js"
export default {
    data(){
        return {
        }
    },
    mounted() {
     this.axios({
        //  url:"http://localhost:3000/user/home",
         url:api.home,
         method:"get"
     }).then((ok)=>{
         console.log(ok)
     })   
    }
}
</script>

Last but not least, the question of when to use braces for import references

Look at the above api exposure when it is directly exported var api and then referenced

Import {api} from'@/api/index.js'requires curly braces

export default exposure is not required.

export can expose multiple variables in a component

But export default can only have one

So in curly brackets is the variable name of export. Because there are so many, it's important to distinguish between variable names

That means import refers to an attribute in the path file after from, and the attribute name is in curly brackets