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>{{ message }}</p>
<script></script>
<script>
    // 这里定义Model
    var exampleData = {
      message: &#39;Hello World!&#39;
    }
    // 这里创建一个 Vue 实例或 "ViewModel"
    // 连接 View 与 Model
    new Vue({
      el: &#39;#app&#39;,
      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>
      </p><h1 id="Hello-Vue-js">Hello, Vue.js!</h1>
      <h1 id="Yes">Yes!</h1>
      <h1 id="No">No!</h1>
      <h1 id="gt-Age-age">= 25">Age: {{ age }}</h1>
      <h1 id="gt-Name-name">= 0">Name: {{ name }}</h1>

 <script></script>
 <script>
    var vm = new Vue({
      el: &#39;#app&#39;,
      data: {
        yes: true,
        no: false,
        age: 28,
        name: &#39;keepfool&#39;
      }
    })
 </script>

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

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

2.2 v-show

 <p>
      </p><h1 id="Hello-Vue-js">Hello, Vue.js!</h1>
      <h1 id="Yes">Yes!</h1>
      <h1 id="No">No!</h1>
      <h1 id="gt-Age-age">= 25">Age: {{ age }}</h1>
      <h1 id="gt-Name-name">= 0">Name: {{ name }}</h1>
    
  

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!