Home > Article > Web Front-end > What are the commonly used instructions in Vue.js?

What are the commonly used instructions in Vue.js?

一个新手Original: 2017-10-06 10:40:373283browse

Vue.js directives start with v-. They are used for HTML elements. The directives provide some special features. When the directive is bound to an element, the directive will add some special features to the bound target element. Special behavior, we can think of directives as special HTML features.

Vue.js provides some built-in instructions. Now let’s introduce the commonly used built-in instructions.

## v-if is a conditional rendering instruction, which adds or deletes elements based on the true or false expression. Its basic syntax: v-if = "expression", expression is a bool value An expression, which can be either a bool attribute or an operator that returns bool, such as the following code:

The rendered page is as shown below:

##You can see the rendering through the console The HTML code contains only these three 4a249f0d628e2318394fd9b75b4636b1 elements, as shown below:

#You can also modify the value of the data attribute on the console, for example, change the value of yes to false, that is, vm.yes = false, then the value in the page Yes will be deleted. As an instance of vue, vm can directly access the attributes in data because each vue instance will proxy the data attribute in its option object.

Remember: When using the v-if directive, only elements whose expression is true will be rendered. This is the same as the following A difference with the v-show command that will be introduced.

## v-show command

## The v-show instruction is also a conditional rendering instruction. I just mentioned that there is a difference between the v-if instruction and the v-show instruction. This difference is that the elements of the v-show instruction will is rendered, but elements whose expression is false will have the css attribute display:none set to hide them. As shown below:

v-else command

## The v-else instruction must follow the v-if instruction or v-show instruction, otherwise it will not be recognized.

## v-else instruction Whether the element is rendered into HTML mainly depends on the version of vue.js. If it is version 2. Will not be rendered into HTML. If it is version 1.x, it depends on whether it is a v-if directive or a v-show directive;

## When it is preceded by a v-if directive and the directive is true, the v-else directive will not be rendered into HTML;

# When the previous V-SHOW instructions, and the instructions are true, the V-Else instruction will still be rendered into HTML, but it will set the CSS attribute Display: None to hide it to hide it ；

## The v-for instruction is similar to the traversal syntax of JavaScript, that is, rendering a list based on an array. The syntax is: v-for = "item in items", items is an array, and item is the array element being traversed. For example, use

## to code:

<!DOCTYPE html><html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="styles/demo.css" />
    </head>

    <body>
        <p id="app">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Sex</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="person in people">
                        <td>{{ person.name  }}</td>
                        <td>{{ person.age  }}</td>
                        <td>{{ person.sex  }}</td>
                    </tr>
                </tbody>
            </table>
        </p>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: &#39;#app&#39;,
            data: {
                people: [{
                    name: &#39;Jack&#39;,
                    age: 30,
                    sex: &#39;Male&#39;
                }, {
                    name: &#39;Bill&#39;,
                    age: 26,
                    sex: &#39;Male&#39;
                }, {
                    name: &#39;Tracy&#39;,
                    age: 22,
                    sex: &#39;Female&#39;
                }, {
                    name: &#39;Chris&#39;,
                    age: 36,
                    sex: &#39;Male&#39;
                }]
            }
        })    </script></html>

View Code

v-bind command

V-Bind instructions can bring a parameter in the back and separate it with a colon. This parameter is generally the characteristics of the HTML element (ATTRIBUTE), for example: V-Bind: CLASS

##Such as the following code:

######################

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="styles/demo.css" />
    </head>
    <body>
        <p id="app">
            <ul class="pagination">
                <li v-for="n in pageCount">
                    <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? &#39;active&#39; : &#39;&#39;">{{ n + 1 }}</a>
                </li>
            </ul>
        </p>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: &#39;#app&#39;,
            data: {
                activeNumber: 1,
                pageCount: 10
            }
        })    </script></html>

######View Code####### ## ### Use the v-bind directive to act on the class of the element to set the css style for the current page. ############ What should be noted here is that when traversing pageCount, different versions of vue.js will cause the start of the traversal to be different; ############ When the version is 1 .x, the traversal starts from 0 and ends at pageCount-1; ############ When the version is 2.x, the traversal starts from 1 and ends at pageCount. ############ Used to monitor DOM events. Its usage is similar to v-bind. For example, to monitor click events: v-on:click="doSomething"########### There are two forms of calling methods: acc80a873886d8118be81a328be9ec64Bind a method, that is, point the event to the reference of the method######

2cc198a1d5eb0d3eb508d858c9f5cbdb使用内联语句

如下代码：Greet按钮就是使用第一种方法，即将事件绑定到greet()方法，而Hi按钮直接调用say()方法

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p id="app">
            <p><input type="text" v-model="message"></p>
            <p>
                <!--click事件直接绑定一个方法-->
                <button v-on:click="greet">Greet</button>
            </p>
            <p>
                <!--click事件使用内联语句-->
                <button v-on:click="say(&#39;Hi&#39;)">Hi</button>
            </p>
        </p>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: &#39;#app&#39;,
            data: {
                message: &#39;Hello, Vue.js!&#39;
            },            // 在 `methods` 对象中定义方法            
            methods: {
                greet: function() {                    // // 方法内 `this` 指向 vm                    
                alert(this.message)
                },
                say: function(msg) {
                    alert(msg)
                }
            }
        })    
        </script></html>

View Code

v-bind与v-on的缩写方式

v-bind可以缩写为一个冒号，v-on可以缩写为一个@符号，如下：

The above is the detailed content of What are the commonly used instructions in Vue.js?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Use Node.js to write a multi-person real-time online chat roomNext article：Use Node.js to write a multi-person real-time online chat room

See more

What are the commonly used instructions in Vue.js?

Related articles