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:

<div>{{ message }}</div>

<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:

    <div>
        <span>
            Hover your mouse over me for a few seconds to see my dynamically bound title!
        </span>
    </div>

<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:

<div>
  <p>Now you see me</p>
</div>

<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:

     <div>
         <ol>
            <todo-item></todo-item>
        </ol>
    </div>

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!