Vue.jsはしばらくの間学習してきましたが、ナレッジポイントを確認して整理し、忘れないようにしてください
ディレクトリ
1. MVCおよびMVVMモードの概要
1. MVC：モデル（モデル）+ビュー（ビュー）+コントローラー（コントローラー）
主に階層化の目的に基づいて、互いの責任を分離します。ビューは、コントローラーを介してモデルと通信します。コントローラーは、ビューとモデルのコーディネーターです。ビューとモデルは直接接続されていません。基本的な接触は単方向です。ユーザーユーザーは、コントローラーを介してテンプレートモデルを操作して、ビューの変更を行います。
- ビュー：何らかの方法でユーザーにデータを提示するために使用されます
- モデル：実はデータ
- コントローラー：ユーザーからのリクエストを受信して処理し、モデルをユーザーに返します。
バックグラウンドフレームワークを考慮せずに、MVCインタラクションプロセスは次のようになります。
MVCフレームワークの学習は、MVCモデルの新たな理解です
モデル：アプリケーションでデータを処理するためのロジックの一部。通常、モデルオブジェクトを格納してデータベースにアクセスするために使用されます。
ビュー：ビュー部分。通常、ユーザーに表示するために使用されるjsp、htmlなどの一部を指します。
コントローラー：コントロールレイヤーは通常、ビジネスロジックの処理に使用され、データの読み取りとモデルへのデータの送信を試みます。
ビュー操作により、コントローラーがトリガーされてモデルが変更され、次にモデルがビューを変更します。それ以降、コードの3つの部分は別々に記述されるため、ロジックはより明確になります。mvvmは、mvvmの開発を革新的に提案するこの設計概念に基づいていますフロントエンドの開発に対応するという考え方で、mvvmはフロントエンドのmvcと同等と言えるので、mvvmについて話しましょう。
2. MVVM：モデル+ビュー+ビューモデル
ビューの変更は自動的にViewModelに更新され、ViewModelの変更は自動的にビューに同期されて表示されます。ViewModelは、ビューとモデルを接続してビューとデータの一貫性を確保する役割を果たします。この軽量アーキテクチャにより、フロントエンド開発がより効率的で便利になります。その中心は、ViewとViewModelへの双方向のデータバインディングを提供することです。これにより、ViewModelの状態変化を自動的にViewに渡すことができます。いわゆるデータの双方向のバインディングです。
MVVMモデルのフレームワークは、AngularJS、Vue.js、Knockout、およびEmber.jsです。後者の2つはあまり知られていない初期のフレームワークモデルです。
3つの間の関係は、上の図に示されています。ViewModeは、モデルとビューの間の接続ブリッジとして見ることができます。ビューは、イベントを介してモデルをバインドでき、モデルは、データを介してビューをバインドでき、ViewModeは、データとビューを実現できます。完全に分離されています。
2. Vue.jsの概要
Vue.jsの公式ドキュメントでは、この方法を紹介しています。シンプルでコンパクトなコア、プログレッシブテクノロジースタックで、あらゆる規模のアプリケーションに十分対応できます。
シンプルでコンパクトなため、Vue.jsは圧縮後わずか17KBになります。いわゆるプログレッシブ（Progressive）は、最初からすべてを使用する必要なく、Vue.jsを段階的に使用できることです。
仮想DOMに基づいて、事前にJavaScriptを介してさまざまな計算を実行し、最終的なDOM操作を計算および最適化できるテクノロジー。このDOM操作は前処理操作であるため、DOMの実際の操作はありません。すべてを仮想DOMと呼びます。双方向のデータバインディングにより、開発者はDOMオブジェクトを操作する必要がなくなり、ビジネスロジックにより多くのエネルギーを投入できます。
Vue.jsを使用すると、Web開発がシンプルになるだけでなく、従来のフロントエンド開発モデルも覆されます。最新のWeb開発に共通する高度な機能を提供します。
- ビューとデータの分離
- 再利用可能なコンポーネント
- フロントエンドルーティング
- 状態管理
- 仮想DOM（仮想DOM）
3番目に、vue.jsのインストール
1、直接によってscript導入
VUE公式サイトダイレクトダウンロードvue.jsではとして<script>ローカルラベルの導入、Vueそれはグローバル変数として登録されます。
2. CDNの紹介
プロトタイピングまたは学習には、次のような最新バージョンを使用できます。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>本番環境では、新しいバージョンによる予期しない損傷を避けるために、明確なバージョン番号とビルドファイルにリンクすることをお勧めします。
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>3. NPMのインストール
NPMは、webpackやBrowserifyモジュールなどのパッケージャとうまく連携します。Vueは、単一ファイルコンポーネントを開発するためのサポートツールも提供します。
# 最新稳定版
$ npm install vue
コードウォークスルー
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
Hello World!
</body>
</html>運用実績
上記の英語がコンソールに表示される場合は、Vue.js開発環境が正常にインストールされていることを意味します。
4、Vueの例
1. Vueインスタンスを作成する
各VueのアプリケーションがでているVue新機能の作成Vueのインスタンスが開始されますが：
var vm = new Vue({
// 选项
})コードウォークスルー
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{ message }} {{name}} //文本插值
</div>
<script type="text/javascript">
var app = new Vue({ //vue是对象
el: '#app', //id选择器选中id为app标签
data: {
message: 'Hello Vue!', //注册变量并初始化赋值
name : "Vue"
}
});
</script>
</body>
</html>
運用実績
2.データとメソッド
Vueのインスタンスが作成されると、それは次のようになりますdataオブジェクトのすべてのプロパティのVueに追加された応答システムの。これらの属性の値が変更されると、ビューは「応答」を生成します。つまり、一致は新しい値に更新されます。
コードウォークスルー
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{a}}{{b}}{{c}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
a: 1,
b: 2,
c: 3,
}
});
vm.$watch('a', function(newVal, oldVal){
console.log(newVal, oldVal);
}) //观察data.a的值是变化
vm.$data.a = "test...." //给data.a重新赋值
</script>
</body>
</html>
運用実績
aの値の変化をコンソール出力で確認できます。これは、データ属性の値の変化によってビューが変化し、ビューが「応答」を生成することを示しています。
このレスポンスは上記のMVVMパターンです。Viewはイベントを介してModelをバインドでき、Modelはデータを介してViewをバインドでき、ViewとViewModel間の双方向のデータバインドを実行できます。これにより、ViewModelの状態変化を自動的にViewに転送できます。
3.ライフサイクル
各Vueインスタンスは、作成時に一連の初期化プロセスを実行します。たとえば、データ監視を設定し、テンプレートをコンパイルし、インスタンスをDOMにマウントし、データが変更されたときにDOMを更新する必要があります。同時に、ライフサイクルフックと呼ばれる一部の関数がこのプロセスで実行されます。これにより、ユーザーはさまざまな段階で独自のコードを追加できます。
vueのライフサイクルは、初期化、新しい状態、破棄の3つの段階に分かれています
- 初期化ステージ：beforeCreated、created、beforeMount、mounted
- 新しい状態に従います：beforeUpdate、update
- Vueインスタンスを破棄します：beforeDestory、破棄された
その中で、作成/マウントされたリクエストを送信し、タイマーなどの非同期タスクを開始するために使用できます。
beforeDestroyは、タイマーのクリアなどの作業の終了に使用されます
コードウォークスルー
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : "hi vue",
},
//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
beforeCreate:function(){
console.log('beforeCreate');
},
/* 在实例创建完成后被立即调用。
在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
然而，挂载阶段还没开始，$el 属性目前不可见。 */
created :function(){
console.log('created');
},
//在挂载开始之前被调用：相关的渲染函数首次被调用
beforeMount : function(){
console.log('beforeMount');
},
//el 被新创建的 vm.$el 替换, 挂在成功
mounted : function(){
console.log('mounted');
},
//数据更新时调用
beforeUpdate : function(){
console.log('beforeUpdate');
},
//组件 DOM 已经更新, 组件更新完毕
updated : function(){
console.log('updated');
}
});
// setTimeout(function(){
// vm.msg = "change ......";
// }, 3000);
</script>
</body>
</html>
出力を見るためのコンソール
私は以前にWeChatアプレットの開発を学びました。Vue.jsの基本的な文法は、WeChatアプレットのそれと似ています。
フォローアップ~~~~~~
