Detailed explanation of vue.js syntax and common instructions-JS Tutorial-php.cn

Detailed explanation of vue.js syntax and common instructions

php中世界最好的语言

Release： 2017-12-31 11:35:34

Original

1668 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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