What functions does vuejs have?

Vuejs functions: 1. Use concise template syntax to declaratively render data into the DOM; 2. Use "v-if" and "v-for" instructions to implement conditional and loop structures; 3. Use the "v-model" instruction to achieve two-way data binding; 4. Use event listeners to achieve interface interaction; 5. Component-based development, etc.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Learn about the basic functions of Vue.js~

1. Data rendering

The core of Vue.js is to use Concise template syntax to declaratively render data into the DOM!

Example 1:

ab509c080ec9f7ec77efedb1cdcd4bed{{ message }}16b28748ea4df4d9c2150843fecfba68

<script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                message:"hello vue"
            }
        })
    </script>

This has generated a vue application. Now the data and DOM have been bound together. As long as app.message is modified, the DOM will be updated accordingly!

Example 2:

    8ee39084f353b8cd4554f1e862f090af
        5440a9a6580508c1df68d3f056adcfc7
            Hover your mouse over me for a few seconds to see my dynamically bound title!
        54bdf357c58b8a65c66d7c19c8e4d114
    16b28748ea4df4d9c2150843fecfba68

<script type="text/javascript">
        var app_2=new Vue({
            el:&#39;#app_2&#39;,
            data:{
                message:&#39;You loaded this page on &#39;+new Date()
            }
        })
    </script>

Example 2 involves the special attributes of Vue The v-bind directive will also be rendered on the corresponding DOM element!

2. Conditions and loops

Vue can not only bind DOM text to data, but also bind DOM structure to data!

1. Conditions

We can use the v-if instructions to achieve condition settings, and it is also very simple to control the display of an element in actual applications.

Example 3:

7b9e7549f8274d6577302a05a9a959fa
  14c94224c52d5f3c96b83a32bf0ae031Now you see me94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

<script>
        var app_3=new Vue({
            el:&#39;#app_3&#39;,
            data:{
                flags:true
            }
        })
    </script>

Similarly, the data attribute can be modified to achieve the response.

2. Loop

Each instruction has a special function. The v-for instruction can bind the data of the array to render a list!

Example 4:

<div id="app_3_2">
        <ul>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ul>
    </div>

var app_3_2=new Vue({
            el:'#app_3_2',
            data:{
                todos:[
                    { text:'Learn JavaScript' },
                    { text:'Learn Vue' },
                    { text:'Learn Other ' }
                ]
            }
        })

Open the console and enter app_3_2.todos.push({ text: 'New Project' }), you will find that a new item has been added to the list.

3. Two-way binding

Vue provides a v-model directive, which can easily implement form input Two-way binding between application state.

Example 5:

    <div id="app5">
        <input type="text" v-model="msg2" />
        <p>{{msg2}}</p>
    </div>

var app5 = new Vue({
        el: '#app5',
        data: {
        　　msg2: '# hello '
     　　}
    })

4. Interface interaction

In order to allow users to interact with your application, we can use v-on The instruction binds an event listener and calls the method defined in our Vue instance through it!

Example 6:

     <div id="app6">
         <p>{{message}}</p>
         <button v-on:click="reverseMessage">Reverse Message</button>
    </div>

var app6=new Vue({
            el:'#app6',
            data:{
                message:'Hello Vue.js!'
            },
            methods:{
                reverseMessage:function(e){
                    this.message=this.message.split('').reverse().join('');
                }
            }
        })

Note: In the methods method , only the status is updated, and the DOM is not touched!

5. Component construction (simple version)

　Be sure to register the component first, and then instance change!

　Be sure to register the component before initializing the root instance!

　Otherwise, an error will be reported if you use it without registering! 　

The component is relatively powerful, can be extended, and encapsulates reusable code, but it is quite annoying (*@ο@*) Wow ~ you must be familiar with it!

Example 7:

     359b90552b49455a72fd011a2d73b952
         c34106e0b4e09414b63b2ea253ff83d6
            6b7aaeae674c2cc163cd7dde12a69fd5e353ee0ad68c807be61e217b71df5f91
        f6f112ef45f603be226bc581f9dd5e90
    16b28748ea4df4d9c2150843fecfba68

Vue.component('todo-item',{
            props:['todo'],
            template:&#39;<li>{{todo.text}}</li>&#39;
        });
        var app_7=new Vue({
            el:&#39;#app_7&#39;,
            data:{
                itemsList:[
                    {text:&#39;Vegetables&#39;},
                    {text:&#39;Cheese&#39;},
                    {text:&#39;Whatever else humans are supposed to eat&#39;}
                ]
            }
        })

Components are a very important part. After you are familiar with the above content, you should study the component system carefully. It involves many contents that need to be mastered in more detail.

When used in actual projects, multiple pages have the same part, and components are reused It’s so awesome, don’t do it~O(∩_∩)O~~

Related recommendations: "vue.js Tutorial"

The above is the detailed content of What functions does vuejs have?. For more information, please follow other related articles on the PHP Chinese website!