Vue learning record I

Time:2021-7-27

install

Vue can be installed in two ways: one is direct use<script>Tag is introduced into vue.js. If you use this method, you’d better download the source code and deploy it yourself.

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Another way is also a way recommended by the officialcliCommand line tools are used to quickly build scaffolds, but there will be different projects to use when developing projectsvueThe version is also different. I recommend it herenvm, it isnodeVersion manager, but it can quickly realize version switching. I won’t describe it too much here. Interested partners can refer to another article of mineInstallation and use of NVM on Windows。 Back to business, how do you use itcliFor quick build projects, please refer to my other articleUse vue-cli3 to create a project and introduce element。 Of course, you can check any questionsRead official documents

npm install -g @vue/cli

Vue Basics

Vue instance

Each Vue application starts by passing in an option object through the Vue function to create a new Vue instance

 const app = new Vue({
    el:'#app',
    data(){
        return {

        }
    },
    methods:{

    }
 })

Detailed Vue instance options are shown in the following figure
Vue learning record I

It is worth noting that the instance exists only when it is createddataThe properties in are responsive

Common grammar

1. When we want to insert data into the label, we can use the text interpolation of “mustache” syntax (double braces)

<div id="app">{{msg}}</div>

<script>
    const app = new Vue({
        el:'#app',
        data(){
            return {
                msg:'nothing is impossible',
            }
        }
    });
</script>

2. Sometimes we want to directly output the HTML returned by the back end

<div id="app">
    <span v-html="html"></span>
</div>

<script>
    const app = new Vue({
        el:'#app',
        data(){
            return {
                html:`<span>nothing is impossible<span>`,
            }
        }
    });
</script>

3. Sometimes when we want to set HTML tag properties or handle events, we need to use instructionsv-bind

<div id="app">
    <image v-bind:src="url" v-on:click="changeImg"></image>
</div>

<script>
    const app = new Vue({
        el:'#app',
        data(){
            return {
                url:`some url`,
            }
        },
        methods:{
            changeImg:() => { this.url = `another url` }
        }
    });
</script>

v-bindCan be abbreviated as:v-onCan be abbreviated as@
Instructions can be divided into local instructions and global instructions. The composition of instructions includes: instruction name, instruction parameter, instruction value, instruction modifier, etc.

Evaluate properties, methods, and listeners

1、Computed properties are cached based on their responsive dependencies. They are re evaluated only when the relevant responsive dependencies change
2、Sometimes we need to calculate the propertiesgetterAndsetter

const app = new Vue({
    el:'#app',
    data(){
        return {
            odds:[1,3,5,7],
            Firstname: 'lost',
            LastName: 'name'
        }
    },
    computed:{
        //When the dependency ods of events does not change, events obtains the cache value after the first calculation
        evens(){
            return this.odds.map(item => item + 1);
        },
        fullName: {
            // getter
            get: function () {
              return this.firstName + ' ' + this.lastName
            },
            // setter
            set: function (newValue) {
              var names = newValue.split(' ')
              this.firstName = names[0]
              this.lastName = names[names.length - 1]
            }
        }
    }
})

Listeners can be used when you need to perform asynchronous or expensive operations when data changes

const app = new Vue({
    el:'#app',
    data(){
        return {
            id:0,
            entity:null,
        }
    },
    watch:{
        id(newValue,oldValue){
            //Perform asynchronous operations
            this.getEntityById(newValue);
        }
    },
    methods:{
        getEntityById(id){
            //Perform asynchronous operations
            this.entity = 'result';
        }
    }
})

This work adoptsCC agreement, reprint must indicate the author and the link to this article

Give each hair a name before it falls out~