python就業班day29----vue的ES6語法
阿新 • • 發佈：2018-12-13
例：todolist
<!DOCTYPE html>
<html>
<head>
<mtea charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.min.js"> vue區域性過濾器：
寫在filter裡面，呼叫{{陣列 | 過濾器函式}}
new Vue({
el:{},
filters:{ // 注意s
過濾器函式:function(形參){ // 形參是系統傳入的，指的是你寫|前的變數(以資料型別的名字當形參而已)
操作形參...
...
}
}
})
Vue全域性過濾器：Vue.filter() // 沒有s 注意：只有被掛載了Vue的（有el:"過濾器"選中的）才能使用全域性過濾器，沒有的不能使用 引數1：過濾器名稱 引數2過濾器方法體 Vue.filter(“引數1”,function(形參){ // 這個形參跟上面的形參一樣 操作形參 … })
<body>
<div id="app">
<div>原始陣列：{{ [1,2,3,4,5] }}</div>
<div>陣列偶數：{{ [1,2,3,4,5] | getOuShu}}</div>
<div>陣列去重app1：{{ [1,2,3,4,5,1,2,34,5] | quChong }}</div>
</div>
<hr>
<div id="app2">
<div>陣列去重app2：{{ [1,2,3,4,5,1,2,34,5] | quChong}}</div>
</div>
<script>
// 定義全域性過濾器，去除陣列中重複的內容
// 引數1：過濾器名稱，引數2：過濾器方法體
Vue.filter(
"quChong",function(array){
var newArray = [];
for(var i=0;i<array.length;i++){
if(newArray.indexOf(array[i]) == -1){
newArray.push(array[i]);
}
}
return newArray;
}
)
new Vue({
el:"#app",
data:{},
methods:{},
computed:{},
filters:{
// 寫在vue物件裡面的過濾器，是一個區域性過濾器
getOuShu:function(array){
var newArray = [];
for(var i=0; i < array.length; i++){
if(array[i] % 2 == 0){
newArray.push(array[i]);
}
}
return newArray;
}
},
});
new Vue({
el:"#app2",
data:{}
})
</script>
</body>
例項生命週期： 每個Vue建立時都要經歷一系列過程。在這個過程會自動執行這些鉤子函式，我們可以使用這些鉤子函式實現特定的功能
鉤子函式： beforeCreate：vue例項建立之前執行 created：vue例項建立之後執行 beforeMount：el掛載之前被呼叫 mounted：vue物件的ready方法，類似於document.ready beforeUpdate：資料發生變化之前 Updated：資料發生變化之前
<script>
new Vue({
el:"#app",
data:{
number:10,
}
// 生命週期的鉤子方法
// 在data和vue物件繫結之前呼叫
beforeCreate:function(){
console.log("beforeCreate");
},
// 在data和vue物件繫結之後呼叫
created:function(){
console.log("created");
},
// 在el管理的頁面和vue物件關聯之前
beforeMount:function(){
console.log("beforeMount");
},
// 在管理的頁面和vue物件關聯之後
mounted:function(){
console.log("mounted");
},
// 當data中的資料變化之前
beforeUpdate:function(){
console.log("beforeUpdate");
},
// 當data中的資料變化之後
update:function(){
console.log("Updated");
},
})
</script>
滑鼠選中，Alt+方向鍵，可以挪動一段程式碼
例：鉤子方法：
== 要想處理網路請求，需要配合axios.js，寫在mounted裡面
axios({
url:"index_data",
method:"get", // 類似type
})
.axios.then(function(resp){ // 成功的回撥函式
console.log(resp);
})
.axios.catch(function(error){ // 失敗的回撥函式
console.log(error);
})
ES6：2015年出的，最新版本的javascript，在ES5上增加了一些語法 變數宣告：let和const，沒有預解析，var有預解析
<script>
// 定義變數：var，let，const
console.log(num1); // undefined
// console.log(num2) // 沒有預解析
// console.log(num3) // 沒有預解析
var num1 = 10;
let num2 = 20;
const num3 = 30; // 使用const定義的常量，不能改變
num1 = 11;
num2 = 21;
// num3 = 31;
console.log(num1);
console.log(num2);
</script>
箭頭函式：es6語法
<script>
// 普通函式
function getSum(a,b){
return a + b;
}
console.log(getSum(10,20))
// 匿名函式
var getSum = function(a , b){
return a + b;
}
console.log(getSum( 10 , 20 ));
// 箭頭函式，有兩個引數的
var getSum = ( a , b ) => {
return a + b;
}
console.log(getSum(10,20))
// 箭頭函式，有一個引數的，括號可省略
var square = a => {
return a * a;
}
console.log(square(20));
// 箭頭函式，沒有引數的，不能省略括號
var test = () =>{
return "hahaha";
}
console.log(test());
</script>
物件的簡寫：es6簡寫，如果key變數和value變數名稱一樣，可以省略
<script>
// 定義物件的普通方式
var person = {
name:"張三",
age:13,
study:function(
console.log(this.name + "學習葵花寶典");
)
}
person.study();
// es6簡寫：如果key變數和value的變數名稱一樣，可以省略
var name = "張三";
var age = 13;
var person2 = {
name,
age,
study():{
console.log(this.name + "正在學習葵花寶典");
}
}
person2.study();
</script>