當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

电商项目4：全栈之前端

發(fā)布時(shí)間：2024/3/24 HTML 24 豆豆

生活随笔收集整理的這篇文章主要介紹了电商项目4：全栈之前端小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

全棧之前端

1、技術(shù)棧
2、es6
- 跨域
- 聲明變量
- 變量提升
- const
- 數(shù)組解構(gòu)
- 對(duì)象解構(gòu)
- 字符串?dāng)U展
- 字符串插入變量表達(dá)式
- 調(diào)用方法
- 函數(shù)參數(shù)默認(rèn)值傳遞
- 不定參數(shù)
- 箭頭函數(shù)
- 箭頭函數(shù)結(jié)合解構(gòu)表達(dá)式
- 對(duì)象優(yōu)化
- 對(duì)象復(fù)制
- 聲明對(duì)象簡(jiǎn)寫
- 對(duì)象的函數(shù)屬性簡(jiǎn)寫
- 深拷貝
- 合并對(duì)象
- map和reduce方法
- promise異步編排
- 模塊化
3、vue
- 1、聲明式渲染（new Vue({})）
- 2、雙向綁定 (v-model)
- 3、事件處理（v-on:）
- 4、調(diào)用方法（methods）
- 5、指令
- - 5.1、v-text v-html
  - 5.2、插值表達(dá)式
  - 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結(jié)合使用
- 6、計(jì)算屬性
- 7、監(jiān)聽器
- 8、過(guò)濾器
- - 8.1、局部過(guò)濾器
  - 8.2、全局過(guò)濾器
- 9、組件化
- - 9.1、全局申明組件
  - 9.2、局部申明組件
- 10、生命周期和鉤子函數(shù)
- 11、vue腳手架
- 12、vue整合ElementUI快速開發(fā)

1、技術(shù)棧

技術(shù)棧介紹：前端主要是6部分
1、vscode：最好用的前端編程工具
2、es6：可理解為后端的jdk8新特性之類
3、node.js主要使用里面的npm
4、vue：前端框架
5、babel：javascript編譯器?？梢允褂胑s最新的語(yǔ)法進(jìn)行編程，而不用考慮瀏覽器兼容問題
6、webpack：打包前端項(xiàng)目工具

2、es6

#前端工程創(chuàng)建
1、文件->新建文件夾（es6）->打開文件夾

2、新建let.html

3、編寫第一段前端代碼
！+回車

4、let特性

跨域

var聲明的變量可以在代碼塊外使用。但是let聲明在代碼塊外使用會(huì)報(bào)錯(cuò)

多行注釋：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則頁(yè)面不用每次打開
自己會(huì)更新頁(yè)面內(nèi)容

變量提升

// var 會(huì)變量提升 // let 不存在變量提升console.log(x); // undefinedvar x = 10;console.log(y); //ReferenceError: y is not definedlet y = 20;

const

// 1. 聲明之后不允許改變// 2. 一但聲明必須初始化，否則會(huì)報(bào)錯(cuò)const a = 1;a = 3; //Uncaught TypeError: Assignment to constant variable.

數(shù)組解構(gòu)

以前

<!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>

現(xiàn)在

let arr = [1,2,3];let [a,b,c] = arr;console.log(a,b,c);

對(duì)象解構(gòu)

以前

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);

現(xiàn)在：

字符串?dāng)U展

let ss = `<div> <span>hello world<span> </div>`console.log(ss);

字符串插入變量表達(dá)式

調(diào)用方法

function getSame(){return `想說(shuō)話`;} let info = `我是${name}，今年${age + 20}了,我${getSame()}`; console.log(info);

函數(shù)參數(shù)默認(rèn)值傳遞

//在 ES6 以前，我們無(wú)法給一個(gè)函數(shù)參數(shù)設(shè)置默認(rèn)值，只能采用變通寫法：function add(a, b) {// 判斷 b 是否為空，為空就給默認(rèn)值 1b = b || 1;return a + b;}// 傳一個(gè)參數(shù)console.log(add(10));

