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>