Summary of common instructions in vue.js

This time I will bring you a summary of the common instructions of vue.js. What are the precautions when using the common instructions of vue.js. The following is a practical case, let's take a look.

Vue.js is a very popular JavaScript MVVM (Model-View-ViewModel) library. It is built with data-driven and componentized ideas. Compared with Angular.js, Vue.js provides a simpler and easier-to-understand API, allowing us to quickly get started and use Vue.js.

If you have been accustomed to using jQuery to operate the DOM before, please put aside the idea of ​​​​manipulating the DOM manually when learning Vue.js, because Vue.js is data-driven, and you do not need to manually operate the DOM. It binds DOM and data through some special HTML syntax. Once you create the binding, the DOM will stay in sync with the data, and whenever the data changes, the DOM will be updated accordingly.

Of course, when using Vue.js, you can also use it in conjunction with other libraries, such as jQuery.

1.Use

The process of using Vue is the process of defining the various components of MVVM (Model-View-ViewModel).

<!--这里定义View-->
<p id="app">{{ message }}</p>
<script src="js/vue.js"></script>
<script>
    // 这里定义Model
    var exampleData = {
      message: 'Hello World!'
    }
    // 这里创建一个 Vue 实例或 "ViewModel"
    // 连接 View 与 Model
    new Vue({
      el: '#app',
      data: exampleData
    })
</script>

2. Common instructions of Vue.js

Vue.js provides some commonly used built-in instructions. Next we will introduce the following built-in instructions:

•v-if command

•v-show command
•v-else command
•v-for command
•v-bind command
•v-on command

Vue.js has good scalability, and we can also develop some custom instructions. Custom instructions will be introduced in later articles.

2.1 v-if directive

v-if is followed by an

expression

<p id="app">
      <h1>Hello, Vue.js!</h1>
      <h1 v-if="yes">Yes!</h1>
      <h1 v-if="no">No!</h1>
      <h1 v-if="age >= 25">Age: {{ age }}</h1>
      <h1 v-if="name.indexOf(&#39;jack&#39;) >= 0">Name: {{ name }}</h1>
</p>
 <script src="js/vue.js"></script>
 <script>
    var vm = new Vue({
      el: '#app',
      data: {
        yes: true,
        no: false,
        age: 28,
        name: 'keepfool'
      }
    })
 </script>

that can be converted into a Boolean type The final output here is

<p id="app">
  <h1>Hello, Vue.js!</h1>
  <h1>Yes!</h1>
  <!---->
  <h1>Age: 28</h1>
  <!---->
</p>

2.2 v-show

 <p id="app">
      <h1>Hello, Vue.js!</h1>
      <h1 v-show="yes">Yes!</h1>
      <h1 v-show="no">No!</h1>
      <h1 v-show="age >= 25">Age: {{ age }}</h1>
      <h1 v-show="name.indexOf(&#39;jack&#39;) >= 0">Name: {{ name }}</h1>
    </p>
  </body>
  <script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        yes: true,
        no: false,
        age: 28,
        name: 'keepfool'
      }
    })
  </script>

The code here is just v-if changed to v-show

The output is

<p id="app">
<h1>Hello, Vue.js!</h1>
<h1>Yes!</h1>
<h1 style="display: none;">No!</h1>
<h1>Age: 28</h1>
<h1 style="display: none;">Name: keepfool</h1>
</p>

The difference here is that the v-if above does not directly output the html code. Here, use display:none to hide it

2.3 v-else instruction

<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-else>Name: {{ name }}</h1>
<script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        age: 28,
        name: 'keepfool',
        sex: 'Male'
      }
    })
</script>

The previous sibling element must have v-if or v-else-if, the new version of vue.js has added v-else-if. The usage is the same as v-if, but the previous sibling element must have v-if or v-else-if. The old version of v-else is preceded by v-else-if. It can be followed by v-show, but the new version of v-else cannot be preceded by v-show.

2.4 v-for directive

<p v-for="p in people">
   <h1>Age: {{ p.age }}</h1>
   <h1>Name: {{ p.name }}</h1>
   <h1>Sex: {{ p.sex }}</h1>
</p>
<script charset="utf-8" src="js/vue.js"></script>
<script type="text/javascript">
   var myModel = {
    people:[
      {
        age: 25,
        name: 'keepfool',
        sex: 'Male'
      },
      {
        age: 26,
        name: 'keepfool2',
        sex: 'FeMale'
      },
      {
        age: 27,
        name: 'keepfool3',
        sex: 'Male2'
      }
    ]
  };
 var vm = new Vue({
  el: '#app',
  data: myModel
})
</script>

The parent element uses v-for, and the child element can traverse the bound corresponding Array | Object | number | string

v-for can also be used like this:

<p v-for="(item, index) in items"></p>
<p v-for="(val, key) in object"></p>
<p v-for="(val, key, index) in object"></p>

2.5 v-bind command

The v-bind directive can take a parameter after its name, separated by a colon. This parameter is usually an attribute of the

HTML element

<p id="app">
   <ul class="pagination">
     <li v-for="n in pageCount">
       <a href="javascripit:void(0)" rel="external nofollow" v-bind:class="activeNumber === n ? &#39;active&#39; : &#39;&#39;">{{ n }}</a>
     </li>
   </ul>
</p>
 <script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        activeNumber: 1,
        pageCount: 10
      }
    })
  </script>

Another example:

<img v-bind:src="&#39;/path/to/images/&#39; + fileName">
<p v-bind="{ &#39;id&#39;: someProp, &#39;other-attr&#39;: otherProp }"></p>

2.6 v-on command

<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>
 <script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue.js!'
      },
      // 在 `methods` 对象中定义方法
      methods: {
        greet: function() {
          // // 方法内 `this` 指向 vm
          alert(this.message)
        },
        say: function(msg) {
          alert(msg)
        }
      }
    })
  </script>

2.7 v-model directive

v-model creates two-way data binding on form control elements

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

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!

Recommended reading:

The above is the detailed content of Summary of common instructions in vue.js. For more information, please follow other related articles on the PHP Chinese website!