Vue.jsの忠実なユーザーとして、この美しい言語を賞賛するためにいくつかの記事を書く必要があると思います。私の全体的な評価は「シンプルだがエレガントで、小さくても才能のある人々には欠けていない」。以下では、Vue.jsへの関心を刺激したいと考えて、この文の周りにVue.jsを紹介します。
Vue.jsの紹介
Vue.jsの著者は、Google Creative Labで働いているEvan You（You Yuxi）です。 Vueは個人的なプロジェクトですが、個人的には、開発の見通しの観点からGoogleのAngularjsより劣っていないと個人的に信じています。 VUE（Angular 1.0+バージョン）と簡単な比較を行います。
Vueの主な機能は、公式Webサイト（http://cn.vuejs.org/）で紹介されているとおりです。
（1）簡潔（2）軽量（3）高速（4）データドライバー（5）モジュールフレンドリー（6）コンポーネント化
単純
これが双方向のバインディングを実装するためのAngularのコードです
// html <body ng-app = "myapp"> <div ng-controller = "myctrl"> <p> {{note}}} </p> <入力タイプ= "text" ng-model = "note"> </div> </body> // jsvar mymodule = angmodule（myapp '' '' []）; mymodule.controller（ 'myctrl'、['$ scopp'、function（$ scope）{$ scope.note = '';]）;次に、Vueのコードを見てください
// html <body> <div id = "app"> <p> {{note}} </p> <入力タイプ= "v-model =" note "> </div> </body> // jsvar vm = new vue（{el： '＃app'、data：{note： '}}}}}）それに比べて、私は個人的に、Vueのコードライティングスタイルはより簡潔で理解しやすいと思います。
優雅さなしではありません
Vueは比較的軽量なフレームワークですが、シンプルで軽量で非常にユーザーフレンドリーです。それが提供するAPIも非常に理解しやすく、いくつかの非常に便利な指示と属性も提供します。
例えば：
（1）クリックイベントをバインドします
<a v-on：click = "dosomething"> </a>
それは次のように省略することができます
<a @click = "dosomething"> </a>
（2）動的属性をバインドします
<v-bind：href = "url"> </a>
それは次のように省略することができます
<a：href = "url"> </a>
（3）便利な修飾子
<！ - バブルからイベントをクリックするのを防ぎます - >
<a @click.stop = "dosomething"> </a>
<！ - Enterキーが押された場合にのみイベントがトリガーされます - >
<入力 @keyup.enter = "submit">
（4）実用的なパラメーター特性
<！ - debounceは最小遅延を設定します - >
<入力v-model = "note" debounce = "500">
<！ - 「入力」イベントの代わりに「変更」のデータを更新 - >
<入力v-model = "msg" lazy>
それはどうですか、それはとてもエレガントに感じますか？
小さい
小ささといえば、最初にVUEのソースコードサイズに注意する必要があります。 Vueの生産バージョンのソースコード（つまり、最小バージョン）はわずか72.9kbです。公式ウェブサイトでは、GZIPは圧縮後わずか25.11kbであり、Angularの144kbよりも半分小さくなっています。
コンパクトさの利点の1つは、ユーザーが対応するソリューションをより自由に選択できることを可能にし、他のライブラリと一致するという点でユーザーがより多くのスペースを提供できることです。
たとえば、VUEのコアにはデフォルトではルーティングとAjax関数は含まれていませんが、プロジェクトにルーティングとAJAXが必要な場合は、Vueが提供する公式ライブラリVUEルーターとサードパーティのプラグインVUEリソースを直接使用できます。同時に、JQueryのAjaxなど、使用する他のライブラリまたはプラグインを使用することもできます。
それは非常に柔軟だと感じませんか？
多くの素晴らしいマスターがいます
Vueは小さいですが、「スズメは小さく、すべての内臓があります」であり、大規模なアプリケーションを簡単に構築することもできます。
（1）モジュラー
CommonJS、RequireJS、またはSEAJなどの一部のサードパーティモジュールビルディングツールと組み合わせることで、コードモジュール性を簡単に実現できます。
ただし、ここでは、上記の建設ツールを使用することはお勧めしません。現在、ES6のモジュラー関数を直接使用し、それに応じてWebpackにパッケージ化する最も人気のあるソリューションです。
ES6モジュールの機能がわからない場合は、http：//es6.ruanyifeng.com/#docs/moduleを参照してください。
今後の記事では、Webpackの構成を含む、紹介します。
（2）コンポーネント化
Vueのコンポーネント機能は、そのハイライトです。ページ上のコンポーネントのHTML、CSS、およびJSコードを管理用の.VUEファイルに配置することにより、コードのメンテナンスを大幅に改善できます。
例えば：
// app.vue<Template> <div v-text = "note"> </div> </template> <script> export default {data（）{return {note： 'これはコンポーネントのHTMLテンプレートです！ '}}} </script> <style scoped> .box {color：＃000;} </style>
コンポーネントにいくつかの前処理言語を書くこともできます。
// app.vue <テンプレートlang = 'jade'> div（class = "box" v-text = "text"）</template> <script> export default {data（）{return {note： 'これはコンポーネントのHTMLテンプレートです！ '}}} </script> <style lang = "styles">。ボックス色：＃000 </style>もちろん、Webpackを使用してパッケージ化する必要があります。 Webpack + Vue-Roaderを使用し、同時にES6構文を使用することをお勧めします。バベルは変換のためにインストールする必要があります。この記事はvue.jsの簡単な議論であるため、ここでは詳細な紹介はしません。
（3）ルーティング
Angularのように、Vueにはルーティング機能があります。ルーティング関数を通じて、各コンポーネントのオンデマンドロードを実現し、単一ページアプリケーションを簡単に構築できます。簡単なルーティング構成ファイルは次のとおりです。
// router.js'use strict'export default function（router）{router.map（{'/'：{component：function（resolve）{require（['./ components/foo.vue']、resolve）}}}}、 '/foo'：{component：function（solufent）{require（ '' '' '' ']、forve.vue.foo. }、 '/bar'：{component：function（resolve）{require（['./ components/bar.vue']、resolve）}}}}}特定のルーティングの構成と使用状況を表示するには、http：//vuejs.github.io/vue-router/zh-cn/index.htmlが提供する公式ドキュメントをご覧ください。
要約します
私は個人的に、いくつかのフロントエンドテクノロジーが統合されていると信じています。言語やフレームワーク自体を学ぶことは、そのテクノロジーを学ぶことではありません。最も重要なことは、その考え方を学ぶことです。思考レベルのみが拡張され、他のテクノロジーを簡単に学ぶことができます。 Vueが私たちにもたらすのは、問題を解決するためのフロントエンドに関する新しい考え方です。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。