vue学习（1）
前置的准备学习：
ES6简单语法：
1.let和const
2.模板字符串
3.箭头函数
4.对象的单体模式
5.es6的面向对象
6.模块化
1.let和const
<script type="text/javascript">
{
var a=12;
}
console.log(a);
</script>浏览器输出12，说明var声明变量的作用域是全局的。
<script type="text/javascript">
{
let a=12;
var a=13;
}
console.log(a);
</script>浏览器输出报错信息，说明let声明的变量是块级作用域，不能重复声明。
<script>
var a=[];
for(var i=0;i<10;i++){
a[i]=function(){
console.log(i);
};
}
a[6]();// 10 因为i是用var声明的，作用于全局。
</script><script>
var a=[];
for(let i=0;i<10;i++){
a[i]=function(){
console.log(i);
};
}
a[6]();// 6 因为不能重复声明，且是块级作用域，所以每一次循环，都是一个新的函数
</script><script>
const PI=3.14;
PI=2;//Uncaught TypeError: Assignment to constant variable.at let和const.html:28
</script>const是声明一个常量，不可变，重新赋值则会报错。
2.模板字符串
<script>
var a=1;
var b=2;
//var str="哈哈哈"+a+"嘿嘿嘿"+b; //以前的写法
//console.log(str);//哈哈哈1嘿嘿嘿2
var str=`哈哈哈${a}嘿嘿嘿${b}`//ES6写法 哈哈哈1嘿嘿嘿2
console.log(str);
</script>3.箭头函数
//无形参
var f=()=>5;
//等同于
var f=function(){return 5};
//多个形参
var sum=(num1,num2)=>num1+num2;
//等同于
var sum=function(num1,num2){return num1+num2;};箭头函数的两个坑：1.this的指向发生了改变，指向定义对象时的对象window。2.arguments不能使用。
4.对象的单体模式
<script>
var person={
name:"张三",
age:18,
// fav:function(){
// console.log(this);
// }
fav(){console.log(this)}
}
person.fav();
</script>解决箭头函数不能指向本身的问题。字面量方式创建对象。
5.面向对象
es5时的面向对象：
<script>
//构造函数的方式来创建对象，面向对象
function Aniaml(name,age){
this.name=name;
this.age=age;
}
Aniaml.prototype.showName=function(){
console.log(this.name)
};//给对象增加方法
var dog=new Aniaml('日天',18);
dog.showName()
</script>es6的面向对象
<script>
class Aniaml{
constructor(name,age){
this.name=name;
this.age=age;
}//构造方法，且后面不能加逗号
showName(){
console.log(this.name)
}
}
var d=new Aniaml('张三',19);
d.showName();
</script>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-08-06 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录