ES6的常用方法
cont 声明常量(不能被修改)
const a = 12; a = 13; console.log(a); #12
模版字符串(字符串拼接)
var name = ‘周军豪‘,age=21;
var str1 = `他叫${name},年龄${age}岁`;
console.log(str1)
箭头函数
es5写法：
function add(x,y) {
x+y
}
add(1,2)
es6:
#var 函数名 = ()=>{}
var add2 = (a,b)=>{
a+b
}
alert(add2(2,3))
字面量方式创建对象
var person = {
name:‘小明‘,
age:18,
fav:function() {
// alert("抽烟喝酒烫头")
// es5的函数中的this指向了当前对象
alert(this.name)
}
};
person.fav();
#es6
var person2 = {
name:‘小明2‘,
age:18,
fav:()=>{
// es6注意事项：箭头函数会改变this的指向 父级
console.log(this);
}
}
person2.fav(); //Window {postMessage: ?, blur: ?, focus: ?, close: ?, frames: Window, …}
对象的单体模式
使用对象的单体模式解决了this的指向问题
var person2 = {
name:‘小明2‘,
age:18,
fav(){
console.log(this)
}
}
person2.fav() #{name: "zhou", age: 12, fav: ?}
ES6的面向对象
es5的构造函数，创建对象
function Dog(name,age) {
this.name=name;
this.age=age;
}
//set方法
Dog.prototype.showName = function () {
alert(this.name)
};
//示例对象，get方法
var d = new Dog("alex",12);
d.showName()
es6使用class 类方法创建
class Cat{
// constructor 构造器 class方式创建 单体模式之间不要有逗号
constructor(name,age){
this.name = name;
this.age = age;
}
fun(){
alert(this.age)
}
}
var d =new Cat("alex",13);
d.fun()
VUE的使用
vue的设计模式是MVVM
点击更换图片以及下一张示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
.div2{
width: 100px;
height: 100px;
background: green;
}
.div3{
background: yellow;
}
</style>
</head>
<body>
<div id="app">
<span>{{msg}}</span>
<span v-if="show">显示</span>
<span v-if="noshow">消失</span>
<div v-show="noshow">隐藏</div>
<button @click="showHandler">按钮1</button> <!--绑定事件-->
<div class="div2" :class="{div3:isyellow}"></div> <!--绑定属性-->
<button @click="change_yellow">变黄</button>
<a href="" v-bind:href="url">百度</a>
<hr>
<img :src="imgSrc" >
<ul>
<li v-for="(item,index) in imgArr" @click="currentHandler(item)">xxx</li> <!--for循环-->
</ul>
<button @click="next_img">下一张</button>
</div>
<script src="S7-vueDay1/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"zhou",
age:12,
show:true,
noshow:false,
isyellow:false,
url:"https:www.baidu.com",
imgSrc:"./S7-vueDay1/images/0.png",
current_index:0,
imgArr:[
‘./S7-vueDay1/images/0.png‘,
‘./S7-vueDay1/images/1.png‘,
‘./S7-vueDay1/images/2.png‘,
‘./S7-vueDay1/images/3.png‘
]
},
methods:{
showHandler(){
this.noshow=!this.noshow
},
change_yellow(){
this.isyellow = !this.isyellow
},
currentHandler(item){
this.imgSrc = item
},
next_img(){
// console.log(this.imgArr.length);
this.current_index = this.current_index+1;
if(this.current_index==this.imgArr.length){
this.current_index = 0
}
this.imgSrc=this.imgArr[this.current_index]
}
}
})
</script>
</body>
</html>