2. 程式人生 > 實用技巧 >基礎-04前端ES6基礎

基礎-04前端ES6基礎

阿新 • • 發佈：2020-11-06

這部分沒怎麼看，內容來源於CSDN

https://blog.csdn.net/hancoder/article/details/107612619

一、Vue

安裝vue

# 最新穩定版
$ npm install vue

1.1 vue宣告式渲染

let vm = new Vue({
    el: "#app",//繫結元素
    data: {  //封裝資料
        name: "張三",
        num: 1
    },
    methods:{  //封裝方法
        cancle(){
            this.num -- ;
        },
        hello(){
            return "1"
        }
    }
});

1.2 v-model雙向繫結

雙向繫結使用v-model

 <input type="text" v-model="num">
<h1> {{name}} ,非常帥，有{{num}}個人為他點贊{{hello()}}</h1>

1.3 事件處理

v-xx：指令
1、建立vue例項，關聯頁面的模板，將自己的資料（data）渲染到關聯的模板，響應式的
2、指令來簡化對dom的一些操作。
3、宣告方法來做更復雜的操作。methods裡面可以封裝方法。

v-on是按鈕的單擊事件：

 <button v-on:click="num++">點贊</button>

在VUE中el,data和vue的作用:

  • el：用來繫結資料；
  • data:用來封裝資料；
  • methods：用來封裝方法，並且能夠封裝多個方法，如何上面封裝了cancell和hello方法。

安裝“Vue 2 Snippets”，用來做程式碼提示

為了方便的在瀏覽器上除錯VUE程式，需要安裝“vue-devtools”，編譯後安裝到chrome中即可。

詳細的使用方法見：Vue除錯神器vue-devtools安裝

“v-html”不會對於HTML標籤進行轉義，而是直接在瀏覽器上顯示data所設定的內容;而“ v-text”會對html標籤進行轉義

<div id="app">
    {{msg}}  {{1+1}}  {{hello()}}<br/>
        <span v-html="msg"></span>
<br/>
    <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>",
        link:"http://www.baidu.com"
    },
    methods:{
        hello(){
            return "World"
        }
    }
})
</script>

執行結果：

{{msg}} :稱為差值表示式，它必須要寫在Html表示式，可以完成數學運算和方法呼叫

1.4 v-bind :單向繫結

給html標籤的屬性繫結

<!-- 給html標籤的屬性繫結 -->
    <div id="app"> 
        <a v-bind:href="link">gogogo</a>
<!-- class,style  {class名：加上？}-->
    <span v-bind:class="{active:isActive,'text-danger':hasError}"
    :style="{color: color1,fontSize: size}">你好</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,
            color1:'red',
            size:'36px'
        }
    })
</script>

上面所完成的任務就是給a標籤繫結一個超連結。並且當“isActive”和“hasError”都是true的時候，將屬性動態的繫結到，則繫結該“active”和 "text-danger"class。這樣可以動態的調整屬性的存在。

而且如果想要實現修改vm的"color1"和“size”， span元素的style也能夠隨之變化，則可以寫作v-bind:style，也可以省略v-bind。

1.5 v-model雙向繫結

<!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">
        精通的語言：
            <input type="checkbox" v-model="language" value="Java"> java<br/>
            <input type="checkbox" v-model="language" value="PHP"> PHP<br/>
            <input type="checkbox" v-model="language" value="Python"> Python<br/>
        選中了 {{language.join(",")}}
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                language: []
            }
        })
    </script>
</body>
</html>

上面完成的功能就是通過“v-model”為輸入框繫結多個值，能夠實現選中的值，在data的language也在不斷的發生著變化，

如果在控制檯上指定vm.language=[“Java”,“PHP”]，則data值也會跟著變化。

通過“v-model”實現了頁面發生了變化，則資料也發生變化，資料發生變化，則頁面也發生變化，這樣就實現了雙向繫結。

陣列的連線操作： 選中了 {{language.join(",")}}

1.6 v-on為按鈕繫結事件

<!--事件中直接寫js片段-->
    <button v-on:click="num++">點贊</button>
