變量的定義：
var定義的變量：只有全局做用域和函數做用域。有變量提高，先打印後定義變量不會報錯，打印結果爲undefinedhtml
let定義的變量：沒有變量提高 ——>有局部做用域和函數做用域、塊級做用域vue
不能重複定義python
塊級做用域windows
const定義的變量：數組
沒有變量提高緩存
定義了之後不能修改app
定義的時候必須賦值框架
不能重複定義函數
帶來了塊級做用域性能
模板字符串：
用反引號來進行字符串的拼接
用${} 來存儲變量
<div id="app"></div>
<script>
let oDiv = document.getElementById('app');
oDiv.innerHTML = '<h1>Hello Vue' +
'</h1>';
let name1 = 'wjs';
let name2 = 'gxx';
// 這裏是反引號
oDiv.innerHTML = `
<h1>Hello ${name1}</h1>
<h2>Hello ${name2}</h2>
`
</script>
數據的解構和賦值：
數組、對象
簡單的用途：數據的交換
<script>
let ary = [1, 2, 3];
let [a, b, c] = ary;
console.log(a, b, c);
let obj = {
username: 'wjs',
age: 24,
};
let {username: user, age: age} = obj; // 默認是這樣因此↓
console.log(user,age);
let k = 1;
let v = 2;
[k, v] = [v, k]; // 等號左右類型必須同樣，要麼都是字典，要麼都是列表
console.log(k, v);
</script>
函數的擴展：
一、默認值參數
<script>
// 默認值參數
function foo(x, y = 10) {
let number = y;
return number;
}
ret = foo(1, 2);
ret1 = foo(1);
ret2 = foo(1, 0);
console.log(ret);
console.log(ret1);
console.log(ret2);
</script>
二、箭頭函數（v => v 參數 箭頭 返回值）
<script>
// 箭頭函數
// 一個函數
let foo1 = v => v;
ret3 = foo1(10);
console.log(ret3);
</script>
三、0個或者多個參數
<script>
// 0個或者多個參數
let bar = (x, y) => {
return x + y;
};
ret4 = bar(1, 2);
console.log(ret4);
</script>
四、箭頭函數和普通函數的區別
<script>
// 普通函數（誰調用就指向誰）
// 箭頭函數（在哪裏定義的做用域，this就指向定義時的做用域）
function foo2() {
console.log(this); // 這裏指向windows
}
let bar1 = () => console.log(this);
let obj = {
foo2:foo2,
bar1:bar1,
};
foo2(); // 指向windows
obj.foo2(); // 指向object
obj.bar1(); // 指向windows
</script>
類：
class 關鍵字 定義一個類：
必需要有constructor方式（構造方法），若是沒有，則() {}
必須使用new 來實例化，
類的繼承：
用extends來繼承
必須在子類的constructor方法裏面寫super()方法
<script>
class Wjs {
constructor(username, age, hobby = 'learn') {
this.username = username;
this.age = age;
this.account = account;
}
showInfo() {
console.log(this.username, this.age, this.account);
}
}
// extends繼承
class Gxx extends Wjs {
constructor(username, age) {
// 繼承父類的username、age，hobby繼承的父類的默認值
super(username, age);
// this.username = username;
// this.age = age;
}
}
let gxx = new Gxx('gxx', 22);
gxx.showInfo();
</script>
對象的單體模式：
解決了箭頭函數this的指向問題
<script>
let obj = {
name: 'wjs',
foo() {
console.log(this.name);
}
};
obj.foo();
</script>
Vue之爲何用框架
<div id="app">{{ greeting }}</div>
<script>
// 數據模板引擎
new Vue({
el: '#app', //
data: {
greeting: 'Hello Vue',
}
})
</script>
Vue之經常使用指令
v-text
<div id="app" v-text="greeting"></div>
<script>
// 數據模板引擎
// v-開頭的指令是幫助咱們渲染數據用的
new Vue({
el:'#app',
data:{
greeting:'Hello Vue',
}
})
</script>
v-html
<div id="app" v-html="greeting"></div>
<script>
// 數據模板引擎
// v-開頭的指令是幫助咱們渲染數據用的
new Vue({
el:'#app',
data:{
greeting:'<h1>Hello Vue</h1>',
}
})
</script>
v-for 循環
<div id="app">
<ul>
<li v-for="hobby in funingbo">{{ hobby }}</li>
</ul>
<ul>
<li v-for="student in students">姓名：{{student.name}},年齡：{{student.age}},愛好：{{student.hobby}}</li>
</ul>
</div>
<script>
// 數據模板引擎
// v-開頭的指令是幫助咱們渲染數據用的
new Vue({
el: '#app',
data: {
funingbo: ['人', '生', '太', '悲', '涼'],
students: [
{
name: 'wjs',
age: 24,
hobby: '癡心妄想',
},
{
name: 'gxx',
age: 22,
hobby: '有上進心',
},
{
name: 'zq',
age: 23,
hobby: '好學',
},
]
}
})
</script>
v-if、v-else-if、v-else
<div id="app">
<div v-for="role in roles">
<div v-if="role == 'gxx'">
<h1>v-if {{role}} 你好</h1>
</div>
<div v-else-if="role == 'zq'">
<h1>v-else-if {{role}} 你好</h1>
</div>
</div>
</div>
<script>
// 數據模板引擎
// v-開頭的指令是幫助咱們渲染數據用的
new Vue({
el: '#app',
data: {
roles: ['gxx', 'zq']
}
})
</script>
v-show 是否展現的語法：true 展現，false 不展現
<div id="app">
<div v-for="role in roles">
<div v-if="role == 'gxx'" v-show="isShow">
<h1>v-if {{role}} 你好</h1> // 這個標籤不展現
</div>
<div v-else-if="role == 'zq'">
<h1>v-else-if {{role}} 你好</h1>
</div>
</div>
</div>
<script>
// 數據模板引擎
// v-開頭的指令是幫助咱們渲染數據用的
new Vue({
el: '#app',
data: {
roles: ['gxx', 'zq'],
isShow: false,
}
})
</script>
注意：--切換性能，v-show的性能更高一些，display：none， v-if 的切換是經過append
--加載性能，v-show慢，v-if快
v-bind 綁定屬性 簡寫爲 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="static/vue.min.js"></script>
<style>
.active {
width: 500px;
height: 500px;
background-color: deepskyblue;
}
</style>
</head>
<body>
<div id="app">
<a v-bind:href="jd">京東</a>
// 這裏 : 爲v-bind的簡寫，[]表示能夠傳多個值並用逗號隔開，若是是一個值得話能夠不寫[]。
<div :class="[isActive]"></div>
</div>
<script>
// 數據模板引擎
// v-開頭的指令是幫助咱們渲染數據用的
let vm = new Vue({
el: '#app',
data: {
jd: 'https://www.jd.com',
isActive: 'active',
}
})
</script>
</body>
</html>
v-on 綁定點擊事件 簡寫爲 @
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="static/vue.min.js"></script>
<style>
.active {
color: deepskyblue;
}
</style>
</head>
<body>
<div id="app">
<a v-bind:class="{ active:isActive }">山人</a>
<!--<button v-on:click="changeColor">點擊山人變藍</button>-->
<!--v-on 的簡寫 @-->
<button @click="changeColor">點擊山人變藍</button>
</div>
<script>
// 數據模板引擎
// v-開頭的指令是幫助咱們渲染數據用的
let vm = new Vue({
el: '#app',
data: {
isActive: false,
},
methods: {
changeColor: function () {
this.isActive = !this.isActive;
},
}
})
</script>
</body>
</html>
v-model ----修改後的數據可以及時（官方稱之爲響應式）的渲染到模板層，雙向綁定
<div id="app">
<input type="text" v-model="name">
<label for="">男</label>
<input type="checkbox" value="男" v-model="genders">
<label for="">女</label>
<input type="checkbox" value="女" v-model="genders">
<select v-model="girlfriends">
<option>gxx</option>
<option>zq</option>
<option>wpp</option>
</select>
<textarea></textarea>
<hr>
{{ name }}
{{ genders }}
{{ girlfriends }}
</div>
<script>
// 數據模板引擎
// v-開頭的指令是幫助咱們渲染數據用的
let vm = new Vue({
el: '#app',
data: {
name: 'wjs',
genders: [],
girlfriends: [],
},
})
</script>
計算屬性
<div id="app">
<table border="1">
<thead>
<tr>
<th>學科</th>
<th>成績</th>
</tr>
</thead>
<tbody>
<tr>
<td>Python</td>
<!--.number修改input框中的值時，就是以數字來從新計算的，若是沒有.number就會把全部的值當作字符串拼接起來。-->
<td><input type="text" v-model.number="python"></td>
</tr>
<tr>
<td>Vue</td>
<!--.trim去除兩邊的空格-->
<td><input type="text" v-model.trim="vue"></td>
</tr>
<tr>
<td>Go</td>
<!--.lazy爲當鼠標失去焦點時纔會從新計算-->
<td><input type="text" v-model.lazy="go"></td>
</tr>
<tr>
<td>總成績</td>
<td>{{ sumScore }}</td>
</tr>
</tbody>
</table>
<hr>
{{ python }}
{{ vue }}
{{ go }}
{{ sumScore }}
</div>
<script>
// 計算屬性放在緩存中，只有數據修改時才從新計算
let vm = new Vue({
el: '#app',
data: {
python: 90,
vue: 95,
go: 85,
},
computed: {
// 這裏return返回的值會傳給sumScore變量
sumScore: function () {
console.log(1);
return this.python + this.vue + this.go;
},
},
watch: {
// 這裏python變量必須是data中存在的，並且watch它不會有值返回給python
python: function () {
alert('python數據改變了')
}
}
})
</script>
獲取DOM元素
<div id="app">
<div ref="myRef">山人</div>
<button v-on:click="changeColor">點擊山人變藍</button>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
isActive: 'active',
},
methods: {
changeColor: function () {
this.$refs.myRef.className = this.isActive;
}
}
})
</script>
指令修飾符
-- .number <!--.number修改input框中的值時，就是以數字來從新計算的，若是沒有.number就會把全部的值當作字符串拼接起來。-->
-- .lazy <!--.lazy爲當鼠標失去焦點時纔會從新計算-->
-- .trim <!--.trim去除兩邊的空格-->
<input type="text" v-model.number="python"> <input type="text" v-model.trim="vue"> <input type="text" v-model.lazy="go">
偵聽屬性
computed: {
// 這裏return返回的值會傳給sumScore變量
sumScore: function () {
console.log(1);
return this.python + this.vue + this.go;
},
},
watch: {
// 這裏python變量必須是data中存在的，並且watch它不會有值返回給python
python: function () {
alert('python數據改變了')
}
}
v-pos 自定義指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="static/vue.min.js"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: deepskyblue;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{ box:isShow }" v-pos.right.bottom="leftBottom">山人</div>
</div>
<script>
// pos是固定的寫法
Vue.directive('pos', function (el, bindding) {
console.log('el:', el);
console.log('bingding:', bindding);
// 這裏value獲取的是下面寫的isShow賦給的值也就是所寫的true，
if (bindding.value) {
el.style['position'] = 'fixed';
for (let key in bindding.modifiers) {
el.style[key] = 0;
// el.style['right'] = 0;
// el.style['bottom'] = 0;
}
}
});
let vm = new Vue({
el: '#app',
data: {
leftBottom: true,
isShow: true, // isShow經過bindding.value
},
})
</script>
</body>
</html>