//現(xiàn)在可以這么寫：直接給參數(shù)寫上默認(rèn)值，沒傳就會(huì)自動(dòng)使用默認(rèn)值function add2(a, b = 1) {return a + b;}// 傳一個(gè)參數(shù)console.log(add2(10));

不定參數(shù)

function fun(...values) {console.log(values.length)}fun(1, 2) //2fun(1, 2, 3, 4) //4

箭頭函數(shù)

一個(gè)參數(shù)：

// 箭頭函數(shù)//以前聲明一個(gè)方法 // var print = function (obj) { // console.log(obj); // }var print = obj => console.log(obj); print("hello");

多個(gè)參數(shù)：

// 多個(gè)參數(shù)以前var sum = function(a,b){return a+b;}console.log(sum(1,2));// 箭頭函數(shù)var sum2 = (a,b) => a+b;console.log(sum2(20,30));

復(fù)雜方法體：

// 多個(gè)參數(shù)以前var sum = function(a,b){c = a+breturn a+c;}console.log(sum(1,2));/* // 箭頭函數(shù)var sum2 = (a,b) => a+b;console.log(sum2(20,30)); */var sum3 = (a,b) => {c = a+b;return a+c;}console.log(sum3(10,20));

箭頭函數(shù)結(jié)合解構(gòu)表達(dá)式

//以前的方式： const person = { name: "jack", age: 21, language: ['java', 'js', 'css'] }function hello(person) { console.log("hello," + person.name)}hello(person);//箭頭函數(shù) const param = (param) => (console.log("hello,"+param.name));param(person);//箭頭函數(shù)+解構(gòu)const param1 = ({name}) => (console.log("hello,"+name)); param1(person);

對(duì)象優(yōu)化

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獲得對(duì)象的鍵
Object.values獲得對(duì)象的值
Object.entries獲得對(duì)象鍵值對(duì)

對(duì)象復(fù)制

Object.assgin方法

// 對(duì)象復(fù)制 const target = { a: 1 }; const source1 = { b: 2 }; const source2 = { c: 3 }; //Object.assign 方法的第一個(gè)參數(shù)是目標(biāo)對(duì)象，后面的參數(shù)都是源對(duì)象。 Object.assign(target, source1, source2); console.log(target)//{a: 1, b: 2, c: 3}

聲明對(duì)象簡(jiǎn)寫

// 聲明對(duì)象簡(jiǎn)寫 const age = 23 const name = "張三"// 傳統(tǒng) const person1 = { age: age, name: name } console.log(person1) // ES6：屬性名和屬性值變量名一樣，可以省略 const person2 = { age, name } console.log(person2) //{age: 23, name: "張三"}

對(duì)象的函數(shù)屬性簡(jiǎn)寫

簡(jiǎn)寫版不用寫function了

深拷貝

// 1、拷貝對(duì)象（深拷貝） let person1 = { name: "Amy", age: 15 } let someone = { ...person1 } console.log(someone) //{name: "Amy", age: 15}

合并對(duì)象

// 2、合并對(duì)象 let age = { age: 15 } let name = { name: "Amy" } let person2 = { ...age, ...name } //如果兩個(gè)對(duì)象的字段名重復(fù)，后面對(duì)象字段值會(huì)覆蓋前面對(duì)象的字段值 console.log(person2) //{age: 15, name: "Amy"}

map和reduce方法

map()：接收一個(gè)函數(shù)，將原數(shù)組中的所有元素用這個(gè)函數(shù)處理后放入新數(shù)組返回。

let arr = ['1', '20', '-5', '3']; console.log(arr) arr = arr.map(s => parseInt(s)); console.log(arr)

reduce():
語(yǔ)法：
arr.reduce(callback,[initialValue])
reduce 為數(shù)組中的每一個(gè)元素依次執(zhí)行回調(diào)函數(shù)，不包括數(shù)組中被刪除或從未被賦值的元
素，接受四個(gè)參數(shù)：
初始值（或者上一次回調(diào)函數(shù)的返回值），
當(dāng)前元素值，
當(dāng)前索引，
調(diào)用 reduce 的數(shù)組

