ES6:第一部分
ES6学习笔记
1.ES6的简介
1.ECMAScrpit是JS的语言标准
现在ES到11了，但是大版本是ES6
2.ES6的目标
使js能编写复杂的大型程序
3.版本特色：常量，作用域，对象代理，异步处理，类，继承
2.严格模式（现在的编译器可以取代）
1."use strict"; 后来被放弃了,因为会让以前的代码出现问题。
2.禁止this指向window。显示undefined
3.普通模式多个重名属性，后一个的赋值会覆盖前一个，但是严格模式下这个属于语法错误。
4.函数必须声明再顶层
3.速写属性/方法
var name = "Tom";
var age = 13 ;
var obj = {//这里面的name,age就是速写属性，他的值是外面的name和age
name, //name = name,
age, //age = age
sayHello:function(){//一般写法
//代码
}
sayHello(){//速写方法
//代码
}
};
4.箭头函数
var obj = {//这里面的name,age就是速写属性，他的值是外面的name和age
name:"Tom",
age:17,
sayHello:function(){//一般写法
setInterval(()=>{//这里就是箭头函数
console.log(this.name);
},1000)
},
};
箭头函数自动绑定定义处的this关键字
1.匿名函数都可以使用箭头函数代替 ，取消function()
2.更加简洁
var fun = function(){
}
var fun = ()=>{//当代码只有一句话
return a+b
}//还可以再简化
var fun = ()=> a+b
5.挂载
1.通过el挂载
2.创建好vue对象（未挂载）,用vm.$mount("#app")来挂载
6.模板，模板字符串
模板：vue实际控制的页面片段，vue会把模板编译成虚拟DOM树，然后再生成真实的DOM
模板字符串写法
`可以换行，可以拼接，相对于'',""强大很多`
写法（优先级由低到高 ）
1.再挂载元素位置直接书写（最多）
2.在template里面书写（其次）
3.在render里面书写
<div id="app">
//这是第一种
</div>
<script>
var vm = new Vue({//方法二
template:`<div id="app"></div>`
})
render(createElement){//方法三
return createElement("h1",["abc"])
}
</script>
模板中些什么？
1.静态内容
2.插值表达式{{JS表达式}}
3.指令
- v-html 绑定元素的innerHtml值
- v-bind 绑定属性值 简写 ：herf=""
- v-model 实现双向绑定，相当于绑定了value属性，注册了input事件。 $event.target.value指的是触发事件对象的value值
- v-on绑定事件 简写@click
- v-if /v-else/v-else-if判断元素什么时候要渲染
- v-show 判断是否显示
- v-for 循环
- v-bind:key 用于帮助在重新渲染时元素的对比，通常和v-for配合使用。以提高渲染效率，最好用id,在对象里面的定义一个id属性，用来绑定。
4.模板中所有的JS代码，他的环境均是vue实例，例如{{title}} 得到的结果相当于vm.title
配置对象
1.el
2.data
3.template
4.methods
5.computed
methods和computed的区别
1.computed使用时时当作属性来写，methods是当作方法（需要调用）
2.计算属性会进行缓存，如果依赖不变，不再重新计算，直接使用缓存结果，methods则每次调用都要重新计算
3.计算属性可以当作属性赋值（设置set，get方法）
7.ES6的模块化Module
全局变量污染，难以管理的依赖
一个可以导出的js文件
//默认导出 {defalut : fn}
export default function (a, b) {
return a + b
}
//具名导出，普通导出 {double :fn}
export function double(a) {
return a * 2;
}
//导出变量 {n:3}
export var n = 3
使用该js文件
// 1.导入 a.js中的default
import sum from "./a.js";
console.log(sum(3, 4));
//2.导出具名
import { double } from "./a.js";
console.log(double(4));
//3.导出所有
import * as obj from "./a.js";
console.log(obj);
