What are the internal directives in Vue 2.0-JS Tutorial-php.cn

What are the internal directives in Vue 2.0

一个新手

Release： 2017-10-16 09:49:10

Original

1492 people have browsed it

1.Vue.js introduction

There are currently three mainstream front-end frameworks: Angular, React, and Vue. Due to the license controversy of React some time ago, the popularity of Vue has been rising. In addition, Vue’s friendly API documentation is a major feature. Vue.js is a very lightweight tool, more like a js library than an MVVM framework. Vue.js features responsive programming and componentization. Reactive programming means keeping the state and the view synchronized. The state can also be said to be data; and its componentization concept is the same as React, that is, "everything is a component. The componentization idea is convenient for modular development and is the front-end A major trend in the field

2. Internal instructions

##2-1.v-if v-else v-show: The first two. are generally used together, the effect of v-show is similar to v-if

The example is as follows:

<body>
    <div id="app">
       <p v-if="flag">if</p>
       <p v-else>else</p>
       <p v-show="flag">show</p>
    </div>
</body>
<script>
    var vm= new Vue({
        el:"#app",
        data:{
            flag:true
        }
    });
</script>

Copy after login

In the DOM structure, among the three p tags. Whether the content is displayed in the page depends on the Boolean attribute of flag. When flag is true, both if and show will be displayed, and else will not exist in the DOM structure. The difference between v-if and v-show is reflected in: v. -if determines whether to load based on the value of the condition, which can reduce the pressure on the server, but the disadvantage is that when the value of the condition is changed, the page has to be loaded again; v-show will load regardless of whether the value of the condition is true (if the condition is true, the display attribute is set to its default attribute, otherwise, it is set to none)

2-2.v-for loop instruction

The example is as follows:

<body>
    <div id="app">
     <ol>
         <li v-for="b in b">{{b}}</li>
     </ol>
    </div>
</body>
<script>
    var vm= new Vue({
        el:"#app",
        data:{
          b:[&#39;a&#39;,&#39;b&#39;,&#39;c&#39;,1,2]
        }
    });
</script>

Copy after login

The page will display 5 li. The effect of interpolation is that li will display elements corresponding to array b one-to-one. v-for is somewhat similar to for in loop

2-3 v-text v-html text (html string) instruction

<body>
    <div id="app">
     <p v-text="msgText"></p>
     <p v-html="msgHtml"></p>
    </div>
</body>
<script>
    var vm= new Vue({
        el:"#app",
        data:{
          msgText:"China",
          msgHtml:"<span>中国</span>"
        }
    });
</script>

Copy after login

can be associated with jquery’s text(), html( ). Until now, you will find that the previous interpolation operation is used, that is, {{}}, which will affect the performance to a certain extent.

2-4 v-on binding event. The example of the listener

is as follows:

<body>
    <div id="app">
     <button v-on:click="Hi()">Button</button>
    </div>
</body>
<script>
    var vm= new Vue({
        el:"#app",
        methods:{
            Hi:function(){
                alert("Hello World!")
            }
        }
    });
</script>

Copy after login

Similarly, it is analogous to the on() method of jquery, which is used to bind events. In the example, v -on:click can be abbreviated as @click. Click can be replaced by other mouse operations, such as mouseout, mouseover, etc.

##2-5 v-bind command

The example is as follows:

<body>
    <div id="app">
        <a v-bind:style="{color:&#39;red&#39;}" :src="message">{{message}}</a>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "前端工程师"
        }
    });
</script>

Copy after login

The effect is that the a tag displays red, and its src attribute is vm.message. The v-bind instruction is mainly used to set the attributes of the html tag. The abbreviated form is v-bind:——>:

2-6 v-model data two-way binding instruction

The example is as follows:

<body>
    <div id="app">
        <p>{{message}}</p>
        <p v-pre>{{message}}</p>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "前端工程师"
        }
    });
</script>

Copy after login

When the input value changes, the content contained in the p tag will also change and remain consistent with the former.

2-7 v-pre command

The example is as follows:

<body>
    <div id="app">
        <p>{{message}}</p>
        <p v-pre>{{message}}</p>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "前端工程师"
        }
    });
</script>

Copy after login

The first p tag outputs "front-end engineer", while the second The p tag will skip vue compilation and output the original value, namely {{message}}.

2-8 v-cloak instruction

The function of the v-cloak instruction is to execute it after the DOM tree is built and the rendering of the page is completed, and it needs to be consistent with css Use together

2-9 v-once directive

The v-once directive only works when the DOM tree is rendered for the first time.

The above is the detailed content of What are the internal directives in Vue 2.0. For more information, please follow other related articles on the PHP Chinese website!