穀粒學院（四）前端開發之ES6 | Vue

追夢少年007發表於2020-10-01

前端Vue

一、VSCode的安裝及建立

1、下載地址

https://code.visualstudio.com/

2、安裝

一路下一步。

3、外掛安裝

為方便後續開發，建議安裝如下外掛（紅色矩形框標記的外掛）
在這裡插入圖片描述
4、建立專案

vscode本身沒有新建專案的選項，所以要先建立一個空的資料夾，如vscode2020。
然後開啟vscode，再在vscode裡面選擇檔案 -> 開啟資料夾，這樣才可以建立專案。

在這裡插入圖片描述

4、儲存工作區

開啟資料夾後，選擇“ 檔案 -> 將工作區另存為…”，為工作區檔案起一個名字，儲存在剛才的資料夾下即可

在這裡插入圖片描述

5、新建資料夾和網頁

在這裡插入圖片描述

6、預覽網頁

以檔案路徑方式開啟網頁預覽
需要安裝“open in browser”外掛：
檔案右鍵 -> Open In Default Browser

以伺服器方式開啟網頁預覽
需要安裝“Live Server”外掛：
檔案右鍵 -> Open with Live Server

7、設定字型大小

左邊欄Manage -> settings -> 搜尋 “font” -> Font size

二、ES6簡介

ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在 2015 年 6 月正式釋出了。它的目標，是使得 JavaScript 語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。

es6是一套標準，一套規範
JavaScript很好遵循了這套規範

三、ES6基本語法

ES標準中不包含 DOM 和 BOM的定義，只涵蓋基本資料型別、關鍵字、語句、運算子、內建物件、內建函式等通用語法。

1、let宣告變數

建立 let.html

<script>
	// var 宣告的變數沒有區域性作用域
	// let 宣告的變數  有區域性作用域
	{
		var a = 0
		let b = 1
	}
	console.log(a)  // 0
	console.log(b)  // ReferenceError: b is not defined
</script>

<script>
	// var 可以宣告多次
	// let 只能宣告一次
	var m = 1
	var m = 2
	let n = 3
	let n = 4
	console.log(m)  // 2
	console.log(n)  // Identifier 'n' has already been declared
</script>

2、const宣告常量（只讀變數）

建立 const.html

<script>
	// 1、宣告之後不允許改變    
	const PI = "3.1415926"
	PI = 3  // TypeError: Assignment to constant variable.
	
	// 2、一但宣告必須初始化，否則會報錯
	const MY_AGE  // SyntaxError: Missing initializer in const declaration
</script>

3、解構賦值

建立解構賦值.html

解構賦值是對賦值運算子的擴充套件。

他是一種針對陣列或者物件進行模式匹配，然後對其中的變數進行賦值。

在程式碼書寫上簡潔且易讀，語義更加清晰明瞭；也方便了複雜物件中資料欄位獲取。

<script>
	//1、陣列解構
	// 傳統
	let a = 1, b = 2, c = 3
	console.log(a, b, c)
	
	// ES6
	let [x, y, z] = [1, 2, 3]
	console.log(x, y, z)
</script>

//2、物件解構
<script>
	let user = {name: 'Helen', age: 18}
	// 傳統
	let name1 = user.name
	let age1 = user.age
	console.log(name1, age1)
	
	// ES6
	let { name, age } =  user//注意：結構的變數必須是user中的屬性
	console.log(name, age)
</script>

4、模板字串

建立模板字串.html

