ディレクトリ
フォームのコマンド：
Vモデル=「変数」変数と値関連
ノーマル：変数は、値の値を示し、
チェックボックス：変数値は単一のボックスの複数の値であります
シングルボックス：変数が選択されたオプションの値を格納し、配列であります
条件付き命令
V-SHOW：ディスプレイ：なし
V-場合：レンダリングはありません
| V-IF V-ELSE-IF | V-ELSE
サイクル命令
V-用= "str内（V、I）| ARR"
V-ため= "（V、K、I）DICの"
sessionStorage | ローカルストレージ
フロントエンドデータベース
一時記憶
永久保存
分離機
デリミタ：[ '{{'、 '}}']
フィルタ
{{N1、N2 | F1（30）| F2}}
フィルター：{
F1（N1、N2、N3）、{戻り結果を濾過しました}
F2（RESのF1）{戻り結果を濾過}
}
計算されたプロパティ
計算：{
結果（）{
//属性値は、変数の複数の方法に依存します
this.n1 + this.n2を返します。
}
}
リスナーのプロパティ
時計：{
FULL_NAME（N、O）{
this.first_name = n.split（ ''）[0]
this.last_name = n.split（ ''）[1]
}
}
バブルソート
for (let i = 0; i < arr.length - 1; i++) { // 外层循环控制趟数
for (let j = 0; j < arr.length - 1 - i; j++) { // 内存循环控制比较次数
if (arr[j] > arr[j + 1]) {
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);サポート技術情報の要約：
フォームのコマンド
変数の値を結合Vモデルは、順番に、formタグの値に影響を与えることができ、単一ラベルの値も変数の値に影響を与える可能性があります。v-モデルは、データバインディングが双方向を実現することができます
重点
<input type="text" name="usr" id="usr" placeholder="请输入账号" v-model="v1">
<input type="text" v-model="v1">
{{ v1 }}チェックボックス
男：<input type="radio" name="sex" value="male" v-model="v2">
女：<input type="radio" name="sex" value="female" v-model="v2">
{{ v2 }}1つのチェックボックス
卖身契：同意 <input type="checkbox" name="agree" v-model="v3">
{{ v3 }}マルチボックス
爱好：<br>
男：<input type="checkbox" name="hobbies" value="male" v-model="v4">
女：<input type="checkbox" name="hobbies" value="female" v-model="v4">
哇塞：<input type="checkbox" name="hobbies" value="other" v-model="v4">
{{ v4 }}データの内側に対応するデータ
data: {
v1: '123',
v2: 'male',
v3: false,
v4: ['male', 'female']
}条件付き命令
[V-マント]条件付き命令は、{：なしディスプレイ;}その後
ディスプレイを使用して隠されたV-ショー=時間「ブール変数」：何もレンダリングしません
=「ブール」が隠されている場合は、V-、ページが（データはレンダリングを漏洩していないことを確実にするために）レンダリングされていません
ループ命令の例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>todo list 案例</title>
<style>
li:hover {
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="comment">
<button type="button" @click="send_msg">留言</button>
<ul>
<li v-for="(msg, i) in msgs" @click="delete_msg(i)">{{ msg }}</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
comment: '',
msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],
},
methods: {
send_msg() {
// 将comment添加到msgs数组中：unshift push 首尾增 | shift pop 首尾删
// this.msgs.push(this.comment);
// 数组操作最全方法：splice(begin_index, count, ...args)
// this.msgs.splice(0, 2);
if (!this.comment) {
alert('请输入内容');
return false;
}
this.msgs.push(this.comment);
this.comment = '';
localStorage.msgs = JSON.stringify(this.msgs);
},
delete_msg(index) {
this.msgs.splice(index, 1);
localStorage.msgs = JSON.stringify(this.msgs);
}
}
})
</script>
<script>
// 前台数据库
// localStorage: 永久存储
// sessionStorage：临时存储(所属页面标签被关闭后，清空)
// 存
// localStorage.n1 = 10;
// sessionStorage.n2 = 20;
// 取
// console.log(localStorage.n1);
// console.log(sessionStorage.n2);
// 数组等类型需要先序列化成JSON
// localStorage.arr = JSON.stringify([1, 2, 3]);
// console.log(JSON.parse(localStorage.arr));
// 清空数据库
// localStorage.clear();
</script>
</html>フィルタの概要：
メソッド定義されたフィルタのフィルタ部材1、
図2に示すように、複数の値は、フィルタが追加の補助パラメータが渡されていることができ、濾過されてもよいです
3、結果を濾過（濾過シリーズ）下で濾過することができます
<p>{{ num | f1 }}</p>
<p>{{ a, b | f2(30, 40) | f3 }}</p>new Vue({
el: '#app',
data: {
num: 10,
a: 10,
b: 20,
},
filters: {
// 传入所有要过滤的条件，返回值就是过滤的结果
f1 (num) {
console.log(num);
return num * 10;
},
f2 (a, b, c, d) {
console.log(a, b, c, d);
return a + b + c + d;
},
f3 (num) {
return num * num;
}
}
})計算されたプロパティ一覧
図1に示すように、計算されたプロパティメソッドを宣言することができる計算属性（メソッドプロパティは、データ宣言で繰り返されてはなりません）
2、method属性がページをレンダリングする必要があり、結合法を可能にする、結合方法はmethod属性の戻り値であります
3、バインドされた方法で表示されるすべての変数が監視されます、すべての更新の値の変化は、結合アプローチを再起動します
一般的な質問に対処している：変数値は、いくつかの変数に依存します
data: {
n1: '',
n2: '',
},
computed: {
result () {
console.log('被调用了');
n1 = +this.n1;
n2 = +this.n2;
return n1 + n2;
}
}リスナーイベント概要
1、監視プロパティがデータ内で宣言される必要がある、この方法は、リスナーの戻り値を必要としません
2、リスナーが属性名のメソッド名を聞いている、それがリスナーメソッドをコールバックしますプロパティの値が更新されたとき
電流値、Aの値：3、モニターのコールバックメソッドは、2つのパラメータを有します
問題解決：複数の変数の値は、変数の値に依存します
バブルソートテンプレート
for (let i = 0; i < arr.length - 1; i++) { // 外层循环控制趟数
for (let j = 0; j < arr.length - 1 - i; j++) { // 内存循环控制比较次数
if (arr[j] > arr[j + 1]) {
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);今日の日テスト：
簡単に言う利点VUEフレームワーク
中文API 单一面应用 - 提升移动端app运行速度 数据的双向绑定 - 变量全局通用 数据驱动 - 只用考虑数据，不需要在意DOM结构 虚拟DOM - 缓存机制VUEインスタンスは、どのようなことで、ページの構造に関連付けられていますか？ノートへのポイントは何ですか
el:进行挂载 css3选择器，唯一，html、body不能作为挂载点，一个页面可以有多个实例对应多个挂载点 new Vue({ el: '#app', })書き込みテキスト、属性とイベントのコマンド
1、{{ }}
2、v-text ：不能解析html语法的文本，会原样输出
3、v-html ：能解析html语法的文本
4、 v-once：处理的标签的内容只能被解析一次
:title="t1"
:class="c1" | :class="[c1, c2]" | :class="{c1: true}"
:style="s1" | :style="{color: c1, fontSize: f1}"
s1是字典变量，c1和f1变量分别控制字体颜色和大小
v-on：事件名=“方法变量”
简写：@事件名=“方法变量”
事件变量，不添加（），默认会传事件对象：$event
事件变量，添加（），代表自定义传参，系统不再传入事件对象，可以手动传入事件对象
<p @click="f8($event, '第一个')">{{ info }}</p>