const arr = [1,20,-5,3]; //沒有初始值： console.log(arr.reduce((a,b)=>a+b));//19 console.log(arr.reduce((a,b)=>a*b));//-300//指定初始值： console.log(arr.reduce((a,b)=>a+b,1));//20 console.log(arr.reduce((a,b)=>a*b,0));//-0

無(wú)初始值調(diào)用reduce方法則數(shù)組中所有元素從左到右進(jìn)行函數(shù)運(yùn)算

有初始值調(diào)用reduce方法則初始值與元素第一個(gè)值進(jìn)行函數(shù)運(yùn)算后，再?gòu)淖蟮接疫M(jìn)行函數(shù)運(yùn)算

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("查詢到分?jǐn)?shù)：", data);},error(error) {console.log("出現(xiàn)異常了：" + error);}});},error(error) {console.log("出現(xiàn)異常了：" + error);}});},error(error) {console.log("出現(xiàn)異常了：" + error);}});</script></body></html>

但是這種嵌套方式太復(fù)雜

用企業(yè)進(jìn)階版封裝

// 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、發(fā)起請(qǐng)求get(`mock/user.json`).then((data)=>{// 1、獲取用戶信息console.log("當(dāng)前用戶信息為：",data)return get(`mock/user_corse_${data.id}.json`);}).then((data) => {// 2、獲取課程信息console.log("當(dāng)前課程信息為:",data)return get(`mock/corse_score_${data.id}.json`);}).then((data) =>{// 3、獲取分?jǐn)?shù)信息console.log("當(dāng)前分?jǐn)?shù)信息為:",data)}).catch(() => {console.log("錯(cuò)誤信息為：",err)})

模塊化

模塊化就是把代碼進(jìn)行拆分，方便重復(fù)利用。類似 java 中的導(dǎo)包：要使用一個(gè)包，必須先
導(dǎo)包。而 JS 中沒有包的概念，換來(lái)的是模塊

user.js

var name = "jack" var age = 21 export {name,age}

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/
根據(jù)官方文檔學(xué)習(xí)vue2.0

1、新建一個(gè)文件夾

2、初始化項(xiàng)目

npm init -y

會(huì)生成一個(gè)

3、安裝vue依賴

npm install vue@2

4、新建一個(gè)index.html測(cè)試

1、聲明式渲染（new Vue({})）

2、雙向綁定 (v-model)

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++">點(diǎn)贊</button><h1>{{name}},你好帥，有{{num}}個(gè)人給他點(diǎn)贊</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、調(diào)用方法（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++">點(diǎn)贊</button><button v-on:click="cancel">取消</button><h1>{{name}},你好帥，有{{num}}個(gè)人給他點(diǎn)贊</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、調(diào)用方法</script></body> </html>

##可以裝一個(gè)vue2的語(yǔ)法提示插件

##裝一個(gè)瀏覽器插件
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>

v-html 和v-text與{{}}相比好處是：可以避免插值閃爍

5.2、插值表達(dá)式

<!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>

###插值表達(dá)式只能寫在標(biāo)簽體內(nèi)。不能寫在屬性中

需要寫到屬性中必須使用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可以動(dòng)態(tài)綁定class或者style

<!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><span v-bind:class="{active:isActive,'text-danger':hasError}">你好</span></div><script src="./node_modules/vue/dist/vue.js"></script><script>let vm = new Vue({el:'#app',data:{link:'http://www.baidu.com',isActive:true,hasError:true}})</script></body> </html>

##以前的寫法：

##綁定style寫法
可以v-bind:style,也可以:style

5.4、v-model(雙向綁定)

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"><button v-on:click="num++">點(diǎn)贊</button><button v-on:click="cancel">取消</button><h1>有{{num}}個(gè)贊</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("點(diǎn)擊了");}}})</script> </body> </html>

點(diǎn)擊小div會(huì)出現(xiàn)彈窗2次

加上click.stop以后

點(diǎn)擊小div只彈窗一次

##阻止默認(rèn)行為（@click.prevent）

