Detailed explanation of vue.js syntax and common instructions

This time I bring you a detailed explanation of the syntax and common instructions of vue.js. Vue.js is a very popular JavaScript MVVM (Model-View-ViewModel) library. This article This article will give you a good analysis.

If you have been accustomed to using jQuery to operate the DOM before, when learning Vue.js, please put aside the idea of ​​​​manipulating the DOM manually because Vue.js is data-driven and you do not need to do it manually. Manipulate 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: &#39;Hello World!&#39;
    }
    // 这里创建一个 Vue 实例或 "ViewModel"
    // 连接 View 与 Model
    new Vue({
      el: &#39;#app&#39;,
      data: exampleData
    })
</script>

v-if directive

<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: &#39;#app&#39;,
      data: {
        yes: true,
        no: false,
        age: 28,
        name: &#39;keepfool&#39;
      }
    })
 </script>

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: &#39;#app&#39;,
     data: {
       yes: true,
       no: false,
       age: 28,
       name: &#39;keepfool&#39;
     }
   })
 </script>

I believe you have mastered the method after reading the above introduction. For more exciting information, please pay attention to the php Chinese website

Other related article!

Related reading:

Using jQuery to deduplicate and sort arrays

Use of require.js Detailed introduction to the method

nvm’s method of managing different versions of nodes

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