Vue快速學習_第一節
之前寫CRM都是Django前後端一起寫的,在大部分專案中實際上前後端是分離的,因此我們需要學習一個前端框架來進行前端頁面的編寫,這裡選擇了Vue進行學習,好了開始學習吧.
1.ES6部分知識點學習
let： 與var不同,var存在變數提升問題
特點：
1.區域性作用域
2.不會存在變數提升
3.變數不能重複宣告
const: 常量宣告
特點：
1.區域性作用域
2.不會存在變數提升
3.不能重複宣告，只宣告常量 不可變的量
模板字串
// 通過反引號 ${變數名}來插值
let name = 'liu';
let res = `我是${name}`;
console.log(res); ---> 我是liu
箭頭函式
複製程式碼
// 箭頭函式等同於add1 = function(x, y){return x+y;}
let add1 = (x, y) => {
return x+y;
};
// 更簡單的使用
let add2 = (x, y) => x+y;
console.log(add1(3,2)); ---> 5
console.log(add2(3,2)); ---> 5
複製程式碼
物件的單體模式(一般都用這種)
複製程式碼
// 這是物件中使用箭頭函式,此時的this指向的是person的父級物件(上下文,window)
var person1 = {
name: 'liu',
age: '20',
fav: () => {
console.log(this);
}
};
person1.fav(); ---> Window {postMessage: ?, blur: ?, focus: ?, close: ?, parent: Window, …}
// 為了解決箭頭函式this指向的問題 推出來一種寫法 物件的單體模式, 此時的this指向的是person物件
var person2 = {
name: 'liu',
age: '20',
fav(){
console.log(this);
}
};
person2.fav(); ---> {name: "liu", age: "20", fav: ?}
複製程式碼
面向物件(ES6的類)
複製程式碼
// 基於原型的模式建立物件(prototype,繼承當前父類)
function Person1(name,age){
this.name = name;
this.age = age;
}
Person1.prototype.showName = function(){
console.log(this.name);
};
var p1 = new Person1('liu', 18);
p1.showName();
class Person2{
// 構造器 當你建立例項的時候 constructor()方法會立刻呼叫 通常這個方法初始化物件的屬性,類似py的__init__方法
constructor(name,age){
this.name = name;
this.age = age;
}
showName(){
console.log(this.name);
}
}
var p2 = new Person2('liu', 18);
p2.showName();
複製程式碼
2.Vue的基礎使用
vue下載及引包(剛開始學習建議先這樣)
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
// 在html中引入:
<script src='./vue.js'></script>
簡單Vue例項化及模板語法
複製程式碼
// 模板語法, 可以插入任何你想插入的內容，除了if-else if-else用三元運算子代替
<div id="box">
<!--模板語法(內部不能寫if else if-else用三元運算子代替)-->
<!--去data中找到msg的值展示在頁面-->
<h3>{{ msg }}</h3>
<!--直接運算得到結果展示在頁面上-->
<h3>{{ 1+2+3 }}</h3>
<!--字元,物件都能直接被渲染到頁面-->
<h3>{{ {name: 'xiaohua'} }}</h3>
<!--取出person物件的屬性name值-->
<h3>{{ person.name }}</h3>
<!--三元運算子計算-->
<h3>{{ 1>2?'對':'錯' }}</h3>
<!--翻轉字串,得到nohtyp evol,證明{{}}中可以使用js語法-->
<h3>{{ str1.split('').reverse().join('') }}</h3>
</div>
複製程式碼
複製程式碼
// 例項化Vue
new Vue({
el: '#box', // 繫結id為box的標籤,固定寫法el
data:{
msg: '測試',
str1: 'love python',
person:{
name: 'liu',
age: 18
}
}
})
複製程式碼
Vue的指令系統之v-text和v-html
v-text相當於innerText
v-html相當於innerHTML
<!--直接將msg當成字串讀取展示-->
<div v-text="msg"></div>
<!--讀取後解析成標籤展示,這個比較常用-->
<div v-html="msg"></div>
複製程式碼
new Vue({
el: '#box',
data(){
// data中是一個函式,函式返回一個物件,可以為空,但必須返回
return {
msg: "<h4>你好</h4>"
}
}
})
複製程式碼
Vue的指令系統之v-if和v-show,還有個v-else
複製程式碼
<div id="box">
<!--執行add方法並將值展示在頁面-->
{{ add(1, 2) }}
<!--給button按鈕繫結click事件,方法是changeShow-->
<button v-on:click = 'changeShow'>點選顯示隱藏</button>
<!--isShow為true就顯示,為false就隱藏-->
<div class="t1" v-show="isShow"></div>
<!--官網例子,如果隨機數大於0.5就顯示Now you see me, 否則就顯示Now you don't-->
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
</div>
複製程式碼
複製程式碼
// 資料驅動檢視
new Vue({
el: '#box',
data(){
return{
isShow: true
}
},
// 方法都在這裡面定義
methods: {
add(x, y){
return x+y
},
changeShow(){
// 點選按鈕就取反然後賦值,所以點選就是一直顯示隱藏
this.isShow = !this.isShow
}
}
})
複製程式碼
v-if和v-show 等於 true都是表示顯示,false表示隱藏,那區別是啥呢?
複製程式碼
v-if vs v-show
v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。
v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。
相比之下，v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，
則使用 v-show 較好(也可以通過增加class或刪除class實現)；如果在執行時條件很少改變，則使用 v-if 較好。
複製程式碼
上面是官網說法,實際上簡單來講就是v-show就是改變display屬性,而v-if則是對dom的建立和刪除.
Vue的指令系統之v-bind和v-on
v-bind可以繫結標籤中任何屬性 比如:img標籤的src,a標籤的href,id,class,name等
v-on 可以監聽 js中所有事件
簡寫：
v-bind:src 等價於 :src
v-on:click 等價於
複製程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.t1{
width: 200px;
height: 200px;
background-color: #ff0000;
}
.active{
background-color: #0f0;
}
</style>
</head>
<body>
<div id="box">
<!--第一種寫法-->
<!--<button v-on:mouseenter="changeGreen" v-on:mouseLeave="changeRed">改變顏色</button>-->
<!--繫結src和alt屬性,使用從伺服器返回的動態資料-->
<!--<img v-bind:src="imgSrc" v-bind:alt="imgAlt">-->
<!--如果isActive為true就把active加到class裡面,為false就不加-->
<!--<div class="t1" v-bind:class="{active:isActive}"></div>-->
<!--第二種簡寫,以後都用簡寫-->
<button @mouseenter="changeGreen" @mouseLeave="changeRed">改變顏色</button>
<!--繫結src和alt屬性,使用從伺服器返回的動態資料-->
<img :src="imgSrc" :alt="imgAlt">
<!--如果isActive為true就把active加到class裡面,為false就不加-->
<div class="t1" :class="{active:isActive}"></div>
</div>
</body>
<script src="vue.js"></script>
<script>
//資料驅動檢視 設計模式 MVVM Model(資料) View(前端展示) ViewModel(類似v-bind方法)
new Vue({
el: '#box',
data(){
// img相關的動態資料
return {
imgSrc: "timg.jpg",
imgAlt: '圖片',
isActive: true,
}
},
methods: {
// 滑鼠進入離開的執行方法
changeGreen(){
this.isActive = false;
},
changeRed(){
this.isActive = true;
}
}
})
</script>