VueJSの総合分析
- 高洛峰オリジナル
- 2016-12-07 11:32:413259ブラウズ
Vue.js とは
Vue.js (/vjuː/ と発音、ビューに似ています) は、ユーザー インターフェイスを構築するための進歩的なフレームワークです。他の重量級フレームワークとは異なり、Vue はボトムアップの増分開発設計を採用しています。 Vue のコア ライブラリはビュー レイヤーのみに焦点を当てており、学習や他のライブラリや既存のプロジェクトとの統合が非常に簡単です。一方、Vue は、Vue エコシステムによってサポートされる単一ファイルのコンポーネントとライブラリを使用して開発された複雑な単一ページ アプリケーションを駆動する能力を十分に備えています。
Vue.js の目標は、可能な限りシンプルな API を介してレスポンシブなデータ バインディングと合成ビュー コンポーネントを実装することです。
経験豊富なフロントエンド開発者で、Vue.js と他のライブラリ/フレームワークの違いを知りたい場合は、他のフレームワークとの比較を確認してください。
1.VueJS の目的:
VueJs の主な目的は次のことを解決することです:
a: データ バインディングの問題を解決する、
b: vue フレームワークの主な目的は大規模な単一ページを開発することですアプリケーション、
c: コンポーネント化もサポートしています。つまり、ページを複数のコンポーネントにカプセル化し、ビルディング ブロックを使用してプログラムできるため、ページの再利用性が最大化されます (コンポーネント化がサポートされています)。
2.VueJSの特徴:
I: MVVMパターン(データ変数(モデル)が変化するとビュー(ビュー)も変化し、ビュー(ビュー)が変化するとデータ変数(モデル)も変化します。
MVVM パターンを使用する いくつかの大きな利点があります:
1. 低結合。ビューはモデルとは独立して変更および変更でき、ビューが変更されてもモデルは変更されず、ビューも変更されずに別のビューにバインドできます。
2. 再利用性。 ViewModel にいくつかのビュー ロジックを配置すると、多くのビューでこのビュー ロジックを再利用できるようになります。
3. 独自開発。開発者はビジネス ロジックとデータ (ViewModel) の開発に集中できます。デザイナーはインターフェイス (ビュー) のデザインに集中できます。
4. テスト容易性。 ViewModel に対してインターフェイス (View) をテストできます
II: コンポーネント化
III コマンドシステム
IIII: vue2.0 は仮想 dom のサポートを開始します
vue1.0 は実際の dom 要素を操作します 仮想ではありません
仮想DOM: ページの更新速度を向上させることができます
仮想 DOM には長所と短所があります。
A: サイズ - その 1 つは、機能が増えるとコード パッケージ内のコード行が増えることを意味します。幸いなことに、Vue.js 2.0 はまだ比較的小さい (現在のバージョン 21.4kb) ため、多くのものが削除されています。
B: メモリ - 同様に、仮想 DOM は既存の DOM をコピーしてメモリに保存する必要があります。これは、DOM の更新速度とメモリ使用量の間のトレードオフです。
C: すべての状況に適用できるわけではありません。仮想 DOM を一度にバッチで変更できれば素晴らしいでしょう。しかし、個別の、頻度の低い更新についてはどうでしょうか?このような
DOM 更新により、仮想 DOM の無意味な事前計算が発生します。
V: 変数モデルを通して
VueJS 式:
ステップ:
1
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
を引用する
2. フレームワークによって管理される HTML を宣言する
<div id="myapp"> <ul> <li></li> <li></li> <li></li> </ul> </div>
3 . vue を初期化し、vue パラメーターを入力します
I. 属性: el は vuejs 管理の境界拡張を宣言します: ng-app も同様です (これは AngularJS です)
II. 属性: data データ (ステータス || 属性) 、特定のデータを格納する属性。データはオブジェクト形式である必要があります
<script type="text/javascript">
var vm = new Vue({
el:"#myapp",
data:{hello:"hello word vue app!",
message:"wyx",
result:{name:'xinxin',password:'123'}
}
});
</script>
4. 式: データ内のデータを {{}}、
の形式でページに表示します。 :
data:{{message:'xxxxx '}}
view: {{message}}
<div id="myapp">
<ul>
<li>{{hello}}</li>
<li>{{message}}</li>
<li>{{result.name}}</li>
</ul>
</div>
view: {{message}} キーはコードと値にバインドされていますコア機能は、ページに表示されるデータ (モデル) を保存することです (取得されたモデルとページに表示されるコンテンツの間にマッピング関係が作成されます)。 , フロントエンドとバックエンドのインタラクションを実装すると、取得したデータをdataに格納するだけでページが自動的にバインドされ、モデル→ビューからのデータフローが実現します。
3. VueJS コマンド:
コマンド: 実際、vue は v- で始まるカスタム属性を定義することを意味します。
コマンドの使用法: v- 命令名 = "式の判定またはモデルの属性またはイベント"
v-model:
機能: ユーザーが入力したデータを受け取り、そのデータをデータ属性に直接マウントします
構文: v-model ="属性値" {属性値:テキスト値}
データ内での処理:この属性値をデータ内で定義するのが最善です、そうでないと最初にエラーが報告されます
v-if:
機能:判定により固定コンテンツを読み込みます、trueの場合はロード、falseの場合は要素を削除
使用場所：権限管理、ページモジュールの条件付き読み込みで使用
構文：v-if=判定式「ifと同じように使用
特徴：コントロール要素の挿入や削除は隠蔽されません
v-show:
要素は常にレンダリングされて dom に残りますが、 v- を使用するため、セキュリティは v-if ほど高くありません。 show は v-if と同じですが、v-show は要素を直接削除するのではなく、要素の表示を none に設定する点が異なります。
v-ifVS. v-show
一般来说，v-if有更高的切换消耗而
v-show有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show较好，如果在运行时条件不大可能改变则使用v-if较好。
v-else
元素必须紧跟在v-if或v-show元素的后面——否则它不能被识别。
v-bind:
缩写：：
{{}}表达式绑定数据的时候，可以直接将数据显示在页面中（html）里面，
v-bind img src 属性，
作用：v-bind 给页面中html属性进行绑定
语法：v-bind：图片里面src属性=“data 中的图片地址”
如：
<img
v-bind:src="img" />
<div v-bind:style="styles">style</div>
data:{
img:"img/logo.png",
styles:{color:'red',fontSize:'30px'}
}
缩写形式：
<img :src="img" /> <div :style="styles">style</div>
v-bind添加的style样式是添加在内联中的。
v-on：
缩写形式：v-on:click ---- >@click
@+事件
作用：对页面中的事件进行绑定 vue自定义了一套事件机制
angularjs中对pc端支持比较良好，对移动端支持一般，vue主要支持移动端，也支持pc端
事件开发中，事件 v-on: 绑定在页面（view）中，再vue实例里面，在methods中去监听
在页面中 我们做的行为： v-on:click="函数名称"
函数应该写在vue实例的methods属性里面
methods也要写成对象：
methods:{
clickBtn:function(){
}
}
例：f8901362721699ea6890ed926129bc8b点击65281c5ac262bf6d81768915a4a77ac0
methods:{
clickBtn:function(){
alert('触发了button绑定的事件');
}
}
在事件中传递值,事件中通过$event传递事件列表，在methods里面就可以直接获取事件列表里面的值
当一个行为所触发了一个事件，发生事件交互的时候所产生的一种结果(出现一个事件列表)
vue中的事件列表$event