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

今回は、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">

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

nbsp;html>

  <meta>
  <title></title>


  <p>{{ message }}</p>

<script></script>
<script>
  var vm=new Vue({
    //el属性对应一个标签 当el对象创建后，这个标签内的区域就被Vue对象接管，
    //接下来就可用Vue来做一些为所欲为的事情啦
    el:&#39;#app&#39;,
    data : {message:&#39;好湿呀&#39;}
  });
  </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>
</p><p>{{ message }}</p>
<button>改变数据和视图</button>

vus.jsテンプレートsyntax

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

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

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

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a>链接文字</a>

{{ msg }}

ディレクティブ

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

<p>是否显示这一段

<button>按钮</button></p>

Vue.js の特徴

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

• データ駆動型: 依存するテンプレート式と計算されたプロパティを自動的に追跡します。

• コンポーネント化: 分離された再利用可能なコンポーネントを使用してインターフェースを構築します。

• 軽量: ~24kb min+gzip、依存関係なし。

• 高速: 正確かつ効率的な非同期バッチ DOM 更新。

• モジュールフレンドリー: NPM または Bower 経由でインストールし、ワークフローにシームレスに統合します。

• この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
  推奨読書:

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

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

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