ES6
let所声明的变量，只在let命令所在的代码块内有效。const声明的变量是常量，不能被修改。
解构表达式：
（1）数组解构
比如有一个数组： let arr = [1,2,3]，想获取其中的值
const [x, y, z] = arr;
console.log(x, y, z);
（2）对象解构
比如哟一个person对象：
const person = {
name:"jack",
age:21,
language: ['java', 'js', 'css']
}
const {name, age, language} = person;
console.log(name);
console.log(age);
console.log(language);
如果想要用其他变量接收，需要额外指定别名：
const {name:n} = person
函数的优化
function sum(a,b){
return a+b;
}
const add = (a,b) => a+b;
对象中函数的优化
const p = {
name: "jack",
age: 21,
sayHello: function(){
console.log("hello");
}
}
p.sayHello();
优化后
const p = {
name: "jack",
age: 21,
sayHello(){
console.log("hello");
}
}
p.sayHello();
const p = {
name: "jack",
age: 21,
}
const hello = function(person){
console.log(person.name, person.age);
}
hello(p);
接收参数时解构
const p = {
name: "jack",
age: 21,
}
const hello = function({name, age}){
console.log(name, age);
}
hello(p);
const hello = ({name, age}) => console.log(name, age);
map和reduce：
let arr = ['2','5','-10','15','-20']
let arr2 = arr.map(s => parseInt(s))
arr2
(5) [2, 5, -10, 15, -20]
arr2.reduce((a,b) => a+b)
-8
Vue
在本地该项目下安装vue，在终端输入 npm install vue --save
<body>
<div id="app">
<button @click="handleClick">点我</button>
<br>
<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(){
console.log("hello!");
}
},
created(){
//向后台发起ajax请求，完成对data数据初始化
// this.name="林更新真的";
setTimeout(() => this.name ="林更新 真的",1000)
}
});
</script>
</body>
指令：是带有-v前缀的特殊属性。例如v-model代表双向绑定。
差值表达式：
使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数据，称为差值闪烁。
所以可以用指令代替差值表达式，即使用v-text和v-html指令来替代{{}}
v-text：将数据输出到元素内部，如果输出的数据有html代码，会作为普通文本输出；v-html：将数据输出到元素内部，如果输出的数据有html代码，会被渲染。
<body>
<div id="app">
<span v-text="name"></span><br>
<span v-html="name"></span>
</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(){
console.log("hello!");
}
},
created(){
//向后台发起ajax请求，完成对data数据初始化
// this.name="林更新真的";
setTimeout(() => this.name ="<font color='red'>林更新 真的</font>",1000)
}
});
</script>
</body>
刚才的v-text和v-html可以看作是单向绑定，数据影响了视图渲染，但是反过来就不行。v-model是双向绑定，视图和模型之间会互相影响。
<body>
<div id="app">
<h1>已开设下列课程</h1>
<input type="checkbox" v-model="lessons" value="java"/>java <br>
<input type="checkbox" v-model="lessons" value="Python"/>Python <br>
<input type="checkbox" v-model="lessons" value="IOS"/>IOS<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:{
lessons: []
}
});
</script>
</body>
v-on指令用于给页面元素绑定事件，语法：
v-on: 事件名="js片段或函数名"
简单语法：
@事件名="js片段或函数名"
不想冒泡可以加stop
<div id="app">
<!--v-on-->
<div style="width: 100px; height: 100px; background-color: antiquewhite;" @click="print('div')">
div
<button @click.stop="print('button')">点我试试</button>
</div>
</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:{
print(msg){
console.log(msg);
}
}
});
</script>
.stop：阻止事件冒泡； .prevent： 阻止默认事件发生； .capture: 使用事件捕获行模式； .self： 只有元素自身触发事件才执行（冒泡或捕获的都不执行）。 .one: 只执行一次。
<a href="http://www.baidu.com" @click.prevent="print('百度')">百度一下，你就疯了</a>
v-for遍历数据渲染页面
遍历数组如下：
<ul>
<li v-for="user in users">
{{user.name + "," + user.gender + "," + user.age}}
</li>
</ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",//element,vue所作用的标签
data:{
users:[
{name:'柳岩', gender:'女', age:21},
{name:'柳岩2', gender:'男', age:29},
{name:'柳岩3', gender:'女', age:11},
{name:'柳岩4', gender:'女', age:20},
{name:'柳岩5', gender:'女', age:9},
]
}
});
</script>
在遍历的过程中，如果我们需要知道数组的角标，可以指定第二个参数：
v-for="(item, index) in items"
items:要迭代的数组；item:迭代得到的数组元素别名；index:迭代到的元素索引，从0开始。
对象的遍历
<ul>
<li v-for="u in users[0]">{{u}}</li>
</ul>
<ul>
<li v-for="(v, k) in users[0]">{{k + ":" + v}}</li>
</ul>
遍历数字
<ul>
<li v-for="i in 5">{{i}}</li>
</ul>
v-if适用于一次加载时，v-show适用于频繁使用时如菜单。
v-bind:
<head>
<meta charset="UTF-8">
<title>hello</title>
<style type="text/css">
div#box{
width: 100px;
height: 100px;
color: darkgray;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<button @click="color='red'">红色</button>
<button @click="color='blue'">蓝色</button>
<div id="box" v-bind:class="color">
我是盒子
</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",//element,vue所作用的标签
data:{
color: "red",
}
});
</script>
</body>
<div id="app">
<button @click="isRed=!isRed">点我切换颜色</button>
<div id="box" v-bind:class="{red:isRed, blue: !isRed}">
我是盒子
</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",//element,vue所作用的标签
data:{
isRed: true
}
});
</script>
计算属性：
<!--计算属性-->
<h1>
您的生日：{{birth}}
</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",//element,vue所作用的标签
data:{
isRed: true,
birthday: 195698909899//毫秒值
},
computed:{
birth(){
const day = new Date(this.birthday);
return day.getFullYear() + "年" + day.getMonth() + "月"+ day.getDay()+"日";
}
}
});
</script>
watch监控:
<!--watch-->
<input type="text" v-model="num">
<h1>num: {{num}}</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",//element,vue所作用的标签
data:{
num: 1
},
watch:{
num(val, oldVal){
console.log(val, oldVal);
}
}
});
</script>
</body>
</html>
对象深度监控：
<script>
const app = new Vue({
el:"#app",//element,vue所作用的标签
data:{
person:{
name: "Jack",
age: 21
}
},
watch:{
person: {
deep: true,
handler(val){
console.log(val.age)
}
}
}
});
</script>