<!--事件指定一個回撥函式，必須是Vue例項中定義的函式-->
    <button @click="cancle">取消</button>

上面是為兩個按鈕綁定了單擊事件，其中一個對於num進行自增，另外一個自減。

v-on:click也可以寫作@click

事件的冒泡：

<!-- 事件修飾符 -->
<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="http://www.baidu.com" @click.prevent="hello">去百度</a>
    </div>
</div>

上面的這兩個巢狀div中，如果點選了內層的div，則外層的div也會被觸發；這種問題可以事件修飾符來完成：

<!-- 事件修飾符 -->
<div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
    大div
    <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
        小div <br />
        <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
        <!--這裡禁止了超連結的點選跳轉操作，並且只會觸發當前物件的操作-->
    </div>
</div>

關於事件修飾符：

按鍵修飾符：

1.7 v-for遍歷迴圈

<!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">
        <ul>
            <li v-for="(user,index) in users" :key="user.name" v-if="user.gender == '女'">
                <!-- 1、顯示user資訊：v-for="item in items" -->
               當前索引：{{index}} ==> {{user.name}}  ==>   {{user.gender}} ==>{{user.age}} <br>
                <!-- 2、獲取陣列下標：v-for="(item,index) in items" -->
                <!-- 3、遍歷物件：
                        v-for="value in object"
                        v-for="(value,key) in object"
                        v-for="(value,key,index) in object" 
                -->
                物件資訊：
                <span v-for="(v,k,i) in user">{{k}}=={{v}}=={{i}}；</span>
                <!-- 4、遍歷的時候都加上:key來區分不同資料，提高vue渲染效率 -->
            </li>
        </ul>
        <ul>
            <li v-for="(num,index) in nums" :key="index"></li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>         
        let app = 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>

4、遍歷的時候都加上:key來區分不同資料，提高vue渲染效率

1.8 過濾器

<!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>
    <!-- 過濾器常用來處理文字格式化的操作。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表示式 -->
    <div id="app">
        <ul>
            <li v-for="user in userList">
                {{user.id}} ==> {{user.name}} ==> {{user.gender == 1?"男":"女"}} ==>
                {{user.gender | genderFilter}} ==> {{user.gender | gFilter}}
                <!-- 這裡的"|"表示的管道，將user.gender的值交給genderFilter -->
            </li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        // 全域性過濾器 
        Vue.filter("gFilter", function (val) {
            if (val == 1) {
                return "男~~~";
            } else {
                return "女~~~";
            }
        })
        let vm = new Vue({
            el: "#app",
            data: {
                userList: [
                    { id: 1, name: 'jacky', gender: 1 },
                    { id: 2, name: 'peter', gender: 0 }
                ]
            },
            filters: {
                 filters 定義區域性過濾器，只可以在當前vue例項中使用
                genderFilter(val) {
                    if (val == 1) {
                        return "男";
                    } else {
                        return "女";
                    }
                }
            }
        })
    </script>
</body>
</html>

1.9 元件化

<!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">
        <button v-on:click="count++">我被點選了 {{count}} 次</button>
        <counter></counter>
        <counter></counter>
        <counter></counter>
        <counter></counter>
        <counter></counter>
        <!-- 使用所定義的元件button-counter -->
        <button-counter></button-counter>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        //1、全域性宣告註冊一個元件
        Vue.component("counter", {
            template: `<button v-on:click="count++">我被點選了 {{count}} 次</button>`,
            data() {
                return {
                    count: 1
                }
            }
        });
        //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
            }
        })
    </script>
</body>
</html>

1.10 生命週期鉤子函式

<!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">
        <span id="num">{{num}}</span>
        <button @click="num++">贊！</button>
        <h2>{{name}}，有{{num}}個人點贊</h2>
    </div>

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

二、 element ui

官網： https://element.eleme.cn/#/zh-CN/component/installation

安裝

npm i element-ui -S

在 main.js 中寫入以下內容：

import ElementUI  from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

相關推薦

基礎-04前端ES6基礎

