三、ES5和6的一些新特性
1、let 和 const 命令
let：定义局部变量
const:定义常量
2、结构表达式
数组解构
let arr =[2,5,-10,-15];
let [x,y] =arr -------------> x=2 , y=5
let [,,a,b] =arr -------------> a=-10 ,b =-15
let [,...rest] --------> 第一个不要 取剩下的，放在rest中
对象解构
let p ={name:"jack",age:21};
let {name,age} =p -----------------> name:jack age :21
取别名
let {name:n } = p -------------> n：jack
解析复杂对象
p= {name:"jack" ,age :21,girl:{name:"rose",age:20}}
let {girl:{name}} =p -------> name: rose
let {...obj} =p 将整个对象p赋值给obj
对象的深层拷贝，对象地址 其实是不一样的
3、函数优化
箭头函数：
const add = (a,b)=> a+b;
对象中函数的优化
const p={
name:"jack",
age:21,
sayHello(){
xxxxxxxx
}
}
函数中可以用 结构表达式
const hello = function({name,age}){
console.info(name, age);
}
函数结合 结构表达式 和 箭头函数
const hello = ({name,age}) => console.info(name, age);
4、map 和 reduce
map：把一个集合中的元素逐个处理
let arr=['2' ,'5','-10','-15','-20']
let arr = arr.map(s=> parseInt(s));
reduce()：接收一个函数（必须）和一个初始值（可选）
四、vue
1、 命令
node -v 查看node的版本
npm -v 查看npm的版本
npm install nrm -g 全局安装切换镜像的工具
nrm ls 命令查看npm的仓库列表,带*的就是当前选中的镜像仓库
nrm use xxx 来指定要使用的镜像源
nrm test npm 测试速度
=====
在项目中：
npm init -y 项目初始化
npm install vue --save 本地安装vue(意思是只针对于该项目)
2、vue 入门
<div id="app">
<button @click="handleClick">点我</button>
<input type="text" v-model="num"><button @click="num++">+</button>
<h1>
{{name}} 非常帅<br>
有{{num}}位女生为其沉沦！！！！
</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app =new Vue({
el:"#app", //element,vue作用的标签
data:{
name:"",
num:1
},
methods:{ // 方法
handleClick:function(){ //简化的函数写法
console.log("hello,高燕，你真的特别好看！！")
}
},
created:function(){ // 生命周期钩子函数
// 向后台发起请求 ，完成对Data数据的初始化
this.name="高燕"
}
})
</script>
v-model ：视图和模型的双向绑定
@click : 点击事件
4、vue 的生命周期钩子函数
created:function(){ // 生命周期钩子函数
// 向后台发起请求 ，完成对Data数据的初始化
this.name="高燕"
}
5、vue 指令
1）{{}} 插值表达式
问题：会出现插值闪烁
2、v-text 和 v-html
区别：v-html 可以渲染标签
3、v-model: 双向绑定
<div id="app">
<button @click="handleClick">点我</button>
<input type="text" v-model="num"><button @click="num++">+</button>
<h1>
{{name}} 非常帅<br>
有{{num}}位女生为其沉沦！！！！
</h1>
<hr>
<input type="checkbox" v-model="lessons" value="Java" />Java<br/>
<input type="checkbox" v-model="lessons" value="PHP" />PHP<br/>
<input type="checkbox" v-model="lessons" value="Swift" />Swift<br/>
<h1>
你选择了：{{lessons.join(',')}}
</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app =new Vue({
el:"#app", //element,vue作用的标签
data:{
name:"",
num:1,
lessons:[]
},
methods:{
handleClick:function(){ //简化的函数写法
console.log("hello,高燕，你真的特别好看！！")
}
},
created:function(){
// 向后台发起请求 ，完成对Data数据的初始化
this.name="高燕"
}
})
</script>
4、v-on
@click.stop :阻止事件冒泡
.prevent :阻止默认事件
.self : 只有自身元素才能触发
5、v-for
// 数组的遍历
<ul>
<li v-for="(user, index) in users">
{{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
</li>
</ul>
// 对象的遍历
<ul>
<li v-for="(v,k,i) in users[0]"> <!-- v：值 k:键 i:索引 -->
{{i}} -- {{k}} :{{v}}
</li>
</ul>
6、v-if 和 v-show
区别：
v-if : 直接干掉 该元素
v-show ： 通过display属性来控制
7、v-bind
插值表达式不能使用在属性上
v-bind:class ="color" 或者 :class ="color"
将class 定义成一个变量
8、计算属性 本质上是一个方法，对属性进行运算必须要有返回值
// 只在 vue 初始化是运算了一次
computed:{
birth(){
// 对属性操作的方法
}
}
=====36