Some simple ways to get started with vue:

Posted by jaybones on Sun, 09 Jan 2022 17:53:12 +0100

Vue.js is a popular JavaScript front-end framework designed to simplify Web development. Vue focuses on the view layer in MVC mode. At the same time, it can easily obtain data updates and realize the interaction between view and model.

The official website is: https://cn.vuejs.org

Use vue A simple template made by vue in min.js < body >


    <!--  vue Core style of main concern MVC The mode terminal view layer defines a layer of data, and then displays the data on the page -->

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

    <script src="vue.min.js"></script>

    <script>

        new Vue({   
            //
            //el For which elements vue Rendering of
            el: '#app',
            data:{
                message : 100
            }

        })

    </script>
    
</body>

The basic format of vue is shown in the figure above. el binds data into the object data with id app.

Some instructions are as follows:

1. Binding: v-bind can also be abbreviated as colon:

<div id="app">

    <!-- Data binding in html Property, use v-bind instructions -->

    <h1 v-bind:title="name">{{name}}</h1>

    <!-- v-bind Short form of instruction: colon(:) -->

    <h1 :title="name">{{name}}</h1>

</div>

2. Bidirectional data binding v-model: when modifying the value, the data in data will also be modified

<body>


    <!--  vue Core style of main concern MVC The mode terminal view layer defines a layer of data, and then displays the data on the page -->
    <div id="app">
        <input type="text" v-bind:value="keyword">
        <!-- vmodel Bidirectional binding -->
        <input type="text" v-model:value="keyword">
        <p>You want to query:{{keyword}}</p>
    </div>

    <script src="vue.min.js"></script>
    <script>

// Bidirectional data binding html
        new Vue({   
            //
            //el For which elements vue Rendering of
            el: '#app',
            data:{
                // Definition of data model
                keyword: 'happy couple' 
            }

        })

        // Bidirectional data binding: when the view changes, the data will change synchronously
        // The user then changes the page,It will be automatically synchronized to the data model



    </script>
    

    
</body>

When the data changes, the view will also change

When the data model changes, it will be displayed directly on the page

When the view changes, the data changes synchronously

The user's modifications on the page will be automatically synchronized to the data model

3. Event v-on is used for event processing, and can also be abbreviated as@

<body>

        <!--  vue Core style of main concern MVC The mode terminal view layer defines a layer of data, and then displays the data on the page -->

        <div id="app">
            <!-- Event instruction -->
            <button v-on:click="show()">query</button>
        </div>
    
        <script src="vue.min.js"></script>
    
        <script>

            new Vue({   
                //
                //el For which elements vue Rendering of
                el: '#app',
                data:{
                    message : 100
                },
                methods:{
                    //
                    show(){
                        console.log(new Date());
                    }
                }
            })
        </script>
    
</body>

4 modifier with half angle period (.) Indicates the special suffix used to indicate the special handling of an instruction

<body>


    <!--  vue Core style of main concern MVC The mode terminal view layer defines a layer of data, and then displays the data on the page -->

    <div id="app">

        <!-- Modifier  prevent Prevent grooming behavior -->
        <form action="save" v-on:submit.prevent="check()">
            full name:<input type="text" v-model="user.name" >
            <button type="submit">preservation</button>
        </form>
    </div>

    <script src="vue.min.js"></script>

    <script>

        new Vue({   
            //
            //el For which elements vue Rendering of
            el: '#app',
            data:{
                user: {}
            },
            methods: {
                check(){
                    console.log("Verify whether the user name is input intact")
                    console.log(this.user)
                    if(!this.user.name){
                        alert("enter one user name")
                        return;
                    }
                }

            }
        })

    </script>

5 conditional rendering uses v-if or v-show (frequent switching is required)

<body>


    <!--  vue Core style of main concern MVC The mode terminal view layer defines a layer of data, and then displays the data on the page -->

    <div id="app">
        <input type="checkbox" v-model = "ok">Consent to license agreement

        <!-- binding ok conditional rendering  -->

        <!-- v-if In conditional rendering, it is basically right dom File modification -->
        <h1 v-if="ok">Agreement content</h1>
        <h2 v-else="ok">Do not display content</h2>

        <!-- Used when switching frequently v-show The initialization overhead is large, and nodes need to be created and deleted continuously when switching all nodes in rendering
            During switching, you only need to modify the attributes of the node
        -->
        <h3 v-show="ok">show: Agreement content</h3>
        <h3 v-show="!ok">no</h3>
    </div>

    <script src="vue.min.js"></script>

    <script>

        new Vue({   
            //
            //el For which elements vue Rendering of
            el: '#app',
            data:{
                ok:false
            }
        })

    </script>
    
</body>

6. List rendering v-for loop instruction

