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

一,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>
相關文章
相關標籤/搜索