主要內容:https://pizzali.github.io/B%A4/
1 vue.js的使用方式及文本插值
<div id="app">{{ greeting }}</div>
<script>
new Vue({
el: "#app",
data: {
greeting: "Hello Vue",
}
})
</script>
采用原生的dom
// 原生js
let odiv = document.getElementById("app-01");
odiv.innerText = "Hello Vue!";
2 常用指令:
2.1 v-text: 類似於雙大括號渲染數據的另外一種方式
<div id="app" v-text="greeting"></div>
<script>
new Vue({
el: '#app',
data: {
greeting: "Hello World"
}
})
</script>
2.2 v-html: 由於v-test無法渲染標簽字符串, 所以引出v-html
<div id="app" v-html="greeting"></div>
<script>
new Vue({
el: "#app",
data: {
greeting: "<h1>Hello Vue</h1>"
}
})
</script>
2.3 v-for : 數組和對象的渲染方式
<div id="app"> <ul> <li v-for="aihao in fuming">{{aihao}}</li> </ul> <ul> <li v-for="student in students">姓名:{{student.name}}年齡:{{student.age}}愛好:{{student.hobby}}</li> </ul> </div> <script> new Vue({ el: '#app', data: { fuming: ['黃袍哥', '吃雞', '大魚大肉'], students:[ { name: '張敏聰', age: 23, hobby: 'girls', }, { name:'毛尖妹妹', age: 18, hobby: 'study', }, ], } }) </script>
2.4 v-if: 渲染數據的時候根據條件進行判斷
<div id="app">
<div v-if="role == 'cainingning'">
<h1>歡迎美女光臨</h1>
</div>
<div v-else-if="role == 'juyingying'">
<h2>'''''</h2>
</div>
<div v-else>
<h1>努力學習</h1>
</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data:{
role: 'cainingning'
}
})
</script>
2.5 v-show:
<div id="app">
<div v-show="isShow">Hello yiyi</div>
</div>
<script>
//v-開頭的數據就是幫我們渲染數據用的
let vm = new Vue({
el: '#app',
data: {
isShow: true,
}
})
</script>
注意: v-if 的底層采用的是appendChild來實現的, v-show通過樣式的display控制標簽的顯示
加載性能：v-if加載速度更快，v-show加載速度慢
切換開銷：v-if切換開銷大，v-show切換開銷小
v-if是惰性的，它是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建，v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。
一般來說，v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用v-show較好，如果在運行時條件很少改變，則使用v-if較好。
2.6 v-bind: 綁定屬性, 冒號后面跟標簽的屬性, 屬性后面的等號指向數據,
<div id="app">
<a v-bind:href="jingdong">去京東</a>
<div :class="[isActive]"></div>
</div>
<script>
let vm = new Vue({
el: '#app',
data:{
jingdong: "https://www.jd.com",
isActive: 'active',
}
})
</script>
2.7 v-on:使用v-on可以在標簽上面綁定事件,注意新建的實例vue.app 中多了一個屬性, methods, 在methods中, 是我們具體事件的實現方式
<div id="app">
<h1 :class="{ active: isActive}">悶騷哥</h1>
<button v-on:click="changeColor">點擊變粉</button>
</div>
<script>
let vm = new Vue({
el: '#app',
data:{
isActive: false
},
methods: {
changeColor: function () {
this.isActive = !this.isActive
}
}
})
</script>
2.8 v-model: 當我們修改數據后, 修改后的數據能夠及時的渲染到模板
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="static/vue.min.js"></script> </head> <body> <div id="app"> <input type="text" v-model="name"/> <input type="checkbox" value="男" v-model="genders"/> <input type="checkbox" value="女" v-model="genders"/> <select v-model="girlfriends" multiple> <option>毛尖妹妹</option> <option>小萌芽</option> <option>寧寧</option> </select> <hr> {{name}} {{genders}} {{girlfriends}} </div> <!--v-model 當我們修改數據后, 修改后的數據能夠及時的渲染到模板--> <script> let vm = new Vue({ el: "#app", data:{ name: 'juyingying', genders:[], girlfriends:[] } }) </script> </body> </html>
v-model: 計算屬性和監聽: ,(一下兩個有一個有屬性和監聽的詳細解釋和區別)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="static/vue.min.js"></script> </head> <body> <div id="app"> <table border="1"> <thead> <tr> <th>學科</th> <th>成績</th> </tr> </thead> <tbody> <tr> <td>python</td> <td><input type="text" v-model="python"></td> </tr> <tr> <td>vue</td> <td><input type="text" v-model="vue"></td> </tr> <tr> <td>go</td> <td><input type="text" v-model="go"></td> </tr> <tr> <td>總成績</td> <td>{{sumScore}}</td> </tr> </tbody> </table> <hr> {{python}} {{sumScore}} </div> <script> let vm = new Vue({ el:"#app", data:{ python:88, vue:89, go:90, }, //計算 computed:{ //在頁面加載的時候執行 sumScore: function () { console.log(1); return this.python + this.vue + this.go } }, //當計算的邏輯比較復雜時, 引入了watch //當data里面的數據發生改變的時候, 才會執行, 用於監聽data的改變 watch:{ python: function () { console.log(2); alert("python 被修改了") } } }) </script> </body> </html>
監聽補充內容:
<script>
let app = new Vue({
el: '#app',
data: {
name: 'juying',
hobby: ['抽煙', '喝酒', '燙頭'],
obj: {
age: 32,
face: null
},
},
methods: {
my_click: function () {
//改變數據
// this.name = 'ju';
//改變數組的長度能能夠被監聽到, 新值和舊址相同
// this.hobby.push('學習');
//改變數組中的值 不能被監聽到
// this.hobby[0] = 'no'
//用$set修改數組中的值能能夠被監聽到, 新值和舊址相同
// app.$set(this.hobby, 0, '學習')
//改變對象中的數據不能被監聽到
// this.obj.face='yes'
}
},
watch: {
name: {
handler: function (val, oldVal) {
console.log(val);
console.log(oldVal)
}
},
hobby: {
handler: function (val, oldVal) {
console.log(val);
console.log(oldVal);
},
// deep: true
},
obj: {
handler: function (val, oldVal) {
console.log(val);
console.log(oldVal);
},
// deep: true
}
}
}
)
</script>
2.9 常用指令之指令修飾符: number:可以轉換成數字, lazy: 移除光標時計算
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="static/vue.min.js"></script> </head> <body> <div id="app"> <table border="1"> <thead> <tr> <th>學科</th> <th>成績</th> </tr> </thead> <tbody> <tr> <td>python</td> <td><input type="text" v-model="python"></td> </tr> <tr> <td>vue</td> <td><input type="text" v-model="vue"></td> </tr> <tr> <td>go</td> <td><input type="text" v-model="go"></td> </tr> <tr> <td>總成績</td> <td>{{sumScore}}</td> </tr> </tbody> </table> <hr> {{python}} {{sumScore}} </div> <script> let vm = new Vue({ el:"#app", data:{ python:88, vue:89, go:90, }, //計算 computed:{ //在頁面加載的時候執行 sumScore: function () { console.log(1); return this.python + this.vue + this.go } }, //computes, 也可以實現監聽事件,但是當計算邏輯比較復雜的時候, 加載速度慢, 所以不合適, //當data里面的數據發生改變的時候, 才會執行, 用於監聽data的改變 watch:{ python: function () { console.log(2); alert("python 被修改了") } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="static/vue.min.js"></script> </head> <body> <div id="app"> <table border="1"> <thead> <tr> <th>學科</th> <th>成績</th> </tr> </thead> <tbody> <tr> <!--number就是指令修飾符, 把他轉換成數字 , lazy就是退出光標后計算--> <td>python</td> <td><input type="text" v-model.number.lazy="python"> </td> </tr> <tr> <td>vue</td> <td><input type="text" v-model.number.lazy="vue"> </td> </tr> <tr> <td>go</td> <td><input type="text" v-model.number.lazy="go"> </td> </tr> <tr> <td>總成績</td> <td>{{sumScore}}</td> </tr> </tbody> </table> </div> <script> let vm = new Vue({ el: '#app', data: { python: 88, vue: 99, go: 100 }, computed:{ sumScore: function () { console.log(this); return this.python + this.vue + this.go } } }) </script> </body> </html>
2.10 常用指令之后去dom元素
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script src="static/vue.min.js"></script> <style> .active { background-color: #c1e2b3; } </style> </head> <body> <div id="app"> <div ref="myRe">peiqi</div> <!--<div :class="[isActive]">peiqi</div>--> <button v-on:click="changeColor">點擊讓佩奇變綠</button> <script> let vm = new Vue({ el: '#app', data: { isActive:'active', }, methods: { changeColor:function () { console.log(this); this.$refs.myRe.className = this.isActive } } }) </script> </div> </body> </html>
2.11 常用指令之自定義指令:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="static/vue.min.js"></script>
<style>
.box {
width: 50px;
height: 60px;
background-color: #5bc0de;
}
</style>
</head>
<body>
<div id="app">
<div v-pos.right.bottom="post" class="box">Hello World</div>
<!--<div v-pos="post" class="box">Hello World</div>-->
</div>
<script>
Vue.directive('pos', function (el, bindding) {
console.log('el', el);
console.log('bindding', bindding);
let decorators = bindding.modifiers;
if(bindding.value){
//方法一
// el.style['position'] = 'fixed';
// el.style['right'] = 0;
// el.style['bottom'] = 0;
//加指令修飾符
el.style['position'] = 'fixed';
for(let key in decorators){
el.style[key] = 0
}
}
});
//自定義屬性
let vm = new Vue({
el: '#app',
data:{
post: true
}
})
</script>
</body>
</html>
3 es6 的常用語法:
1 var 和 let的區別:
var有變量提升的性能, let沒有
<script>
console.log(username);
//打印undefined, 變量提升, 相當於提前定義了username
var username = 'lili';
console.log(username);
console.log(user);
//在es6 中會報錯, 無變量提升的作用
let user = 'meime'
</script>
var定義的變量: 全局作用域和函數作用域, let定義的作用域: 還有塊級作用域
// var定義的變量: 只有全局作用域和函數定義域
// let定義的變量: 有全局作用域和函數作用域, 塊級作用域
let user = 'meime';
if(true){
var username = 'aaa';
let age = 22
}
console.log(username); //可以打印
console.log(age) // 會報錯
let定義的變量不能重復定義, var定義的變量可以
var username = 'pp';
var username = 'oo';
console.log(username); //可以打印
let username = 'll';
console.log(username) //會報錯, let定義的變量不能重復定義
const定義常量
:定義時必須賦值, 定義之后不能修改
2 常用語法之模板字符串:${username1}
<div id="app">
</div>
<script>
let odiv = document.getElementById('app');
let username1 = 'a';
let username12 = 'b';
odiv.innerHTML = `
<h1>Hello ${username1}</h1>
<h1>Hello ${username12}</h1>
`
</script>
3 常用語法之對象的單例模式
//箭頭函數的this,指向定義時當定義域
//普通函數的this誰定義它指向誰,
let obj = {
name: 'yingyin',
foo(){
console.log(this);//定義的obj對象
console.log(this.name);
}
};
obj.foo();
4 常用語法之類
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <div id="app"></div> <script> /* ES5中實例化對象的方式 function Person() { this.username = "guyahui"; this.age = 20; } Person.prototype.showInfo = function () { console.log(this.username); }; let guyahui = new Person(); */ /* class Person { constructor (username, age) { this.username = username; this.age = age; } showInfo() { console.log(this.username, this.age); } } let guyahui = new Person("guyahui", 18); guyahui.showInfo(); */ class Wangjianwei { constructor (username, age, account=10000) { this.username = username; this.age = age; this.account = account; } showInfo() { console.log(this.username, this.age, this.account); } } class Peiqi extends Wangjianwei { constructor(username, age) { super(); this.username = username; this.age = age; } } let peiqi = new Peiqi("peiqi", 73); peiqi.showInfo(); </script> </body> </html>
5 常用語法之函數的擴展: 箭頭函數, 默認值參數:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> </head> <body> <div id="app"></div> <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); // 箭頭函數 // 一個參數 let foo = v => v; ret1 = foo(10); console.log(ret1); // 0個或者多個參數 let bar = (x, y) => {return x+y;}; ret2 = bar(1, 2); console.log(ret2); */ function foo() { console.log(this); } let bar = () => console.log(this); let obj = { foo: foo, bar: bar, }; foo(); obj.foo(); obj.bar(); </script> </body> </html>
6 函數的解構和賦值
//函數的解構, 兩端的類型必須一致
let ary = [1, 2, 3];
let [a, b, c] = ary;
console.log(a, b ,c);
let obj = {
username: 'a',
age:23
};
let {username: user, age: age} = obj;
console.log(user, age);
函數的賦值
//函數的賦值
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b)