<body>


    <!--  vue Core style of main concern MVC The mode terminal view layer defines a layer of data, and then displays the data on the page -->

    <div id="app">

        <table>
            <tr v-for="item in userList">
                <td>{{item.username}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
    </div>

    <script src="vue.min.js"></script>

    <script>

        new Vue({   
            //
            //el For which elements vue Rendering of
            el: '#app',
            data:{
                //The user array is in the form of a list
                userList: [
                    {username : 'Helen',age: 18},
                    {username : 'Peter',age: 10},
                ]
            }
        })

    </script>
    
</body>

7. Life cycle of Vue: note the two functions {created() and mounted()

//The created() terminal method has been fetched in memory but not rendered to the page

//The method data of mounted90 has been rendered into the page

<script src="vue.min.js"></script>


<script>


    new Vue({


        el: '#app',


        data: {


            message: 'abed, I see a silver light'


        },


        // The page has been initialized in memory:


        // Can operate data Data and call in methods Methods in


        // But the data has not been rendered to the page: the user cannot see it



        created() {


            console.log('created')


            //Can operate data Data in

            console.log(this.message)


            //Can call methods Methods in


            this.show()

            //Unable to remove dom Node fetches data, indicating that the user cannot see this content in the browser

            console.log(document.getElementById('h3').innerText)

        },


        // The data has been rendered to the page

        mounted() { // The fourth hook method to be executed

            console.log('mounted')

            //Can be taken out dom Node fetches data, indicating that the user has seen the content in the browser

            console.log(document.getElementById('h3').innerText)

        },


        methods: {

            show() {

                console.log('show Method called')

            }

        },

    })

</script>

2, axios and element UI

axios is a separate project from vue and can be used to send ajax requests

Element UI is the component library of vue

In the same terminal, there will be homologous policies that lead to cross domain problems,

(same origin strategy:

Two addresses have the same protocol, host and port
The same origin policy prevents javascript scripts in one domain from interacting with the content of another domain.
The same origin policy is a kind of convention, which is the core and basic security function of the browser.

)

Add the annotation @ crossorigin on the controller layer of relevant java methods to solve the cross domain problem

Simple implementation of business layering and non layering:

<body>


    <!--  vue Core style of main concern MVC The mode terminal view layer defines a layer of data, and then displays the data on the page -->

    <div id="app">

        <!-- Show list of Instructors -->

        <el-button type="success" @click="getTeacherList">Get list</el-button>

        <!-- //Render list -->
        <table>
            <tr v-for="item in teacherList">
                <td>{{item.name}}</td>
                <td>{{item.level}}</td>
            </tr>
        </table>

        <el-table :data="teacherList" style="width: 100%">
            <el-table-column prop="date" label="number" width="180">
            </el-table-column>
            <el-table-column prop="name" label="full name" width="180">
            </el-table-column>
            <el-table-column prop="level" label="level">
            </el-table-column>

            <el-table-column fixed="right" label="operation" width="100">

                <!-- there scope It refers to the meaning of the current line -->
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">see</el-button>
                    <el-button type="text" size="small">edit</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--  -->
    </div>

    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <!-- Pay attention to this ui Must be put vue behind -->
    <script src="element-ui/lib/index.js"></script>

    <script>
        new Vue({
            //
            //el For which elements vue Rendering of
            el: '#app',
            data: {
                //Show list of Instructors
                teacherList: [],
            },

            created() {
                this.getTeacherList();
            },

            methods: {

                //Basic configuration class: the return value is a function 
                initRequest() {
                    return axios.create({
                        baseURL: 'http://localhost:8010',
                        //Five seconds
                        timeout: 5000
                    })
                },

                // api call
                teacherListApi() {
                    //request function
                    let request = this.initRequest()
                    return request({
                        url: '/admin/edu/teacher/list',
                        method: 'get'
                    })
                },

                //Data rendering acquisition teacherList Method of
                getTeacherList() {
                    this.teacherListApi().then(response => {
                        this.teacherList = response.data.data.item;
                    }).catch(error => {

                        console.log(error)


                    })
                },


                //Business is not layered
                getTeacherList2() {
                    console.log('Get list of Instructors');
                    //The access port of the target server is blocked: when the same source policy has the same address, the same protocol and the same port number, the problem of the same source policy will occur

                    // Wan access front-end program open port 

                    //If it is not homologous, there will be some security problems and security strategies, followed by callback:
                    axios.get("http://localhost:8010/admin/edu/teacher/list").then(response => {
                        console.log(response);
                        this.teacherList = response.data.data.item;
                    });
                }
            }
        })
    </script>

</body>

Topics: Front-end

Programmer Think

Some simple ways to get started with vue:

Hot Topics