這部分沒怎麼看，內容來源於CSDN https://blog.csdn.net/hancoder/article/details/107612619 一、Vue

04-前端基礎平臺搭建宣導材料

1.為什麼要封裝前端頁面及元件？ 元件封裝平臺 VS 未封裝業務頁面 == 用一個印表機完成各種花式的列印 VS 每種花樣一臺印表機

前端基礎-04-BOM和DOM

前戲 到目前為止，我們已經學過了JavaScript的一些簡單的語法。但是這些簡單的語法，並沒有和瀏覽器有任何互動。

Node.js基礎語法和ES6新屬性（Node.js自學第一天）

Node.js從4.0開始，支援ES6的大多數新特性，例如：classes、typed arrays、generators、Promises、Symbols、collections、arrowfunctions、block scoping、template strings等。

12前端javascript基礎

重複性焦慮 javascript 基礎 1. 資料型別 1.1 基本資料型別 資料型別：undefined，null，boolean，number，string

java基礎04

break、continue 1.break在任何迴圈語句的主題部分，均可用break控制迴圈的流程，break用於強制退出迴圈，不執行迴圈中剩餘的語句。

前端-HTML基礎

1.<p></p>段落標籤 <p>別在最該拼搏的年紀選擇穩定，世界上最大的不變是改變，只有每天進步，才能擁抱生命的無限可能！</p>

前端-js基礎

HTML三把利劍之一，瀏覽器具有解析js的能力 一、js基礎 在HTML中可以將JavaScript/JS的程式碼寫在head中，被script標籤所包裹，當瀏覽器解釋HTML時，遇到style標籤時，按照CSS規則解釋，遇到Script標籤時，按照JavaS

0基礎學習前端開發的一些建議

以下純屬個人觀點和建議，肯定是有侷限性的，但是也希望能給你帶來一些幫助。

前端面試基礎題：Ajax原理

Ajax 的原理簡單來說是在⽤戶和伺服器之間加了—箇中間層( AJAX 引擎)，通過XmlHttpRequest 物件來向伺服器發非同步請求，從伺服器獲得資料，然後⽤ javascrip t 來操作 DOM ⽽更新⻚⾯。使⽤戶操作與伺服器響

前端-Vue基礎2

1.過濾器 前臺通過後臺傳值，要對後臺傳過來的變數進行特殊處理，比如根據id轉成中文等；

前端-Vue基礎3（父子元件互動）

1、子元件往父元件傳值 點選子元件的值，子元件自增，父元件的值也跟著自增

04 CMD規範基礎使用詳解

CMD模組規範 1.1 CMD規範說明 專門用於瀏覽器端，並且模組的載入是非同步的，而且只有模組使用時才會載入執行；

前端開發基礎javaScript的六大作用

javaScript基礎詳解 首先講javaScript的擺放位置：<script>與 </script>可以放在head和body之間，也可以body中或者head中

Java基礎(04)--變數型別

Java基礎(04)--變數型別 在Java語言中，所有的變數在使用前必須宣告。宣告變數的基本格式如下：

ES6基礎入門

ES6是JavaScript的版本標準，目前瀏覽器的 JavaScript 是 ES5 版本，大多數高版本的瀏覽器也支援 ES6，不過只實現了 ES6 的部分特性和功能。ES6的學習是在JS基礎學習之後進行的。

Linux基礎-04使用者管理

尚矽谷韓順平（推薦）：https://www.bilibili.com/video/BV1dW411M7xL?from=search&seid=8072051292168114337

ES6基礎之——new Set

Set 物件儲存的值總是唯一的 Set 物件方法 方法描述 add 新增某個值，返回Set物件本身。

前端-CSS基礎

1.CSS css style: 裡面的寫的就叫做css 每一個樣式的間隔用； 全部相同的時候引用class

es6基礎知識整理總結

1. let/const 特性 在 ES6 標準釋出之前，JS 一般都是通過關鍵字var宣告變數，與此同時，並不存在明顯的程式碼塊宣告，想要形成程式碼塊，一般都是採用閉包的方式，舉個十分常見的例子：