一,ES6html
1.什麼是ES6 前端
ECMAScript 6 簡稱ES6,在2015年6月正式發佈,ECMAScript語言的國際標準vue
2.變量的聲明 python
var 變量提高,前置聲明,提高到函數做用域或者全局做用域的開頭進行變量聲明 同一變量能夠重複聲明,能夠重複賦值 let 塊級做用域,做用域以{}分隔 同一變量不能夠重複聲明,能夠重複賦值 const 定義常量 同一變量不能夠重複聲明和賦值
// 全局變量的提高 console.log(global) //underfind var global = "global" console.log(global) //"global" // 函數內變量的提高 function aa() { if(1){ var test = "test" //因爲變量提示,至關於在函數開始就聲明瞭test } console.log(test) }
// let沒有提高機制 function bb() { if(1){ let test ="test"; // 因爲是塊級變量,{}外面沒法引用 } console.log(test) //報錯 }
// 在for循環中 var var arry = []; for(var i = 0; i<10; i++){ console.log(i) arry[i] = function () { console.log(i) } } // 至關於 // var arry = []; // var i; // for(i = 0; i<10; i++){ // console.log(i) // arry[i] = function () { // console.log(i) // } // } arry[5]() //10
// 在for循環中的let : 塊級變量能夠被內層代碼塊引用,而且內層代碼作的操做不會影響到外層
var arry = [];
for(let i=0;i<10;i++){
arry[i] = function(){
i = i*i;
console.log(i)
};
console.log(i) //0,1,2,3,4,5,6,7,8,9
} console.log(arry);
arry[5]() //25
const name = "gaoxin"; const name = "隨意" // 報錯
3.模板字符串web
ES6引入了反引號``,變量${}npm
<body> <div id="app"> </div> <script> // 給div添加文本 let ele = document.getElementById('app'); ele.innerText = 'hello'; let hobby1 = "翻車"; let hobby2 = "背詩"; let hobby3 = "看女主播"; ele.innerHTML = `<ul> <li>${hobby1}</li> <li>${hobby2}</li> <li>${hobby3}</li> </ul>` </script> </body>
4.箭頭函數後端
1.類比python的匿名函數lambda數組
2.特色瀏覽器
1.不須要function關鍵字來建立函數前端框架
2.省略return關鍵字
3.繼承當前上下文的this關鍵字(由於箭頭函數的調用者是當前上下文,跟普通函數區別開)
3.this
普通函數this取決於當前函數最近的調用者
// 普通函數的this:實際上,當執行obj1.func()時,把obj當成this傳到func()的上下文,這個函數上下文指的時當前函數的做用域 function aa() { console.log(this) } aa(); // this => window let obj1 = { a:1, func:aa }; obj1.func(); //this => obj1
箭頭函數的this取決於當前上下文環境,上下文就是指函數的做用域
<body> <script> // 箭頭函數 // 普通函數的this 當前函數最近的調用者 // 箭頭函數的this 取決於當前的上下文環境 function aa() { console.log(this) } aa(); // this => window let obj1 = { a:1, func:aa }; obj1.func(); //this => obj1 let obj2 = { obj1: obj1, a:2 }; obj2.obj1.func(); //this = > obj1 function myfunc() { return x+1 } let fun2 = x => x+1; //箭頭函數 // let fun2 = () => x+1; //箭頭函數 fun2(5); //this => window console.log(fun2(5)); let func3 = () => console.log(this); func3(); //this => window </script> </body>
5.數據的解構
解構object的時候{key,key} {key:a,key:b}
解構數值的時候[x,y..]
<body> <script> let obj = { a:1, b:2, x:3, y:4 }; let hobby = ["吹牛","抽菸","燙頭"]; // 對象的解構方法一 let {a,b,x, y} = obj; console.log(a); console.log(b); console.log(x); console.log(y); // 對象的解構方法二 let {a:n1,b:n2,x:n3,y:n4} = obj; console.log(n1); console.log(n2); console.log(n3); console.log(n4); // 數組的解構 let [hobby1,hobby2,hobby3] = hobby; console.log(hobby1); console.log(hobby2); console.log(hobby3); </script> </body>
6.類的定義
定義類 class
構造方法 constructor
繼承 extends
子類沒有this 須要用super()方法來找到父類的this
<body> <script>
//父類 class Animal { constructor(){ //構造方法 this.type = "animal" }; say(){ console.log("animal says ao!!!") } eat(){ console.log(this.type+'eatting') } }
//子類 class Dog extends Animal{ //繼承父類 // 子類沒有this constructor(){ super(); // 用super方法拿到父類的this this.type = "dog" // 屬性能夠繼承 } say(){ // 方法也能夠繼承,也能夠從新定義 console.log("wang~~") } } let dog = new Dog(); //實例化一個對象 console.log(dog.type); dog.say(); dog.eat(); //繼承的父類的方法 </script> </body>
7.ES6的之間的import和export
// main.js // 導出多個聲明 export var name = "gaoxin" export var age = "18" export function aa() { return 1 } // 批量導出 export {name, age, aa} // test.js import {name, age, aa} from "./main" console.log(name) console.log(age) console.log(aa()) // 整個模塊導入 把模塊當作一個對象 // 該模塊下全部的導出都會做爲對象的屬性存在 import * as obj from "./main" console.log(obj.name) console.log(obj.age) console.log(obj.aa())
默認導出
// 一個模塊只能有一個默認導出 // 對於默認導出 導入的時候名字能夠不同 // main.js var app = new Vue({ }); export default app // test.js // import app from "./main" import my_app from "./main"
二,前端框架Vue
1.前端內容回顧
HTML:超文本標記語言,幫助構建頁面的結構
CSS:層疊樣式表,給頁面結構渲染樣式
JavaScript:腳本語言,用於用戶的交互
JQuery:封裝原生JavaScript語句
BootStrap:樣式的封裝
2.Vue框架介紹
Vue是一個構建數據驅動的web界面的漸進式框架。(主要思想)
MVVM架構:
Model 數據
View 模板
ViewModel 爲模板提供處理好的數據
目標是經過儘量簡單的API實現響應式的數據綁定和組合的視圖組件。
可以構建複雜的單頁面應用。
讓開發中可以從獲取DOM和渲染DOM的操做中解脫出來。
借鑑了後端的MVC架構模式(MVC Model View Controler)
3.Vue經常使用指令
0.Vue的使用
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Vue初識</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{name}} <!--數據驅動視圖--> </div> <script> // let ele = document.getElementById("app"); // ele.innerText = "hello"; // 使用Vue實現上面原生JS的動做 // app.name = "" 賦值修改數據 const app = new Vue({ el:"#app", // 實例化對象的做用域:id=app data: { name:"alex" } }) </script> </body> </html>
1.v-text 和v-html (至關於innerText和innerHtml)
<body> <div id="app"> <p v-text="name"></p> <p v-text="age"></p> <div v-html="hobby" ></div> </div> <script> // 先獲取p標籤 // innerText // innerHtml const app = new Vue({ el: "#app", data: { name: "alex", age:18, hobby:`<ul> <li>學習</li> <li>舔狗</li> <li>吸貓</li> </ul>` } }) </script> </body>
2.v-for
<body> <div id="app"> <ul> <!--建議設置一個惟一的key--> <!--index爲序號--> <li v-for="(course, index) in course_list":key="index">{{course}}-{{index}}</li> </ul> <ul> <li v-for="(stu,index) in s1">{{stu.name}}{{stu.age}}</li> </ul> </div> <script> const app = new Vue({ el:"#app", data:{ course_list: ["Python","Linux","Vue","Go"], s1: [ { name: "alex", age:19, }, { name: "peiqi", age: 20 } ] } }) </script> </body>
3.v-bind:綁定屬性 簡寫:
<body> <div id="app"> <div v-bind:class="{my_acitve: is_show}"> <!--my_active樣式類是否生效取決於is_show--> </div> <!--簡寫--> <img :src="my_src" alt=""> <!--<img v-bind:src="my_src" alt="">--> </div> <script> const app = new Vue({ el: "#app", data: { is_show: true, // app.is_show = False my_src : "url", // my_src:["url","url"], } }) </script> </body>
4.v-on:綁定事件 簡寫@
<body> <div id="app"> <!--<button v-on@click>點擊彈出look</button>--> <!--簡寫不傳參--> <!--<button @click="my_click('打遊戲')" @mouseenter="my_enter">點擊彈出look</button>--> <!--v-on綁定多個方法--> <button @click="my_click('打遊戲')" v-on="{mouseenter:my_enter,mouseleave:my_leave}">點擊彈出look</button> <!--簡寫--> <!--<button @click="my_click">點擊彈出look</button>--> </div> <script> const app = new Vue({ el: "#app", data: { }, methods: { my_click: function (x) { alert("luke"+ x) }, my_enter: function () { console.log("鼠標移入時間") }, my_leave: function () { console.log("鼠標移出事件") } } }) </script> </body>
5.v-if,v-else-if,v-else:主用利用appendChild實現控制視圖輸出
<body> <div id="app"></div> <div v-if="role == 'admin">管理員你好</div> <div v-else-if="role == 'hr'">查看簡歷</div> <div v-else>沒有權限</div> <script> // appendChild const app = new Vue({ el: "#app", data: { role: "admin" } }) </script> </body>
6.v-show:利用display實現控制視圖是否顯示
<body> <div id="app"> <div v-show="admin">管理員你好</div> <div v-show="hr">查看簡歷</div> <div v-show="others">沒有權限</div> <div v-show="is_show">hello</div> </div> <script> // display const app = new Vue({ el: "#app", data: { admin: true, hr:false, others:false, is_show: false, }, methods:{ my_click: function () { this.is_show = !this.is_show //this.is_show 等於app.is_show } } }) </script> </body>
7.v-model:數據的雙向綁定,能夠用來捕獲客戶輸入的內容,並同時輸出到頁面
指令修飾符:.lazy、.number、.trim
<body> <div id="app"> <!--.lazy 取消實時動態綁定,當用戶輸入完畢後再綁定到變量--> <input type="text" v-model.lazy.trim="username"> {{username}} <!--trim 去除空格--> <pre>{{username}}</pre> <!-打印字符串原始狀態-> <!--轉換爲數字類型--> <input type="text" v-model.lazy.number="phone"> {{typeof phone}} <textarea name="" cols="30" rows="10" v-model="article"></textarea> {{article}} <select name="" v-model="choices" multiple> <option value="1">xiayuhao</option> <option value="2">yuanchengming</option> <option value="3">liqingyang</option> </select> {{choices}} </div> <script> const app = new Vue({ el: "#app", data:{ username:"", phone:"", article: "", choices: ["1"] //默認選擇 } }) </script> </body>
8.自定義指令
-- 自定義的指令
-- Vue.directive("指令名稱", function(el,binding){
-- el 綁定指令的標籤元素
-- binding 指令的全部信息組成的對象
-- value 指令綁定數據的值
-- modifires 指令修飾符
})
<style> .my_box { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="app"> <div class="my_box" v-pin.right.top="pinned"></div> <div class="my_box" v-pin.right.bottom="pinned"></div> </div> <h1 v-mytext="name"></h1> <script> // 回調函數 Vue.directive("pin",function (el,binding) { //vue提供的一個全局方法 console.log(el); // el 是咱們綁定指令的標籤元素 console.log(binding); // binding 指令的全部信息 let gps = binding.modifiers; // {right:true,top:true} if (binding.value){ // 給div定位到瀏覽器的右下角 el.style.position = "fixed"; // el.style.right = 0; // el.style.bottom = 0; for (let position in gps){ el.style[position] = 0 } } else { el.style.position = "static"; } }); // 自定義v-text Vue.directive("mytext",function (el, binding) { el.innerText = binding.value; }); const app = new Vue({ el: "#app", //指定做用域 data: { pinned: true, name: "gaoxin" } }) </script> </body>