模板字串相當於加強版的字串，用反引號 `，除了作為普通字串，還可以用來定義多行字串，還可以在字串中加入變數和表示式。

<script>
	// 1、多行字串
	let str1=  `hello,
	es6 demo up!`
	console.log(str1)
	// Hey,
	// can you stop angry now?
</script>

<script>
	// 2、字串插入變數和表示式。變數名寫在 ${} 中，${} 中可以放入 JavaScript 表示式。
	let name = "Mike"
	let age = 27
	let info = `My Name is ${name},I am ${age+1} years old next year.`
	console.log(info)
	// My Name is Mike,I am 28 years old next year.
</script>

<script>
	// 3、字串中呼叫函式
	function f(){
	    return "have fun!"
	}
	let string2 = `Game start,${f()}`
	console.log(string2);  // Game start,have fun!
</script>

5、宣告物件簡寫

建立宣告物件簡寫.html

<script>
	const age = 12
	const name = "Amy"
	// 傳統
	const person1 = {age: age, name: name}
	console.log(person1)
	
	// ES6
	const person2 = {age, name}
	console.log(person2) //{age: 12, name: "Amy"}
</script>

6、定義方法簡寫

建立定義方法簡寫.html

<script>
	// 傳統
	const person1 = {
	    sayHi:function(){
	        console.log("Hi")
	    }
	}
	person1.sayHi();//"Hi"
	
	// ES6
	const person2 = {
	    sayHi(){
	        console.log("Hi")
	    }
	}
	person2.sayHi()  //"Hi"
</script>

7、物件擴充運算子

建立物件擴充運算子.html

擴充運算子（…）用於取出引數物件所有可遍歷屬性然後拷貝到當前物件。

<script>
	// 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"}
</script>

8、箭頭函式

建立箭頭函式.html

箭頭函式提供了一種更加簡潔的函式書寫方式。基本語法是：

引數 => 函式體

<script>
	// 傳統
	var f1 = function(a){
	    return a
	}
	console.log(f1(1))
	
	// ES6
	var f2 = a => a
	console.log(f2(1))
	
	// 當箭頭函式沒有引數或者有多個引數，要用 () 括起來。
	// 當箭頭函式函式體有多行語句，用 {} 包裹起來，表示程式碼塊，
	// 當只有一行語句，並且需要返回結果時，可以省略 {} , 結果會自動返回。
	var f3 = (a,b) => {
	    let result = a+b
	    return result
	}
	console.log(f3(6,2))  // 8
	
	// 前面程式碼相當於：
	var f4 = (a,b) => a+b
</script>

箭頭函式多用於匿名函式的定義

四、Vue介紹

1、Vue.js 是什麼

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。

Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

官方網站：https://cn.vuejs.org

2、初始Vue.js

建立 demo.html

<!-- id標識vue作用的範圍 -->
<div id="app">
    <!-- {{}} 插值表示式，繫結vue中的data資料 -->
    {{ message }}
</div>
<script src="vue.min.js"></script>
<script>
    // 建立一個vue物件
    new Vue({
        el: '#app',//繫結vue作用的範圍
        data: {//定義頁面中顯示的模型資料
            message: 'Hello Vue!'
        }
    })
</script>

在vs code中建立程式碼片段：

檔案 => 首選項 => 使用者程式碼片段 => 新建全域性程式碼片段/或資料夾程式碼片段：vue-html.code-snippets

注意：製作程式碼片段的時候，字串中如果包含檔案中複製過來的“Tab”鍵的空格，要換成“空格鍵”的空格

{
    "vue htm": {
        "scope": "html",
        "prefix": "vuehtml",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
            "",
            "<head>",
            "    <meta 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>",
            "</head>",
            "",
            "<body>",
            "    <div id=\"app\">",
            "",
            "    </div>",
            "    <script src=\"vue.min.js\"></script>",
            "    <script>",
            "        new Vue({",
            "            el: '#app',",
            "            data: {",
            "                $1",
            "            }",
            "        })",
            "    </script>",
            "</body>",
            "",
            "</html>",
        ],
        "description": "my vue template in html"
    }
}

五、Vue基本語法

1、基本資料渲染和指令

建立 01-基本資料渲染和指令.html

你看到的 v-bind 特性被稱為指令。指令帶有字首 v-
除了使用插值表示式{{}}進行資料渲染，也可以使用 v-bind指令，它的簡寫的形式就是一個冒號（:）

data: {
    content: '我是標題',
    message: '頁面載入於 ' + new Date().toLocaleString()
}
<!-- 如果要將模型資料繫結在html屬性中，則使用 v-bind 指令
     此時title中顯示的是模型資料
-->
<h1 v-bind:title="message">
    {{content}}
</h1>
<!-- v-bind 指令的簡寫形式： 冒號（:） -->
<h1 :title="message">
    {{content}}
</h1>

2、雙向資料繫結

建立 02-雙向資料繫結.html

雙向資料繫結和單向資料繫結：使用 v-model 進行雙向資料繫結

data: {
    searchMap:{
        keyWord: '尚矽谷'
    }
}
<!-- v-bind:value只能進行單向的資料渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以進行雙向的資料繫結  -->
<input type="text" v-model="searchMap.keyWord">
<p>您要查詢的是：{{searchMap.keyWord}}</p>

3、事件

建立 03-事件.html

需求：點選查詢按鈕，按照輸入框中輸入的內容查詢公司相關資訊

data: {
     searchMap:{
         keyWord: '尚矽谷'
     },
     //查詢結果
     result: {}
},
methods:{
    search(){
        console.log('search')
    }
}

html中增加 button 和 p

使用 v-on 進行數件處理，v-on:click 表示處理滑鼠點選事件，事件呼叫的方法定義在 vue 物件宣告的 methods 節點中

<!-- v-on 指令繫結事件，click指定繫結的事件型別，事件發生時呼叫vue中methods節點中定義的方法 -->
<button v-on:click="search()">查詢</button>
<p>您要查詢的是：{{searchMap.keyWord}}</p>
<p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>

完善search方法

search(){
    console.log('search');
    this.result = {
        "title":"尚矽谷",
        "site":"http://www.atguigu.com"
    }
}

簡寫

<!-- v-on 指令的簡寫形式 @ -->
<button @click="search()">查詢</button>

4、修飾符

建立 04-修飾符.html

修飾符是以半形句號（.）指明的特殊字尾，用於指出一個指令應該以特殊方式繫結。
例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件呼叫 event.preventDefault()：
即阻止事件原本的預設行為

data: {
    user: {}
}
<!-- 修飾符用於指出一個指令應該以特殊方式繫結。
     這裡的 .prevent 修飾符告訴 v-on 指令對於觸發的事件呼叫js的 event.preventDefault()：
     即阻止表單提交的預設行為 -->
<form action="save" v-on:submit.prevent="onSubmit">
    <label for="username">
        <input type="text" id="username" v-model="user.username">
        <button type="submit">儲存</button>
    </label>
</form>
methods: {
    onSubmit() {
        if (this.user.username) {
            console.log('提交表單')
        } else {
            alert('請輸入使用者名稱')
        }
    }
}

5、條件渲染

建立 05-條件渲染.html

v-if：條件指令

data: {
    ok: false
}

注意：單個核取方塊繫結到布林值

<input type="checkbox" v-model="ok">同意許可協議
<!-- v:if條件指令：還有v-else、v-else-if 切換開銷大 -->
<h1 v-if="ok">yes</h1>
<h1 v-else>no</h1>

6、列表渲染

建立 06-列表渲染.html

v-for：列表迴圈指令

例1：簡單的列表渲染

<!-- 1、簡單的列表渲染 -->
<ul>
    <li v-for="n in 10">{{ n }} </li>
</ul>
<ul>
    <!-- 如果想獲取索引，則使用index關鍵字，注意，圓括號中的index必須放在後面 -->
    <li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
</ul>

例2：遍歷資料列表

data: {
    userList: [
        { id: 1, username: 'helen', age: 18 },
        { id: 2, username: 'peter', age: 28 },
        { id: 3, username: 'andy', age: 38 }
    ]
}

<!-- 2、遍歷資料列表 -->
<table border="1">
    <!-- <tr v-for="item in userList"></tr> -->
    <tr v-for="(item, index) in userList">
        <td>{{index}}</td>
        <td>{{item.id}}</td>
        <td>{{item.username}}</td>
        <td>{{item.age}}</td>
    </tr>
</table>

六、元件

元件（Component）是 Vue.js 最強大的功能之一。

元件可以擴充套件 HTML 元素，封裝可重用的程式碼。

1、區域性元件

建立 01-1-區域性元件.html

定義元件

var app = new Vue({
    el: '#app',
    // 定義區域性元件，這裡可以定義多個區域性元件
    components: {
        //元件的名字
        'Navbar': {
            //元件的內容
            template: '<ul><li>首頁</li><li>學員管理</li></ul>'
        }
    }
})

使用元件

<div id="app">
    <Navbar></Navbar>
</div>

2、全域性元件

建立 01-2-全域性元件.html

定義全域性元件：components/Navbar.js

// 定義全域性元件
Vue.component('Navbar', {
    template: '<ul><li>首頁</li><li>學員管理</li><li>講師管理</li></ul>'
})

<div id="app">
    <Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<script src="components/Navbar.js"></script>
<script>
    var app = new Vue({
        el: '#app'
    })
</script>

七、例項生命週期

在這裡插入圖片描述
建立 03-vue例項的生命週期.html

data: {
},
created() {
    debugger
    //在頁面渲染之前執行
    console.log('created....')
},
mounted() {
    debugger
    //在頁面渲染之後執行
    console.log('mounted....')
}

八、路由

Vue.js 路由允許我們通過不同的 URL 訪問不同的內容。

通過 Vue.js 可以實現多檢視的單頁Web應用。

建立 04-路由.html

1、引入js

Vue.js 路由需要載入 vue-router 庫

<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>

2、編寫html

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 使用 router-link 元件來導航. -->
        <!-- 通過傳入 `to` 屬性指定連結. -->
        <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
        <router-link to="/">首頁</router-link>
        <router-link to="/student">會員管理</router-link>
        <router-link to="/teacher">講師管理</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的元件將渲染在這裡 -->
    <router-view></router-view>
</div>

3、編寫js

<script>
    // 1. 定義（路由）元件。
    // 可以從其他檔案 import 進來
    const Welcome = { template: '<div>歡迎</div>' }
    const Student = { template: '<div>student list</div>' }
    const Teacher = { template: '<div>teacher list</div>' }
    // 2. 定義路由
    // 每個路由應該對映一個元件。
    const routes = [
        { path: '/', redirect: '/welcome' }, //設定預設指向的路徑
        { path: '/welcome', component: Welcome },
        { path: '/student', component: Student },
        { path: '/teacher', component: Teacher }
    ]
    // 3. 建立 router 例項，然後傳 `routes` 配置
    const router = new VueRouter({
        routes // （縮寫）相當於 routes: routes
    })
    // 4. 建立和掛載根例項。
    // 從而讓整個應用都有路由功能
    const app = new Vue({
        el: '#app',
        router
    })
</script>

九、axios

axios是獨立的專案，不是vue裡面的一部分，使用axios經常和vue 一起使用，實現ajax操作。

建立 05-axios.html

1、頁面引入js檔案

<script src="vue.min.js"></script>
<script src="axios.min.js"></script>

注意：測試時需要開啟後端伺服器，並且後端開啟跨域訪問許可權

2、建立json檔案，模擬資料

建立 data.json 檔案

{
    "sucess":true,
    "code":20000,
    "message":"成功",
    "data":{
        "items":[
            {"name":"lucy","age":20},
            {"name":"mary","age":30},
            {"name":"jack","age":40}
        ]
    }
}

3、編寫js

data: { //在data定義變數和初始值
    //定義變數，值空陣列
     userList:[]
 },
 created() { //頁面渲染之前執行
     //呼叫定義的方法
     this.getUserList()
 },
 methods:{//編寫具體的方法
     //建立方法 查詢所有使用者資料
     getUserList() {
         //使用axios傳送ajax請求
         //axios.提交方式("請求介面路徑").then(箭頭函式).catch(箭頭函式)
         axios.get("data.json")
             .then(response =>{//請求成功執行then方法
                 //response就是請求之後返回資料
                 //console.log(response)
                 //通過response獲取具體資料，賦值給定義空陣列
                 this.userList = response.data.data.items
                 console.log(this.userList)
             }) 
             .catch(error =>{
             }) //請求失敗執行catch方法
     }
 }

4、顯示資料

<div id="app">
    <!--把userList陣列裡面資料顯示 使用v-for指令 -->
    <div v-for="user in userList">
        {{user.name}} -- {{user.age}}
    </div>
</div>

在這裡插入圖片描述

十、element-ui

element-ui 是餓了麼前端出品的基於 Vue.js的後臺元件庫，方便程式設計師進行頁面快速佈局和構建

官網： http://element-cn.eleme.io/#/zh-CN

如果有收穫！！！希望老鐵們來個三連，點贊、收藏、轉發。
創作不易，別忘點個贊，可以讓更多的人看到這篇文章，順便鼓勵我寫出更好的部落格

穀粒學院-2-mybatisplus
2021-07-25
MyBatis
【穀粒學院】017-前端框架開發過程介紹、新增講師模組
2020-12-23
前端框架
穀粒商城筆記
2020-12-06
筆記
穀粒商城高階篇筆記1
2020-12-18
筆記
穀粒joycon霍爾電磁搖桿釋出
2023-02-27
前端學習筆記之ES6~~~
2020-10-29
前端筆記
openresty前端開發入門四之Redis篇
2018-08-23
REST前端Redis
前端開發大殺器hey-cli，全域性支援vue react es6開發部署
2018-02-27
前端VueReact
微前端開發(Vue)
2021-10-29
前端Vue
Vue前端開發規範
2018-04-21
Vue前端
vue開發：前端專案模板
2021-08-31
Vue前端
開發Vue外掛四種方式
2019-06-11
Vue
博睿學院 | 本週四，博睿學院資料整合系列公開課正式開講
2023-03-28
Vue.js 學習筆記之四：Vue 元件基礎
2020-10-12
Vue.js筆記元件
Web前端開發之EasyUI
2015-02-03
Web前端UI
ES6 學習筆記四
2019-11-09
筆記
百度前端學院-基礎學院-第二課
2018-04-25
前端
web前端教程：Vue專案開發流程
2019-05-15
Web前端Vue
《Vue.js 3.x高效前端開發（視訊教學版）》
2022-03-09
Vue.js前端
ES6模組化改變前端的原生開發方式
2022-05-31
前端
什麼是前端開發？為什麼要學前端開發？
2020-06-04
前端
Vue開發之基礎路由
2019-05-19
Vue路由
Vue 元件化開發之插槽
2020-11-21
Vue元件化
前端開發之ES6模組化和node.js，2020.12.09
2020-12-12
前端Node.js
前端學習（四）--jQuery
2018-11-29
前端jQuery
vue.js 前端開發常見問題
2019-01-27
Vue.js前端
一、搭建前端開發環境（Vue+element)
2020-10-02
前端開發環境Vue
建立前端資料模型，vue開發必備
2018-07-09
前端模型Vue
【Android研究院之應用開發】
2015-06-12
Android
最新前端開發職業路線+前端框架共四階段
2018-11-30
前端框架
每日一題（開開森森學前端之REM）
2019-05-02
每日一題前端REM
重學ES6基礎語法（四）
2019-10-27
Web 前端開發之小白入門
2018-11-23
Web前端
Vue 學習記錄四
2019-12-02
Vue
vue-cli + es6 多頁面專案開發及部署
2018-03-21
Vue
前端學習任務四
2016-07-05
前端
前端開發規範手冊（命名、HTML、CSS、JS、ES6、React）
2019-02-19
前端HTMLCSSJSReact
ES6常用總結 (前端開發js技術進階提升)
2020-11-23
前端JS

穀粒學院（四）前端開發之ES6 | Vue

一、VSCode的安裝及建立

二、ES6簡介

三、ES6基本語法

1、let宣告變數

2、const宣告常量（只讀變數）

3、解構賦值

4、模板字串

5、宣告物件簡寫

6、定義方法簡寫

7、物件擴充運算子

8、箭頭函式

四、Vue介紹

1、Vue.js 是什麼

2、初始Vue.js

五、Vue基本語法

1、基本資料渲染和指令

2、雙向資料繫結

3、事件

4、修飾符

5、條件渲染

6、列表渲染

六、元件

1、區域性元件

2、全域性元件

七、例項生命週期

八、路由

1、引入js

2、編寫html

3、編寫js

九、axios

1、頁面引入js檔案

2、建立json檔案，模擬資料

3、編寫js

4、顯示資料

十、element-ui

相關文章