Vue之常用語法
阿新 • • 發佈：2018-11-08
字典 watch odi 交換 問題 bin html 方式 能夠
變量的定義：
var定義的變量：只有全局作用域和函數作用域。有變量提升，先打印後定義變量不會報錯，打印結果為undefined
let定義的變量：沒有變量提升 ——>有局部作用域和函數作用域、塊級作用域
不能重復定義
塊級作用域
const定義的變量：
沒有變量提升
定義了以後不能修改
定義的時候必須賦值
不能重復定義
帶來了塊級作用域
模板字符串：
用反引號來進行字符串的拼接
用${} 來存儲變量
<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>
函數的擴展：
1、默認值參數
<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>
2、箭頭函數（v => v 參數 箭頭 返回值）
<script>
// 箭頭函數
// 一個函數
let foo1 = v => v;
ret3 = foo1(10);
console.log(ret3);
</script>
3、0個或者多個參數
<script>
// 0個或者多個參數
let bar = (x, y) => {
return x + y;
};
ret4 = bar(1, 2);
console.log(ret4);
</script>
4、箭頭函數和普通函數的區別
<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 來實例化，
類的繼承：
必須在子類的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
<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>
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>
Vue之常用語法