Home >Web Front-end >JS Tutorial >Vue 2.0 internal directives

Vue 2.0 internal directives

php中世界最好的语言Original: 2018-04-17 14:39:561502browse

This time I bring you Vue 2.0 internal instructions. What are the precautions when using Vue 2.0 internal instructions. Here are practical cases, let’s take a look.

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, and the state can also be said to be data; and its componentization concept is the same as React, that is, "everything is a component, and the componentization idea is convenient for Modularization## The development of # is a major trend in the front-end field.

2. Internal instructions

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

Examples are as follows:

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

In the DOM structure, whether the content in the three p tags is displayed on the page depends on the Boolean attribute of the 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 does not matter Whether the value of the condition is true, it will be loaded (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 command

Examples are as follows:

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

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

) command

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

You can think of jquery's text() and html(). By now, you will find that the previous interpolation operations are used, that is, {{}}. This approach will affect performance to a certain extent.

2-4 v-on binding event listener

Examples are as follows:

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

In the same way, analogy to jquery's on() method, used for binding events, v-on:click in the example can be abbreviated as @click. Click can be replaced by other mouse operations, such as mouseout, mouseover, etc.

2-5 v-bind command

Examples are as follows:

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

The effect is that the a label displays red, and its src attribute is vm.message. The v-bind directive is mainly used to set the attributes of the

html tag

. Its abbreviation is v-bind:——>:

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

Examples are as follows:

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

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

Examples are as follows:

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

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

2-8 v-cloak command

The function of the v-cloak instruction is to execute it after the DOM tree is constructed and the page is rendered, and it needs to be used together with css

2-9 v-once command

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Vue 2.0 internal directives

Related articles