day82 ES6經常使用語法&前端框架Vue經常使用指令

時間 2019-11-21

標籤 day82 day es6 經常使用語法前端框架 vue 指令欄目 JavaScript 简体版

原文原文鏈接

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