文章目錄
vue框架
vue介紹
一、定義：javascript漸進式框架
漸進式：可以控制一個頁面的一個標簽，也可以控制一系列標簽，也可以控制整個頁面，甚至可以控制整個前台項目
二、優勢：
有指令（分支結構、循環結構…）,復用頁面結構等
有實例成員（過濾器，監聽），可以對渲染的數據做二次格式化
有組件（模塊的復用或組合），快速搭建頁面
虛擬DOM
數據的雙向綁定
單頁面應用
數據驅動
三、學習Vue的好處：
前台三大主流框架：
-
angular（龐大）
-
React（精通移動端）
-
Vue（吸取前兩者優勢，輕量級），可以實現前后台分離開發，節約開發成本
並且Vue是中國人開發的，官方文檔是中文，學習理解更輕松
Vue環境導入
-
cdn導入
<script src="https://cn.vuejs.org/js/vue.js"></script> -
本地導入（官網下載開發版本）
<script src="js/vue.js"></script>
掛載點el
- 一個掛載點只能控制一個頁面結構（優先匹配加載到的結構）
- 掛載點掛載的頁面標簽嚴格建議用id屬性進行匹配（一般習慣用app）
- html標簽與body標簽不能作為掛載點（html和body標簽不可以被替換）
- 是否接收vue對象，是外界是否要有vue對象的內容決定的
插值表達式
- 空插值表達式：{{ }}；（空插值表達式中要加空格，否則不能渲染，知道即可，沒什么用）
- 中渲染的變量在data中可以初始化
- 插值表達式可以進行簡單運算與簡單邏輯
- 插值表達式符合沖突解決，用delimiters自定義（了解）
過濾器
- 用實例成員filters來定義過濾器
- 在頁面結構中，用 | 來標識使用過濾器
- 過濾方法的返回值就是過濾器過濾后的結果
- 過濾器可以對1~n個變量進行過濾，同時還餓可以傳入輔助的變量，過濾器方法接收參數是安裝傳入的位置先后
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-1MmSIDg8-1581433036412)()]](/image/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuLzIwMjAwMjExMjMwODQyMTY0LnBuZz94LW9zcy1wcm9jZXNzPWltYWdlL3dhdGVybWFyayx0eXBlX1ptRnVaM3BvWlc1bmFHVnBkR2ssc2hhZG93XzEwLHRleHRfYUhSMGNITTZMeTlpYkc5bkxtTnpaRzR1Ym1WMEwyeHBjR1Z1WjJoaGJtUnpiMjFsLHNpemVfMTYsY29sb3JfRkZGRkZGLHRfNzA=.png)
文本指令
-
v-* 是vue指令，會被bue解析，v-text="num"中的num是變量（指令是有限的，不可以自定義）
-
v-text是原樣輸出渲染內容，渲染控制的標簽自身內容會被替換掉（
123
會被num替換） -
v-html可以解析渲染html語法的內容
-
補充
<!-- js基本數據類型：字符串、數字、布爾、undefined --><p v-text="'abc' + num + 10"></p><p>{{ 'abc' + num + 10 }}</p>
v-text文本指令只能接收變量（當成一個字符串），不能渲染業務代碼
事件指令
語法：v-on：可以簡寫為 @
對比DOM驅動：
- js選擇器獲取目標標簽
- 為目標標簽綁定事件
- 在事件中完成相應邏輯
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function () {
console.log(111111111111);
};
一、數據驅動
- 操作是一個功能，使用需要一個方法來控制
- 方法名是變量，所以控制變量就可以控制該方法
二、事件指令
- 在實例成員methods中聲明事件方法
- 標簽通過事件指令綁定聲明的方法：v-on:事件=“事件方法名” ， eg: 按鈕
綁定事件
js對象補充
- js沒有字典類型，只有對象類型，對象可以完全替代字典來使用
- js中對象的屬性名，都采用字符串類型，所以就可以省略字符串的引號標識
- 對象中屬性值為函數時，稱之為方法，方法建議簡寫：方法名（）{}
- 如果對象的屬性是一個變量，且變量名與屬性相同，還可以簡寫：{屬性，}
屬性方法簡寫：
屬性變量簡寫
js中的類
第一種聲明類的方法
第二種聲明類的方法（難點）
在函數內部出現了this語法，該函數就是 類，否則就是普通函數
#### 類屬性
給類屬性賦值，所有對象都能訪問
補充
<script> // 核心 // 掌握 let age = 17.5; obj = dic = { name: 'Bob', age, eat() { } }; // 掌握 Student.prototype.num = 100; let s1 = new Student(); let s2 = new Student(); console.log(s1.num, s2.num); // 了解 class People { constructor(name) { this.name = name } eat = function () { } } // 了解 function Student(name) { this.name = name; this.eat = function () { } } </script>
js函數補充
直接上代碼
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>js函數</title>
</head>
<body>
</body>
<script> // 1）函數的形參與調用時傳入的實參關系（你傳你的，我收我的） // 傳入和接受的參數個數不需要一致 // 但是一定按位進行賦值（沒有關鍵字參數） // 沒有接收的實參會被遺棄，沒有被賦值的形參會被賦值為undefined function fn1(a, b) { console.log(a, b); return a + b; } let res = fn1(10, 20, 30); console.log(res); // 2）函數定義的演變 let fn2 = function (a, b) { return a + b; }; // 省略關鍵字的箭頭函數 let fn3 = (a, b) => { return a + b; }; // 沒有函數體，只有返回值的函數，可以省略作用域{}，由於只有返回值，所以return也省略 let fn4 = (a, b) => a + b; console.log(fn4(11, 22)); // 如果形參只有一個時，聲明參數的()也可以省略 let fn5 = num => num * num; console.log(fn5(3)); // 弱語言 console.log(10 + '5'); console.log(10 - '5'); console.log(+'55555'); </script>
</html>