vue.js の構文と一般的な手順の詳細な説明-jsチュートリアル-php.cn

vue.js の構文と一般的な手順の詳細な説明

php中世界最好的语言

リリース： 2017-12-31 11:35:34

オリジナル

1669 人が閲覧しました

今回は、vue.js の構文と一般的な命令について詳しく説明します。Vue.js は非常に人気のある JavaScript MVVM (Model-View-ViewModel) ライブラリです。時間。

以前に jQuery を使用して DOM を操作することに慣れていた場合は、Vue.js を学習するときに DOM を手動で操作するという考えは脇に置いてください。Vue.js はデータ駆動型であり、手動で DOM を操作する必要はありません。 DOM を手動で操作します。特別な HTML 構文を通じて DOM と data をバインドします。バインディングを作成すると、DOM はデータと同期したままになり、データが変更されるたびに、DOM もそれに応じて更新されます。

もちろん、Vue.js を使用する場合は、jQuery などの他のライブラリと組み合わせて使用することもできます。

1.使用する

Vueを使用するプロセスは、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コマンド

<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>

ログイン後にコピー

だと思いますあなたはそれを読みました。あなたは上記で紹介した方法をマスターしました。さらに興味深い情報については、php 中国語 Web サイト他の関連記事に注目してください。