电商项目4：全栈之前端
生活随笔
收集整理的這篇文章主要介紹了
电商项目4：全栈之前端
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
全棧之前端
- 1、技術棧
- 2、es6
- 跨域
- 聲明變量
- 變量提升
- const
- 數組解構
- 對象解構
- 字符串擴展
- 字符串插入變量表達式
- 調用方法
- 函數參數默認值傳遞
- 不定參數
- 箭頭函數
- 箭頭函數結合解構表達式
- 對象優化
- 對象復制
- 聲明對象簡寫
- 對象的函數屬性簡寫
- 深拷貝
- 合并對象
- map和reduce方法
- promise異步編排
- 模塊化
- 3、vue
- 1、聲明式渲染（new Vue({})）
- 2、雙向綁定 (v-model)
- 3、事件處理（v-on:）
- 4、調用方法（methods）
- 5、指令
- 5.1、v-text v-html
- 5.2、插值表達式
- 5.3、v-bind(單向綁定)
- 5.4、v-model(雙向綁定)
- 5.5、事件修飾符
- 5.6、按鍵修飾符
- 5.7、v-for
- 5.8、v-if v-show
- 5.9、v-else，v-else-if
- 5.10 v-if和v-for結合使用
- 6、計算屬性
- 7、監聽器
- 8、過濾器
- 8.1、局部過濾器
- 8.2、全局過濾器
- 9、組件化
- 9.1、全局申明組件
- 9.2、局部申明組件
- 10、生命周期和鉤子函數
- 11、vue腳手架
- 12、vue整合ElementUI快速開發
1、技術棧
技術棧介紹：前端主要是6部分
1、vscode：最好用的前端編程工具
2、es6：可理解為后端的jdk8新特性之類
3、node.js主要使用里面的npm
4、vue：前端框架
5、babel：javascript編譯器?？梢允褂胑s最新的語法進行編程，而不用考慮瀏覽器兼容問題
6、webpack：打包前端項目工具
2、es6
#前端工程創建
1、文件->新建文件夾（es6）->打開文件夾
2、新建let.html
3、編寫第一段前端代碼
！+回車
4、let特性
跨域
<script>// var 聲明的變量往往會越域// let 聲明的變量有嚴格局部作用域{var a = 1;let b = 2;}console.log(a); // 1console.log(b); // ReferenceError: b is not defined</script>var聲明的變量可以在代碼塊外使用。但是let聲明在代碼塊外使用會報錯
多行注釋：alt+shift+a
聲明變量
// var 可以聲明多次// let 只能聲明一次var m = 1var m = 2let n = 3let n = 4console.log(m) // 2console.log(n) // Identifier 'n' has already been declared
live server插件安裝之后保存vscode則頁面不用每次打開
自己會更新頁面內容
變量提升
// var 會變量提升 // let 不存在變量提升console.log(x); // undefinedvar x = 10;console.log(y); //ReferenceError: y is not definedlet y = 20;const
// 1. 聲明之后不允許改變// 2. 一但聲明必須初始化，否則會報錯const a = 1;a = 3; //Uncaught TypeError: Assignment to constant variable.數組解構
以前
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><script>let arr = [1,2,3];let a = arr[0];let b = arr[1];let c = arr[2];console.log(a,b,c);</script> </body> </html>現在
let arr = [1,2,3];let [a,b,c] = arr;console.log(a,b,c);對象解構
以前
const person = {name: "jack",age: 21,language: ['java', 'js', 'css']}const name = person.name;const age = person.age;const language = person.language;console.log(name,age,language);
現在：
字符串擴展
let ss = `<div> <span>hello world<span> </div>`console.log(ss);字符串插入變量表達式
調用方法
function getSame(){return `想說話`;} let info = `我是${name}，今年${age + 20}了,我${getSame()}`; console.log(info);函數參數默認值傳遞
//在 ES6 以前，我們無法給一個函數參數設置默認值，只能采用變通寫法：function add(a, b) {// 判斷 b 是否為空，為空就給默認值 1b = b || 1;return a + b;}// 傳一個參數console.log(add(10)); //現在可以這么寫：直接給參數寫上默認值，沒傳就會自動使用默認值function add2(a, b = 1) {return a + b;}// 傳一個參數console.log(add2(10));不定參數
function fun(...values) {console.log(values.length)}fun(1, 2) //2fun(1, 2, 3, 4) //4箭頭函數
一個參數：
// 箭頭函數//以前聲明一個方法 // var print = function (obj) { // console.log(obj); // }var print = obj => console.log(obj); print("hello");
多個參數：
復雜方法體：
箭頭函數結合解構表達式
//以前的方式： const person = { name: "jack", age: 21, language: ['java', 'js', 'css'] }function hello(person) { console.log("hello," + person.name)}hello(person);//箭頭函數 const param = (param) => (console.log("hello,"+param.name));param(person);//箭頭函數+解構const param1 = ({name}) => (console.log("hello,"+name)); param1(person);對象優化
const person = { name: "jack", age: 21, language: ['java', 'js', 'css'] } console.log(Object.keys(person));//["name", "age", "language"] console.log(Object.values(person));//["jack", 21, Array(3)] console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]Object.keys獲得對象的鍵
Object.values獲得對象的值
Object.entries獲得對象鍵值對
對象復制
Object.assgin方法
// 對象復制 const target = { a: 1 }; const source1 = { b: 2 }; const source2 = { c: 3 }; //Object.assign 方法的第一個參數是目標對象，后面的參數都是源對象。 Object.assign(target, source1, source2); console.log(target)//{a: 1, b: 2, c: 3}聲明對象簡寫
// 聲明對象簡寫 const age = 23 const name = "張三"// 傳統 const person1 = { age: age, name: name } console.log(person1) // ES6：屬性名和屬性值變量名一樣，可以省略 const person2 = { age, name } console.log(person2) //{age: 23, name: "張三"}對象的函數屬性簡寫
let person = { name: "jack", // 以前： eat: function (food) { console.log(this.name + "在吃" + food); }, // 箭頭函數版：這里拿不到 this eat2: food => console.log(person.name + "在吃" + food), // 簡寫版： eat3(food) { console.log(this.name + "在吃" + food); } }person.eat("apple"); person.eat2("banana"); person.eat3("pear");
簡寫版不用寫function了
深拷貝
// 1、拷貝對象（深拷貝） let person1 = { name: "Amy", age: 15 } let someone = { ...person1 } console.log(someone) //{name: "Amy", age: 15}合并對象
// 2、合并對象 let age = { age: 15 } let name = { name: "Amy" } let person2 = { ...age, ...name } //如果兩個對象的字段名重復，后面對象字段值會覆蓋前面對象的字段值 console.log(person2) //{age: 15, name: "Amy"}map和reduce方法
map()：接收一個函數，將原數組中的所有元素用這個函數處理后放入新數組返回。
let arr = ['1', '20', '-5', '3']; console.log(arr) arr = arr.map(s => parseInt(s)); console.log(arr)
reduce():
語法：
arr.reduce(callback,[initialValue])
reduce 為數組中的每一個元素依次執行回調函數，不包括數組中被刪除或從未被賦值的元
素，接受四個參數：
初始值（或者上一次回調函數的返回值），
當前元素值，
當前索引，
調用 reduce 的數組
無初始值調用reduce方法則數組中所有元素從左到右進行函數運算
有初始值調用reduce方法則初始值與元素第一個值進行函數運算后，再從左到右進行函數運算
promise異步編排
user.json
{"id": 1,"name": "zhangsan" }user_corse_1.json
{"id": 10,"name": "chinese" }corse_score_10.json
{"id": 100,"score": 90 }promise.html
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><title>Document</title> </head><body><script>$.ajax({url: "mock/user.json",success(data) {console.log("查詢用戶：", data);$.ajax({url: `mock/user_corse_${data.id}.json`,success(data) {console.log("查詢到課程：", data);$.ajax({url: `mock/corse_score_${data.id}.json`,success(data) {console.log("查詢到分數：", data);},error(error) {console.log("出現異常了：" + error);}});},error(error) {console.log("出現異常了：" + error);}});},error(error) {console.log("出現異常了：" + error);}});</script></body></html>
但是這種嵌套方式太復雜
用企業進階版封裝
// promise異步處理// 1、封裝方法let get = function(url,data){return new Promise((resorve,reject) => {$.ajax({url:url,data:data,success:function(data){resorve(data)},error:function(err){reject(err)}}) }) }// 2、發起請求get(`mock/user.json`).then((data)=>{// 1、獲取用戶信息console.log("當前用戶信息為：",data)return get(`mock/user_corse_${data.id}.json`);}).then((data) => {// 2、獲取課程信息console.log("當前課程信息為:",data)return get(`mock/corse_score_${data.id}.json`);}).then((data) =>{// 3、獲取分數信息console.log("當前分數信息為:",data)}).catch(() => {console.log("錯誤信息為：",err)})模塊化
模塊化就是把代碼進行拆分，方便重復利用。類似 java 中的導包：要使用一個包，必須先
導包。而 JS 中沒有包的概念，換來的是模塊
user.js
hello.js
export const util = {sum(a, b) {return a + b;} }aaa.js
import util from `./hello.js`; import {name,age} from `./user.js`;console.log(name) util.sum(1,2);3、vue
https://v2.cn.vuejs.org/v2/guide/
根據官方文檔學習vue2.0
1、新建一個文件夾
2、初始化項目
npm init -y會生成一個
3、安裝vue依賴
4、新建一個index.html測試
1、聲明式渲染（new Vue({})）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id="app"><h1>{{name}},你好帥</h1></div><script src="./node_modules/vue/dist/vue.js"></script><script>// 1、vue的聲明式渲染let a1 = new Vue({el: "#app",data:{name : '張三' }})</script></body> </html>2、雙向綁定 (v-model)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id="app"><input type="text" v-model="num"><h1>{{name}},你好帥，有{{num}}個人給他點贊</h1></div><script src="./node_modules/vue/dist/vue.js"></script><script>// 1、vue的聲明式渲染let a1 = new Vue({el: "#app",data:{name : '張三',num : 1 }})// 2、雙向綁定，模型變化，視圖變化 </script></body> </html>3、事件處理（v-on:）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id="app"><input type="text" v-model="num"><button v-on:click="num++">點贊</button><h1>{{name}},你好帥，有{{num}}個人給他點贊</h1></div><script src="./node_modules/vue/dist/vue.js"></script><script>// 1、vue的聲明式渲染let a1 = new Vue({el: "#app",data:{name : '張三',num : 1 }})// 2、雙向綁定，模型變化，視圖變化 // 3、事件處理</script></body> </html>
4、調用方法（methods）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id="app"><input type="text" v-model="num"><button v-on:click="num++">點贊</button><button v-on:click="cancel">取消</button><h1>{{name}},你好帥，有{{num}}個人給他點贊</h1></div><script src="./node_modules/vue/dist/vue.js"></script><script>// 1、vue的聲明式渲染let a1 = new Vue({el: "#app",data:{name : '張三',num : 1 },methods:{cancel(){this.num--;}}})// 2、雙向綁定，模型變化，視圖變化 // 3、事件處理// 4、調用方法</script></body> </html>
##可以裝一個vue2的語法提示插件
##裝一個瀏覽器插件
vue-devtool
5、指令
5.1、v-text v-html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id = 'app'>{{msg}}</div><script src="./node_modules/vue/dist/vue.js"></script><script>new Vue({el:'#app',data:{msg:'<h1>Hello</h1>'}})</script></body> </html> <span v-html="msg"></span><span v-text="msg"></span>
v-html 和v-text與{{}}相比好處是：可以避免插值閃爍
5.2、插值表達式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id = 'app'>{{msg}} {{1+11}} {{sayHello()}}<br/><span v-html="msg"></span><span v-text="msg"></span></div><script src="./node_modules/vue/dist/vue.js"></script><script>new Vue({el:'#app',data:{msg:'<h1>Hello</h1>'},methods:{sayHello(){return 'hello';}}})</script></body> </html>###插值表達式只能寫在標簽體內。不能寫在屬性中
需要寫到屬性中必須使用v-bind
5.3、v-bind(單向綁定)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id='app'><a v-bind:href="link">gogogo</a> </div><script src="./node_modules/vue/dist/vue.js"></script><script>new Vue({el:'#app',data:{link:'http://www.baidu.com'}})</script></body> </html>
v-bind可以動態綁定class或者style
##以前的寫法：
##綁定style寫法
可以v-bind:style,也可以:style
5.4、v-model(雙向綁定)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id="app"><input type="checkbox" v-model="check" value="Java">java <br/><input type="checkbox" v-model="check" value="PHP">php <br/><input type="checkbox" v-model="check" value="python">python <br/>選中了{{check.join(",")}} </div><script src="./node_modules/vue/dist/vue.js"></script><script>let vm = new Vue({el:'#app',data:{check:[]}})</script> </body> </html>5.5、事件修飾符
##阻止事件冒泡到父元素（click.stop）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id="app"><!--事件中直接寫js片段--><button v-on:click="num++">點贊</button><!--事件指定一個回調函數，必須是vue實例中的函數--><button v-on:click="cancel">取消</button><h1>有{{num}}個贊</h1><div style="border: 1px solid red;padding: 20px;" v-on:click="hello">大div<div style="border: 1px solid blue;padding: 20px;" @click="hello">小div <br/><a href="https://www.baidu.com">去百度</a></div></div><!--按鍵修飾符：--><input type="text"><br/>提示：</div><script src="./node_modules/vue/dist/vue.js"></script><script>new Vue({el:'#app',data:{num:1},methods:{cancel(){return this.num--;},hello(){alert("點擊了");}}})</script> </body> </html>點擊小div會出現彈窗2次
加上click.stop以后
點擊小div只彈窗一次
##阻止默認行為（@click.prevent）
點擊小div中的去百度會先彈窗，再跳轉去百度
@click.prevent
點擊小div中的去百度會只彈窗，不跳轉去百度。
@click.prevent=“hello”
點擊小div中的去百度彈兩次彈窗，不跳轉去百度。
@click.prevent.stop=“hello”
點擊小div中的去百度彈一次彈窗，不跳轉去百度。
##只被點擊一次（v-on:click.once）
v-on:click.once
只會被點擊一次
5.6、按鍵修飾符
<input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2"><br/>v-on:keyup.up ：跟鍵盤上鍵綁定事件
@keyup.down：跟鍵盤下鍵綁定事件
@click.ctrl=“num=10” ：綁定組合按鍵：ctrl+鼠標左鍵單擊時觸發num=10
5.7、v-for
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id='app'><ul><li v-for="user in users">{{user.name}} ===> {{user.gender}} ===> {{user.age}}</li> </ul></div><script src="./node_modules/vue/dist/vue.js"></script><script>new Vue({el:'#app',data:{users:[{name:'柳巖',gender:'女',age:21},{name:'張三',gender:'男',age:18},{name:'范冰冰',gender:'女',age:24},{name:'劉亦菲',gender:'女',age:18},{name:'古力娜扎',gender:'女',age:25}]},})</script> </body> </html>遍歷：
遍歷下標
遍歷span
對一般數組的遍歷：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id='app'><ul><li v-for="(user,index) in users">當前下標：{{index}} {{user.name}} ===> {{user.gender}} ===> {{user.age}}<br/>對象信息：<span v-for="(v,k,i) in user">{{k}} ===> {{v}} ===> {{i}}</span></li> </ul><ul><li v-for="(num,index) in nums" :key="index">{{num}} ===> {{index}}</li></ul></div><script src="./node_modules/vue/dist/vue.js"></script><script>new Vue({el:'#app',data:{users:[{name:'柳巖',gender:'女',age:21},{name:'張三',gender:'男',age:18},{name:'范冰冰',gender:'女',age:24},{name:'劉亦菲',gender:'女',age:18},{name:'古力娜扎',gender:'女',age:25}],nums:[1,2,3,4,4]},})</script> </body> </html>5.8、v-if v-show
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id="app"><button @click="show = !show">點我呀</button><h1 v-if="show"> if=看到我</h1><h1 v-show="show"> show=看到我</h1></div><script src="./node_modules/vue/dist/vue.js"></script><script>new Vue({el : '#app',data : {show : true}})</script> </body> </html>
==》
v-if整個標簽消失了
v-show是加了隱藏的樣式
5.9、v-else，v-else-if
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id="app"><button v-on:click="random = Math.random()">點我啊</button><span>{{random}}</span><h1 v-if="random >= 0.75">>=0.75</h1><h1 v-else-if="random >= 0.5">>=0.5</h1><h1 v-else-if="random >= 0.2">>=0.2</h1><h1 v-else="randow < 0.2"><0.2</h1></div><script src="./node_modules/vue/dist/vue.js"></script><script>new Vue({el : '#app',data : {random : 1}})</script> </body> </html>5.10 v-if和v-for結合使用
過濾掉了張三男
6、計算屬性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id="app"><!--某些結果是基于之前數據實時計算結果出來的，我們可以利用計算屬性--><ul><li>西游記：價格：{{xyjPrice}} 數量：<input type="number" v-model="xyjNum"></li><li>水滸傳：價格：{{sfzPrice}} 數量：<input type="number" v-model="sfzNum"></li><li>總價：{{totalPrice}}</li></ul></div><script src="./node_modules/vue/dist/vue.js"></script><script>new Vue({el: '#app',data : {xyjPrice: 99.9,sfzPrice: 98,xyjNum:1,sfzNum:1},// 計算屬性computed:{totalPrice(){return this.xyjPrice * this.xyjNum + this.sfzPrice * this.sfzNum}}})</script> </body> </html>7、監聽器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id="app"><!--某些結果是基于之前數據實時計算結果出來的，我們可以利用計算屬性--><ul><li>西游記：價格：{{xyjPrice}} 數量：<input type="number" v-model="xyjNum"></li><li>水滸傳：價格：{{sfzPrice}} 數量：<input type="number" v-model="sfzNum"></li><li>總價：{{totalPrice}}</li>{{msg}}</ul></div><script src="./node_modules/vue/dist/vue.js"></script><script>new Vue({el: '#app',data : {xyjPrice: 99.9,sfzPrice: 98,xyjNum:1,sfzNum:1,msg:""},// 計算屬性computed:{totalPrice(){return this.xyjPrice * this.xyjNum + this.sfzPrice * this.sfzNum}},// 監聽器watch:{xyjNum(newNum,oldNum){// alert("newNum:"+newNum+"===>oldNum"+oldNum);if (newNum >= 3){this.msg= "超出庫存";this.xyjNum = 3;}else{this.msg = ""}}}})</script> </body> </html>8、過濾器
8.1、局部過濾器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id="app"><ul><li v-for="user in userList">{{user.id}}===>{{user.name}}===>{{user.gender == 1 ? '男' : '女'}} ===>{{user.gender | genderFilter}} </li></ul></div><script src="./node_modules/vue/dist/vue.js"></script><script>new Vue({el : '#app',data:{userList:[{id:1,name:'zhangsan',gender:'1'},{id:2,name:'lisi',gender:'2'}]},filters:{genderFilter(val){if (val == 1){return '男';}else{return '女';}}}})</script> </body> </html>8.2、全局過濾器
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head><body><div id="app"><ul><li v-for="user in userList">{{user.id}}===>{{user.name}}===>{{user.gender == 1 ? '男' : '女'}} ===>{{user.gender | genderFilter}}===> {{user.gender | gFilter}}</li></ul></div><script src="./node_modules/vue/dist/vue.js"></script><script>// 全局filterVue.filter('gFilter', function (val) {if (val == 1) {return '男···';} else {return '女···';}})new Vue({el: '#app',data: {userList: [{ id: 1, name: 'zhangsan', gender: '1' },{ id: 2, name: 'lisi', gender: '2' }]},filters: {genderFilter(val) {if (val == 1) {return '男';} else {return '女';}}}})</script> </body></html>9、組件化
9.1、全局申明組件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id = 'app'><button @click="count++">我被點擊了{{count}}次</button><counter></counter></div><script src="./node_modules/vue/dist/vue.js"></script><script>// 全局申明組件Vue.component("counter",{template: `<button v-on:click="count++">我被點擊了{{count}}次</button>`,data(){return{count: 1}}})new Vue({el : '#app',data:{count: 1}})</script> </body> </html>
9.2、局部申明組件
// 局部申明組件const buttonCounter = {template: `<button v-on:click="count++">我被點擊了{{count}}次~~~~</button>`,data(){return{count: 1}}}new Vue({el : '#app',data:{count: 1},components:{'button-counter':buttonCounter}})<div id = 'app'><button @click="count++">我被點擊了{{count}}次</button><counter></counter><button-counter></button-counter></div>10、生命周期和鉤子函數
每個 Vue 實例在被創建時都要經過一系列的初始化過程 ：創建實例，裝載模板，渲染模
板等等。Vue 為生命周期中的每個狀態都設置了鉤子函數（監聽函數）。每當 Vue 實例處于
不同的生命周期時，對應的函數就會被觸發調用。
生命周期：你不需要立馬弄明白所有的東西。
##鉤子函數
beforeCreated：我們在用 Vue 時都要進行實例化，因此，該函數就是在 Vue 實例化時調
用，也可以將他理解為初始化函數比較方便一點，在 Vue1.0 時，這個函數的名字就是
init。
created：在創建實例之后進行調用。
beforeMount：頁面加載完成，沒有渲染。如：此時頁面還是{{name}}
mounted：我們可以將他理解為原生 js 中的 window.οnlοad=function({.,.}),或許大家也在
用 jquery，所以也可以理解為 jquery 中的$(document).ready(function(){….})，他的功能就
是：在 dom 文檔渲染完畢之后將要執行的函數，該函數在 Vue1.0 版本中名字為
compiled。 此時頁面中的{{name}}已被渲染成張三
beforeDestroy：該函數將在銷毀實例前進行調用 。
destroyed：改函數將在銷毀實例時進行調用。
beforeUpdate：組件更新之前。
updated：組件更新之后。
<!DOCTYPE html> <div lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="app"><span id="num">{{num}}</span><button v-on:click="num++">贊！</button><h2>{{name}}，非常帥！！！有{{num}}個人點贊。</h2></div></body><script src="./node_modules/vue/dist/vue.js"></script><script>let app = new Vue({el: "#app",data: {name: "張三",num: 100},methods: {show() {return this.name;},add() {this.num++;}},beforeCreate() {console.log("=========beforeCreate=============");console.log("數據模型未加載：" + this.name, this.num);console.log("方法未加載：" + this.show());console.log("html 模板未加載：" + document.getElementById("num"));},created: function () {console.log("=========created=============");console.log("數據模型已加載：" + this.name, this.num);console.log("方法已加載：" + this.show());console.log("html 模板已加載：" + document.getElementById("num"));console.log("html 模板未渲染：" + document.getElementById("num").innerText);},beforeMount() {console.log("=========beforeMount=============");console.log("html 模板未渲染：" + document.getElementById("num").innerText);},mounted() {console.log("=========mounted=============");console.log("html 模板已渲染：" + document.getElementById("num").innerText);},beforeUpdate() {console.log("=========beforeUpdate=============");console.log("數據模型已更新：" + this.num);console.log("html 模板未更新：" + document.getElementById("num").innerText);},updated() {console.log("=========updated=============");console.log("數據模型已更新：" + this.num);console.log("html 模板已更新：" + document.getElementById("num").innerText);}});</script></body></html>#第一階段：beforeCreate
#第二階段：created
#第三階段：beforeMount
#第四階段：mounted
點擊頁面元素更新時：
#第一階段：beforeUpdate
#第二階段：updated
11、vue腳手架
#vue模塊化開發
1、全局安裝 webpack
npm install webpack -g
2、安裝vue腳手架
npm install -g @vue/cli-init
3、初始化vue
創建一個vue-demo文件夾
執行vue init webpack vue-demo
#如果執行vue報錯時
再執行以下命令即可
npm install -g vue
npm uninstall vue-cli -g
npm install -g @vue/cli
確定
確定
確定
選擇第一個
是否做頁面跳轉：yes
是否eslint語法規范檢查：no
是否單元測試：no
是否使用這個e2e單元測試：no
選擇第一個
這樣模塊化環境就初始好了
啟動項目
cd vue-demo
npm run dev
index.js
路由：當我路徑為/時使用HelloWorld組件
##要求：自己編寫組件然后跳轉/hello路徑如何實現？
1、編寫組件
2、組件三要素
template、script、style
模板，腳本、風格
Hello.vue
<template><div><h1>你好，{{name}}</h1></div> </template><script> export default {data () {return {name: '張三'}} } </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style>index.js
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Hello from '@/components/Hello'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path:'/hello',name:'Hello',component:Hello}] })
##通過超鏈接跳轉兩個頁面
App.vue
<template><div id="app"><img src="./assets/logo.png"><router-link to="/">去首頁</router-link><router-link to="/hello">去hello</router-link><router-view/></div> </template><script> export default {name: 'App' } </script><style> #app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; } </style>
12、vue整合ElementUI快速開發
1、安裝elementUI
npm i element-ui
如果vue版本過高無法安裝elementui，甚至報錯可以嘗試
npm i element-ui -S --legacy-peer-deps
2、使用elementUI
main.js
element官網
3、elementUI單選框
4、官方文檔Container 布局容器
App.vue
##需求：對分組一的布局進行調整，根據頁面url訪問路徑不同，main區域顯示：點擊用戶列表顯示相關內容
1、app.vue
2、將el-table抽取
3、新建組件
##使用代碼片段生成vue文件
代碼片段：
#文件->首選項->配置用戶代碼片段->新建全局代碼片段
#新建全局代碼片段vue，回車
#將代碼片段粘貼過來
#直接在vue文件中輸入vue可以立馬生成模板
MyTable.vue
<template> <div></div> </template><script> //這里可以導入其他文件（比如：組件，工具 js，第三方插件 js，json文件，圖片文件等等） //例如：import 《組件名稱》 from '《組件路徑》';export default { //import 引入的組件需要注入到對象中才能使用 components: {}, props: {}, data() { //這里存放數據 return {}; }, //計算屬性 類似于 data 概念 computed: {}, //監控 data 中的數據變化 watch: {}, //方法集合 methods: {}, //生命周期 - 創建完成（可以訪問當前 this 實例） created() {}, //生命周期 - 掛載完成（可以訪問 DOM 元素） mounted() {}, beforeCreate() {}, //生命周期 - 創建之前 beforeMount() {}, //生命周期 - 掛載之前 beforeUpdate() {}, //生命周期 - 更新之前 updated() {}, //生命周期 - 更新之后 beforeDestroy() {}, //生命周期 - 銷毀之前 destroyed() {}, //生命周期 - 銷毀完成 activated() {}, //如果頁面有 keep-alive 緩存功能，這個函數會觸發 } </script> <style lang='scss' scoped> //@import url(); 引入公共 css 類</style>4、將vue.app里的用戶信息粘貼到myTable.vue里
MyTable.vue
5、index.js配置路由
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Hello from '@/components/Hello' import MyTable from '@/components/MyTable'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path:'/hello',name:'Hello',component:Hello},{path:'/table',name:'MyTable',component:MyTable}] })6、對App.vue進行調整
##1、el-menu router屬性調整為true
##2、修改跳轉路徑
這里點擊hello就會跳hello
點擊用戶列表會跳用戶列表
總結
以上是生活随笔為你收集整理的电商项目4：全栈之前端的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CAD二次开发 选择集使用
- 下一篇： fd证书无法导出_fd安装浏览器证书