Vue.jsのダウンロード方法と利用手順の分析-jsチュートリアル-php.cn

Vue.jsのダウンロード方法と利用手順の分析

php中世界最好的语言

リリース： 2018-05-22 11:01:47

オリジナル

3421 人が閲覧しました

今回は、Vue.js のダウンロードと使用方法の分析についてお届けします。Vue.js のダウンロードと使用方法を分析する際の注意事項について、実際のケースを見てみましょう。

vue.jsとは何ですか?

Vue (/vjuː/ と発音、ビューに似ています) は、ユーザーインターフェイスを構築するための進歩的なフレームワークです。

手順とダウンロード

Vue.js の使用ドキュメントは非常に完全かつ詳細に書かれており、次のアドレスで参照できます:

https://cn.vuejs.org/v2/guide/

vue .js をライブラリとして使用する場合は、次のアドレスからダウンロードできます: https://cn.vuejs.org/v2/guide/installation.html

Vue.js基本概念

vue.js をダウンロードした後、ページ上の script タグを通じて vue.js を導入する必要があります。開発中は開発版 vue.js を使用し、製品がオンラインになったら vue.min.js に変更することができます。。

script type="text/javascript" src="js/vue.min.js"></script>

ログイン後にコピー

Vue コードインスタンス (作成)

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <p id="app">{{ message }}</p>
</body>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
  var vm=new Vue({
    //el属性对应一个标签 当el对象创建后，这个标签内的区域就被Vue对象接管，
    //接下来就可用Vue来做一些为所欲为的事情啦
    el:'#app',
    data : {message:'好湿呀'}
  });
  </script>

ログイン後にコピー

データとメソッド

Vue インスタンスが作成されると、データオブジェクトの All プロパティにあるデータが Vue のリアクティブシステムに追加されます。これらのプロパティの値が変更されると、ビューは新しい値を照合することで「応答」します。 Vue インスタンスでメソッドを定義し、そのメソッドを使用してインスタンスのデータオブジェクトのデータを変更することもできます。データが変更されると、ビュー内のデータも変更されます。 bueインスタンスコード（メソッド）

window.onload = function(){
var vm = new Vue({
  el:'#app',
  data:{message:'hello world!'},
  methods:{
    fnChangeMsg:function(){
      this.message = 'hello Vue.js!';
    }
  }
});
}
<p id="app">
<p>{{ message }}</p>
<button @click="fnChangeMsg">改变数据和视图</button>
</p>

ログイン後にコピー

vus.jsテンプレートsyntax

template構文は、htmldataバインディングにデータを配置する方法を指します

「Mustache」構文 (二重中括弧) 例:

挿入された値の間に式を記述することもできます:

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a v-bind:href="url" rel="external nofollow" >链接文字

ログイン後にコピー

{{ msg }}

ディレクティブ

ディレクティブには、接頭辞「v -」が付く特別なプロパティが付いています。ディレクティブ属性の値は単一の JavaScript 式であることが想定されており、ディレクティブの役割は、式の値が変更されたときに、それに関連付けられた効果を DOM にリアクティブに適用することです。一般的な命令には、v-bind、v-if、および v-on が含まれます。

<-- 根据ok的布尔值来插入/移除 p元素 -->
<p v-if="ok">是否显示这一段
<-- 监听按钮的click事件来执行fnChangeMsg方法 -->
<button v-on:click="fnChangeMsg">按钮

ログイン後にコピー

Vue.js の特徴

シンプル: HTML テンプレート + JSON データを使用して、Vue インスタンスを作成するだけです。とても簡単です。

データ駆動型: 依存するテンプレート式と計算されたプロパティを自動的に追跡します。
コンポーネント化: 分離された再利用可能なコンポーネントを使用してインターフェースを構築します。
軽量: ~24kb min+gzip、依存関係なし。
高速: 正確かつ効率的な非同期バッチ DOM 更新。
モジュールフレンドリー: NPM または Bower 経由でインストールし、ワークフローにシームレスに統合します。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:

Node.jsでHTTPファイルサーバーを作成する手順の詳細な説明

Node.jsでjadeテンプレートエンジンを使用する手順の詳細な説明

以上がVue.jsのダウンロード方法と利用手順の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。