day82 ES6常用语法&前端框架Vue常用指令
一，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引入了反引号``，变量${}
<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>
