day82 ES6常用语法&前端框架Vue常用指令-白红宇

day82 ES6常用语法&前端框架Vue常用指令

阅读量：5961 次

发布时间：2019-06-19

本文共 4449 字，大约阅读时间需要 14 分钟。

一，ES6

　　1.什么是ES6　　

　　　　ECMAScript 6 简称ES6，在2015年6月正式发布，ECMAScript语言的国际标准

　　2.变量的声明　　　

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.模板字符串

　　　　ES6引入了反引号``，变量${}

　　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取决于当前上下文环境，上下文就是指函数的作用域

　　5.数据的解构

　　　　解构object的时候{key,key} {key：a,key:b}

　　　　解构数值的时候[x,y..]

　　6.类的定义

　　　　定义类 class

　　　　构造方法 constructor

　　　　继承 extends

　　　　子类没有this 需要用super()方法来找到父类的this

　　7.ES6的之间的import和export

// main.js// 导出多个声明export var name = "gaoxin"export var age = "18"export function aa() {    return 1}// 批量导出export {name, age, aa}// test.jsimport {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.jsvar 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的使用

    
         Vue初识    
     
      {
    {name}}

　　　　1.v-text 和v-html (相当于innerText和innerHtml)

　　　　2.v-for


         
              
               
               
       {
   {course}}-{
   {index}}
    
      
    
              
       {
   {stu.name}}{
   {stu.age}}

　　　　3.v-bind：绑定属性简写:

　　　　4.v-on：绑定事件简写@

　　　　5.v-if，v-else-if，v-else：主用利用appendChild实现控制视图输出　　　

　　　　6.v-show：利用display实现控制视图是否显示

　　　　7.v-model：数据的双向绑定，可以用来捕获客户输入的内容，并同时输出到页面

　　　　　　指令修饰符：.lazy、.number、.trim


         
          
          {
    {username}}    
          
      {
   {username}}
  
          
          
          {
    {typeof phone}}    
          {
    {article}}    
          {
    {choices}}

　　　　8.自定义指令

-- 自定义的指令    -- Vue.directive("指令名称", function(el,binding){        -- el 绑定指令的标签元素        -- binding 指令的所有信息组成的对象            -- value 指令绑定数据的值            -- modifires 指令修饰符    })