ES6
let所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。const聲明的變量是常量恼蓬，不能被修改。
解構(gòu)表達式：
（1）數(shù)組解構(gòu)
比如有一個數(shù)組： let arr = [1,2,3]僵芹，想獲取其中的值
const [x, y, z] = arr;
console.log(x, y, z);
（2）對象解構(gòu)
比如喲一個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
函數(shù)的優(yōu)化
function sum(a,b){
return a+b;
}
const add = (a,b) => a+b;
對象中函數(shù)的優(yōu)化
const p = {
name: "jack",
age: 21,
sayHello: function(){
console.log("hello");
}
}
p.sayHello();
優(yōu)化后
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);
接收參數(shù)時解構(gòu)
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(){
//向后臺發(fā)起ajax請求，完成對data數(shù)據(jù)初始化
// this.name="林更新真的";
setTimeout(() => this.name ="林更新 真的",1000)
}
});
</script>
</body>
指令：是帶有-v前綴的特殊屬性件豌。例如v-model代表雙向綁定疮方。
差值表達式：
使用{{}}方式在網(wǎng)速較慢時會出現(xiàn)問題。在數(shù)據(jù)未加載完成時茧彤，頁面會顯示出原始的{{}}骡显，加載完畢后才顯示正確數(shù)據(jù)，稱為差值閃爍曾掂。
所以可以用指令代替差值表達式惫谤，即使用v-text和v-html指令來替代{{}}
v-text：將數(shù)據(jù)輸出到元素內(nèi)部，如果輸出的數(shù)據(jù)有html代碼遭殉，會作為普通文本輸出；v-html：將數(shù)據(jù)輸出到元素內(nèi)部博助，如果輸出的數(shù)據(jù)有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(){
//向后臺發(fā)起ajax請求富岳，完成對data數(shù)據(jù)初始化
// this.name="林更新真的";
setTimeout(() => this.name ="<font color='red'>林更新 真的</font>",1000)
}
});
</script>
</body>
剛才的v-text和v-html可以看作是單向綁定蛔糯，數(shù)據(jù)影響了視圖渲染，但是反過來就不行窖式。v-model是雙向綁定蚁飒，視圖和模型之間會互相影響。
<body>
<div id="app">
<h1>已開設(shè)下列課程</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片段或函數(shù)名"
簡單語法：
@事件名="js片段或函數(shù)名"
不想冒泡可以加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： 阻止默認事件發(fā)生琼懊； .capture: 使用事件捕獲行模式； .self： 只有元素自身觸發(fā)事件才執(zhí)行（冒泡或捕獲的都不執(zhí)行）爬早。 .one: 只執(zhí)行一次哼丈。
<a @click.prevent="print('百度')">百度一下，你就瘋了</a>
v-for遍歷數(shù)據(jù)渲染頁面
遍歷數(shù)組如下：
<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>
在遍歷的過程中筛严，如果我們需要知道數(shù)組的角標醉旦，可以指定第二個參數(shù)：
v-for="(item, index) in items"
items:要迭代的數(shù)組；item:迭代得到的數(shù)組元素別名桨啃；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>
遍歷數(shù)字
<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監(jiān)控:
<!--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>
對象深度監(jiān)控：
<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>