點(diǎn)擊小div中的去百度會(huì)先彈窗，再跳轉(zhuǎn)去百度

@click.prevent
點(diǎn)擊小div中的去百度會(huì)只彈窗，不跳轉(zhuǎn)去百度。

@click.prevent=“hello”
點(diǎn)擊小div中的去百度彈兩次彈窗，不跳轉(zhuǎn)去百度。

@click.prevent.stop=“hello”
點(diǎn)擊小div中的去百度彈一次彈窗，不跳轉(zhuǎn)去百度。

##只被點(diǎn)擊一次（v-on:click.once）
v-on:click.once

只會(huì)被點(diǎn)擊一次

5.6、按鍵修飾符

v-on:keyup.up ：跟鍵盤上鍵綁定事件
@keyup.down：跟鍵盤下鍵綁定事件

@click.ctrl=“num=10” ：綁定組合按鍵：ctrl+鼠標(biāo)左鍵單擊時(shí)觸發(fā)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>

遍歷：

遍歷下標(biāo)

遍歷span

對(duì)一般數(shù)組的遍歷：

<!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">當(dāng)前下標(biāo)：{{index}} {{user.name}} ===> {{user.gender}} ===> {{user.age}}<br/>對(duì)象信息：<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

==》

v-if整個(gè)標(biāo)簽消失了
v-show是加了隱藏的樣式

5.9、v-else，v-else-if

5.10 v-if和v-for結(jié)合使用

過(guò)濾掉了張三男

6、計(jì)算屬性

