Vueの基本（1）
Vue公式ドキュメント：https：//cn.vuejs.org/v2/guide/
Vueはビューレイヤーのみを担当します！ビューレイヤーは、ユーザーを表示し、背景から提供された情報を更新することのみを担当します。
VueはSocの原則に準拠しています：関心の分離の原則
Vueコア：データ駆動型、コンポーネント化！
Vueも3つのレイヤーに分かれています：MVVM
- M：モデルレイヤー。ここでJavaScriptオブジェクトを表します
- V：ビューレイヤー。DOM要素はここに表されます
- VM：ViewModelレイヤー。ビューとデータを接続するミドルウェアであるVue.jsは、ViewModelレイヤーの実装者です。
ViewModelの役割は次のとおりです。双方向のデータバインディング。
バックエンドはデータをモデルレイヤーに渡し、ViewModelはモデルをリッスンします。モデルのデータが変更されると、ビューのデータも変更されます。
Vueをインストールする
-
IDEAにVue.jsをダウンロードしてインストールします
-
Vue.jsをインポートする
- CDNを使用してインポートし、オンラインで使用します
- Vue.jsプロジェクトをダウンロードしたら、オフラインで使用します
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
最初のVueページ（疑似）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入需要的包-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--
使用{
{}}}获取vm中的数据，这个数据可以引用model层的对象，这样vm就起到了连接
model和view的作用了
这样就有了一个模板template，{
{message}}它就是模板
-->
{
{message}}
</div>
<div id="app2">
{
{message}}
</div>
<script>
// 创建一个vue对象用来监听DOM元素
var vm = new Vue({
// 绑定要监听的DOM元素
el: "#app",
// 数据存的是model层的数据
data: {
message: "hello, vue!"
}
});
var vm = new Vue({
// 绑定要监听的DOM元素
el: "#app2",
// data就是一个js对象
data: {
message: "hello, vue!"
message2: "xxxxx"
}
});
</script>
</body>
</html>
上記のコードから、ビューがあり、モデルもあることがわかります。しかし、VMはどこに反映されますか？
F12とコンソールで次のVMデータを変更して、試してみることができます。その結果、ページを更新せずにデータを変更できるようになり、監視の効果が具体化されます。
データを変更すると、仮想domであるdomノードの情報が変更されます。domの属性を頻繁に変更する必要はありません
上記のページは、正確にはvueページではなく、トランジションに似ています。vueインターフェースで使用されるタグはそれらではありません。
Vueを使用する利点
-
スタックしていません。
コースの設計をしているときは、domの操作方法を使ってページデータを非同期に更新していたので、ページに入るたびに非常にスタックしていました。ページにdom要素が多すぎると、次のようになります。立ち往生。Vueを使用すると、dom要素のデータの変更が非常に高速であることがわかります。
-
低結合
ビューは、モデルの変更や変更から独立させることができます。ViewModelは、異なるビュー（同じクラスまたは同じ名前）にバインドできます。ビューが変更されても、モデルは変更されません（ラベルが変更されてもデータは変更されません）。また、モデルが変更されてもビューは変更されません。変更することはできません（データが変更されてもラベルは変更されません）。
-
再利用可能
ビューロジックをViewModelに配置して、多くのビューにこのビューロジックを再利用させることができます。
-
独立した開発
開発者はビジネスロジックとデータ開発（ViewModel）に集中でき、デザイナーはページデザインに集中できます
-
テスト可能
インターフェイスのテストは常に困難でしたが、ビューモデルでテストを実行できるようになりました。
Vueプロパティ
1.the
[El]は、バインドする[View]（dom要素）を示します。その値は[セレクター]にすることができ、バインドするには[表示]を選択します
コードは上記と同じです
2.データ
[データ]は、どの[モデル]がバインドされているかを示します。その値は[モデル]です（モデルはオブジェクトです）
コードは上記と同じです
3.メソッド
[メソッド]は、[表示]に接続されている監視対象イベントを表します。その値はキーと値のペア（オブジェクト）であり、キーと値のペアのキーは関数名であり、値は関数です。
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="addOne">点我加一</button>
<h1>{
{num}}</h1>
</div>
<script>
var vm1 = new Vue({
el: "#app",
data: {
num: 0
},
methods: {
addOne: function () {
this.num += 1
console.log(this.num)
}
}
})
</script>
</body>
</html>