<!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>西游記：價(jià)格：{{xyjPrice}} 數(shù)量：<input type="number" v-model="xyjNum"></li><li>水滸傳：價(jià)格：{{sfzPrice}} 數(shù)量：<input type="number" v-model="sfzNum"></li><li>總價(jià)：{{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},// 計(jì)算屬性computed:{totalPrice(){return this.xyjPrice * this.xyjNum + this.sfzPrice * this.sfzNum}}})</script> </body> </html>

7、監(jiān)聽器

<!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>西游記：價(jià)格：{{xyjPrice}} 數(shù)量：<input type="number" v-model="xyjNum"></li><li>水滸傳：價(jià)格：{{sfzPrice}} 數(shù)量：<input type="number" v-model="sfzNum"></li><li>總價(jià)：{{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:""},// 計(jì)算屬性computed:{totalPrice(){return this.xyjPrice * this.xyjNum + this.sfzPrice * this.sfzNum}},// 監(jiān)聽器watch:{xyjNum(newNum,oldNum){// alert("newNum:"+newNum+"===>oldNum"+oldNum);if (newNum >= 3){this.msg= "超出庫(kù)存";this.xyjNum = 3;}else{this.msg = ""}}}})</script> </body> </html>

8、過(guò)濾器

8.1、局部過(guò)濾器

<!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、全局過(guò)濾器

<!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++">我被點(diǎn)擊了{(lán){count}}次</button><counter></counter></div><script src="./node_modules/vue/dist/vue.js"></script><script>// 全局申明組件Vue.component("counter",{template: `<button v-on:click="count++">我被點(diǎn)擊了{(lán){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++">我被點(diǎn)擊了{(lán){count}}次~~~~</button>`,data(){return{count: 1}}}new Vue({el : '#app',data:{count: 1},components:{'button-counter':buttonCounter}})<div id = 'app'><button @click="count++">我被點(diǎn)擊了{(lán){count}}次</button><counter></counter><button-counter></button-counter></div>

10、生命周期和鉤子函數(shù)

每個(gè) Vue 實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過(guò)一系列的初始化過(guò)程：創(chuàng)建實(shí)例，裝載模板，渲染模
板等等。Vue 為生命周期中的每個(gè)狀態(tài)都設(shè)置了鉤子函數(shù)（監(jiān)聽函數(shù)）。每當(dāng) Vue 實(shí)例處于
不同的生命周期時(shí)，對(duì)應(yīng)的函數(shù)就會(huì)被觸發(fā)調(diào)用。
生命周期：你不需要立馬弄明白所有的東西。

##鉤子函數(shù)
beforeCreated：我們?cè)谟?Vue 時(shí)都要進(jìn)行實(shí)例化，因此，該函數(shù)就是在 Vue 實(shí)例化時(shí)調(diào)
用，也可以將他理解為初始化函數(shù)比較方便一點(diǎn)，在 Vue1.0 時(shí)，這個(gè)函數(shù)的名字就是
init。

created：在創(chuàng)建實(shí)例之后進(jìn)行調(diào)用。

beforeMount：頁(yè)面加載完成，沒有渲染。如：此時(shí)頁(yè)面還是{{name}}

mounted：我們可以將他理解為原生 js 中的 window.οnlοad=function({.,.}),或許大家也在
用 jquery，所以也可以理解為 jquery 中的$(document).ready(function(){….})，他的功能就
是：在 dom 文檔渲染完畢之后將要執(zhí)行的函數(shù)，該函數(shù)在 Vue1.0 版本中名字為
compiled。此時(shí)頁(yè)面中的{{name}}已被渲染成張三

beforeDestroy：該函數(shù)將在銷毀實(shí)例前進(jìn)行調(diào)用。

destroyed：改函數(shù)將在銷毀實(shí)例時(shí)進(jìn)行調(diào)用。

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}}個(gè)人點(diǎn)贊。</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("數(shù)據(jù)模型未加載：" + this.name, this.num);console.log("方法未加載：" + this.show());console.log("html 模板未加載：" + document.getElementById("num"));},created: function () {console.log("=========created=============");console.log("數(shù)據(jù)模型已加載：" + 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("數(shù)據(jù)模型已更新：" + this.num);console.log("html 模板未更新：" + document.getElementById("num").innerText);},updated() {console.log("=========updated=============");console.log("數(shù)據(jù)模型已更新：" + this.num);console.log("html 模板已更新：" + document.getElementById("num").innerText);}});</script></body></html>

#第一階段：beforeCreate

#第二階段：created

#第三階段：beforeMount

#第四階段：mounted

點(diǎn)擊頁(yè)面元素更新時(shí)：
#第一階段：beforeUpdate

#第二階段：updated

11、vue腳手架

#vue模塊化開發(fā)
1、全局安裝 webpack
npm install webpack -g

2、安裝vue腳手架
npm install -g @vue/cli-init

3、初始化vue
創(chuàng)建一個(gè)vue-demo文件夾

執(zhí)行vue init webpack vue-demo
#如果執(zhí)行vue報(bào)錯(cuò)時(shí)

再執(zhí)行以下命令即可
npm install -g vue
npm uninstall vue-cli -g
npm install -g @vue/cli

確定

確定

確定

選擇第一個(gè)

是否做頁(yè)面跳轉(zhuǎn)：yes

是否eslint語(yǔ)法規(guī)范檢查：no

是否單元測(cè)試：no

是否使用這個(gè)e2e單元測(cè)試：no

選擇第一個(gè)

這樣模塊化環(huán)境就初始好了

啟動(dòng)項(xiàng)目
cd vue-demo
npm run dev

index.js
路由：當(dāng)我路徑為/時(shí)使用HelloWorld組件

##要求：自己編寫組件然后跳轉(zhuǎn)/hello路徑如何實(shí)現(xiàn)？

1、編寫組件

2、組件三要素
template、script、style
模板，腳本、風(fēng)格

Hello.vue

<template><div><h1>你好，{{name}}</h1></div> </template><script> export default {data () {return {name: '張三'}} } </script> <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}] })

##通過(guò)超鏈接跳轉(zhuǎn)兩個(gè)頁(yè)面

App.vue

<template><div id="app"><img src="./assets/logo.png"><router-link to="/">去首頁(yè)</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快速開發(fā)

1、安裝elementUI
npm i element-ui

如果vue版本過(guò)高無(wú)法安裝elementui，甚至報(bào)錯(cuò)可以嘗試
npm i element-ui -S --legacy-peer-deps

2、使用elementUI
main.js

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)Vue.config.productionTip = false/* eslint-disable no-new */ new Vue({el: '#app',router,components: { App },template: '<App/>' })

element官網(wǎng)

3、elementUI單選框

4、官方文檔Container 布局容器
App.vue

<template><el-container style="height: 500px; border: 1px solid #eee"><el-aside width="200px" style="background-color: rgb(238, 241, 246)"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>導(dǎo)航一</template><el-menu-item-group><template slot="title">分組一</template><el-menu-item index="1-1">選項(xiàng)1</el-menu-item><el-menu-item index="1-2">選項(xiàng)2</el-menu-item></el-menu-item-group><el-menu-item-group title="分組2"><el-menu-item index="1-3">選項(xiàng)3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">選項(xiàng)4</template><el-menu-item index="1-4-1">選項(xiàng)4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i>導(dǎo)航二</template><el-menu-item-group><template slot="title">分組一</template><el-menu-item index="2-1">選項(xiàng)1</el-menu-item><el-menu-item index="2-2">選項(xiàng)2</el-menu-item></el-menu-item-group><el-menu-item-group title="分組2"><el-menu-item index="2-3">選項(xiàng)3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">選項(xiàng)4</template><el-menu-item index="2-4-1">選項(xiàng)4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i>導(dǎo)航三</template><el-menu-item-group><template slot="title">分組一</template><el-menu-item index="3-1">選項(xiàng)1</el-menu-item><el-menu-item index="3-2">選項(xiàng)2</el-menu-item></el-menu-item-group><el-menu-item-group title="分組2"><el-menu-item index="3-3">選項(xiàng)3</el-menu-item></el-menu-item-group><el-submenu index="3-4"><template slot="title">選項(xiàng)4</template><el-menu-item index="3-4-1">選項(xiàng)4-1</el-menu-item></el-submenu></el-submenu></el-menu></el-aside><el-container><el-header style="text-align: right; font-size: 12px"><el-dropdown><i class="el-icon-setting" style="margin-right: 15px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>查看</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>刪除</el-dropdown-item></el-dropdown-menu></el-dropdown><span>王小虎</span></el-header><el-main><el-table :data="tableData"><el-table-column prop="date" label="日期" width="140"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></el-main></el-container> </el-container> </template><script> export default {data() {const item = {date: '2016-05-02',name: '王小虎',address: '上海市普陀區(qū)金沙江路 1518 弄'};return {tableData: Array(20).fill(item)}}}; </script><style>.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {color: #333;} </style>

##需求：對(duì)分組一的布局進(jìn)行調(diào)整，根據(jù)頁(yè)面url訪問路徑不同，main區(qū)域顯示：點(diǎn)擊用戶列表顯示相關(guān)內(nèi)容
1、app.vue

2、將el-table抽取

<router-view></router-view>

3、新建組件

##使用代碼片段生成vue文件
代碼片段：

{"生成 vue 模板": {"prefix": "vue","body": ["<template>","<div></div>","</template>","","<script>","//這里可以導(dǎo)入其他文件（比如：組件，工具 js，第三方插件 js，json文件，圖片文件等等）","//例如：import 《組件名稱》 from '《組件路徑》';","","export default {","//import 引入的組件需要注入到對(duì)象中才能使用","components: {},","props: {},","data() {","//這里存放數(shù)據(jù)","return {","","};","},","//計(jì)算屬性類似于 data 概念","computed: {},","//監(jiān)控 data 中的數(shù)據(jù)變化","watch: {},","//方法集合","methods: {","","},","//生命周期 - 創(chuàng)建完成（可以訪問當(dāng)前 this 實(shí)例）","created() {","","},","//生命周期 - 掛載完成（可以訪問 DOM 元素）","mounted() {","","},","beforeCreate() {}, //生命周期 - 創(chuàng)建之前","beforeMount() {}, //生命周期 - 掛載之前","beforeUpdate() {}, //生命周期 - 更新之前","updated() {}, //生命周期 - 更新之后","beforeDestroy() {}, //生命周期 - 銷毀之前","destroyed() {}, //生命周期 - 銷毀完成","activated() {}, //如果頁(yè)面有 keep-alive 緩存功能，這個(gè)函數(shù)會(huì)觸發(fā)","}","</script>","<style scoped>","</style>"],"description": "生成 vue 模板"} }

#文件->首選項(xiàng)->配置用戶代碼片段->新建全局代碼片段

#新建全局代碼片段vue，回車

#將代碼片段粘貼過(guò)來(lái)

#直接在vue文件中輸入vue可以立馬生成模板

MyTable.vue

<template> <div></div> </template><script> //這里可以導(dǎo)入其他文件（比如：組件，工具 js，第三方插件 js，json文件，圖片文件等等） //例如：import 《組件名稱》 from '《組件路徑》';export default { //import 引入的組件需要注入到對(duì)象中才能使用 components: {}, props: {}, data() { //這里存放數(shù)據(jù) return {}; }, //計(jì)算屬性類似于 data 概念 computed: {}, //監(jiān)控 data 中的數(shù)據(jù)變化 watch: {}, //方法集合 methods: {}, //生命周期 - 創(chuàng)建完成（可以訪問當(dāng)前 this 實(shí)例） created() {}, //生命周期 - 掛載完成（可以訪問 DOM 元素） mounted() {}, beforeCreate() {}, //生命周期 - 創(chuàng)建之前 beforeMount() {}, //生命周期 - 掛載之前 beforeUpdate() {}, //生命周期 - 更新之前 updated() {}, //生命周期 - 更新之后 beforeDestroy() {}, //生命周期 - 銷毀之前 destroyed() {}, //生命周期 - 銷毀完成 activated() {}, //如果頁(yè)面有 keep-alive 緩存功能，這個(gè)函數(shù)會(huì)觸發(fā) } </script> <style lang='scss' scoped> //@import url(); 引入公共 css 類</style>

4、將vue.app里的用戶信息粘貼到myTable.vue里
MyTable.vue

<template><div><el-table :data="tableData"><el-table-column prop="date" label="日期" width="140"> </el-table-column><el-table-column prop="name" label="姓名" width="120"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table></div> </template><script> //這里可以導(dǎo)入其他文件（比如：組件，工具 js，第三方插件 js，json文件，圖片文件等等） //例如：import 《組件名稱》 from '《組件路徑》';export default {//import 引入的組件需要注入到對(duì)象中才能使用components: {},props: {},data() {const item = {date: "2016-05-02",name: "王小虎",address: "上海市普陀區(qū)金沙江路 1518 弄",};return {tableData: Array(20).fill(item),};},//計(jì)算屬性類似于 data 概念computed: {},//監(jiān)控 data 中的數(shù)據(jù)變化watch: {},//方法集合methods: {},//生命周期 - 創(chuàng)建完成（可以訪問當(dāng)前 this 實(shí)例）created() {},//生命周期 - 掛載完成（可以訪問 DOM 元素）mounted() {},beforeCreate() {}, //生命周期 - 創(chuàng)建之前beforeMount() {}, //生命周期 - 掛載之前beforeUpdate() {}, //生命周期 - 更新之前updated() {}, //生命周期 - 更新之后beforeDestroy() {}, //生命周期 - 銷毀之前destroyed() {}, //生命周期 - 銷毀完成activated() {}, //如果頁(yè)面有 keep-alive 緩存功能，這個(gè)函數(shù)會(huì)觸發(fā) }; </script> <style lang='scss' scoped>.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;}.el-aside {color: #333;} </style>

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、對(duì)App.vue進(jìn)行調(diào)整
##1、el-menu router屬性調(diào)整為true

##2、修改跳轉(zhuǎn)路徑

這里點(diǎn)擊hello就會(huì)跳hello

點(diǎn)擊用戶列表會(huì)跳用戶列表

總結(jié)

以上是生活随笔為你收集整理的电商项目4：全栈之前端的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

项目

上一篇： CAD二次开发选择集使用
下一篇： codeforces 841B Gods