ECMAScript
全局变量
var x=1;
局部变量
let y=1;
静态变量
const num=1;
解构表达式
数组给变量赋值
let arr=[2,5,-10,15];
// 普通赋值
let x=arr[0],y=arr[1];
// 解构表达式赋值
let [x,y]=arr;
数组给数组赋值
// 将arr中,除去第一个元素以外剩余的元素赋值给rest数组
let [,...rest] = arr;
E对象的解析
// 将对象中的属性值赋值给变量
// 属性的位置是不固定的,所以取值的时候只能使用属性名来取
let p={name:"jack",age:21};
let {name,age}=p;
对象的解析2
// 取属性名为name的值,并且赋值变量n
let p={name:"jack",age:21};
let {name:n}=p;
对象的解析3(复合对象)
// 取对象中的对象的属性
let p={name:"jack",age:20,gril:{name:"rose",age:18}};
let {gril:{name}}=p;
对象的解析4(复制对象)
let p={name:"jack",age:20,gril:{name:"rose",age:18}};
let {...obj}=p;
函数的优化
const add = (a,b) => a + b;
对象的优化
const p ={
name:"jack",
age: 21,
sayHello(){
console.log("hello");
}
}
函数中的解构表达式
const p ={
name:"jack",
age: 21
}
const hello = function({name,age}){
console.log(name,age)
}
hello(p);
或者写成
const p ={
name:"jack",
age: 21
}
const hello=>({name,age})=> console.log(name,age);
hello(p);
map(对集合中的每一个元素进行处理)
// 遍历arr,将元素转换为整数赋值到arr2中
let arr=['10','5','6','-2'];
let arr2 = arr.map(s=>parseInt(s));
reduce(逐个对每个元素处理,参数为2个)
// 累加
let arr=['10','5','6','-2'];
let arr2 = arr.map(s=>parseInt(s));
arr2.reduce((a,b)=>a+b);
指定第一个的值
// 累加
let arr=['10','5','6','-2'];
let arr2 = arr.map(s=>parseInt(s));
arr2.reduce((a,b)=>a+b,0);
Vue.js
安装npm(Node.js中自带npm) (npm 全称 node package management )
安装nrm(-g是全局安装)
npm install nrm -g
更换镜像
nrm use taobao
实践
创建一个空的工程
创建一个web Static Model
终端进入model 的目录
npm -init -y
安装vue(-save 表示本地安装,只针对当前项目安装)
npm install vue -save
demo1,Vue的简单使用,Model 到 View
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<div id="app">
<h1>{{name}} 非常帅</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
name:"胡歌",
}
});
</script>
</body>
</html>
在控制台输入app.name=xx
也可以改变其内容
在Vue的插件中改变Model 的值,View 上的值也会发生改变
demo2 从View 到 Model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<div id="app">
<input type="text" v-model="num"><br/>
<h1>{{name}} 非常帅</h1>
<h1>{{num}} 位女神为其着迷</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
name:"胡歌",
num: 1,
}
});
</script>
</body>
</html>
input 标签中v-model
属性将次标签和 Model 中的num 关联起来
在输入框中输入数据,Vue 插件中Model 中的值会发生改变,Model 的值改变后View 的值也会改变
demo3 事件与Vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<div id="app">
<input type="text" v-model="num"><button @click="num++">+</button><br/>
<h1>{{name}} 非常帅</h1>
<h1>{{num}} 位女神为其着迷</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app", // el表示Vue作用的标签,标签的范围就是Vue的作用范围
data:{ // data 对象的数据会渲染到Vue作用的标签,vue作用的标签不要使用外部定义的变量
name:"胡歌",
num: 1,
}
});
</script>
</body>
</html>
Vue 中使用 @click
定义标签点击事件,例子中每点击一次 num的值+1
demo4 Vue 中定义方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<div id="app">
<button @click="handleClick">点我</button>
<br>
<input type="text" v-model="num"><button @click="num++">+</button><br/>
<h1>{{name}} 非常帅</h1>
<h1>{{num}} 位女神为其着迷</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
name:"胡歌",
num: 1,
},
methods:{
handleClick(){
console.log("hello");
}
}
});
</script>
</body>
</html>
demo5 Vue对象的created 函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<div id="app">
<button @click="handleClick">点我</button>
<br>
<input type="text" v-model="num"><button @click="num++">+</button><br/>
<h1>{{name}} 非常帅</h1>
<h1>{{num}} 位女神为其着迷</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
name:"",
num: 1,
},
methods:{
handleClick(){
console.log("hello");
}
},
created(){
// 在此出可以使用ajax请求,完成data中属性的初始化
// setTimeout(()=>this.name="胡歌 真的",1000);
this.name="胡歌 真的";
}
});
</script>
</body>
</html>
this 指代Vue 对象中,其实name不是data的属性,而是Vue的属性
created 为钩子函数,在Vue的生命周期中调用
Vue 指令
插值表达式
上述例子中的{{name}}
就是插值表达式,插值表达式存在插值闪烁的问题
因此,常用v-text
指令代替插值表达式
<h1><span v-text="name"></span> 非常帅</h1>
v-text 和 v-html 的区别
v-text 原样显示文本,即使文本时html标签也会原样显示
v-html 也是显示文本,但文本是html 标签,那么将文本当成html 的一部分显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<div id="app">
<h1><span v-text="name"></span></h1>
<h1><span v-html="name"></span></h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
name:"",
num: 1,
},
methods:{
handleClick(){
console.log("hello");
}
},
created(){
// setTimeout(()=>this.name="胡歌 真的",1000);
this.name="<font color='#6495ed'>大家好我是胡歌</font>";
}
});
</script>
</body>
</html>
输出结果为:第一个将标签原样输出,第二个只输出文字
v-model
v-text 和 v-html 是单向绑定,v-model 是双向绑定。范是用户可操作的标签都可使用v-model。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<div id="app">
<button @click="handleClick">点我</button>
<br>
<input type="text" v-model="num"><button @click="num++">+</button><br/>
<h1><span v-text="name"></span> 非常帅</h1>
<h1>{{num}} 位女神为其着迷</h1>
<h1><span v-text="name"></span></h1>
<h1><span v-html="name"></span></h1>
<!-- v-model 绑定-->
<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",
data:{
name:"",
num: 1,
lessons:[],
},
methods:{
handleClick(){
console.log("hello");
}
},
created(){
// setTimeout(()=>this.name="胡歌 真的",1000);
this.name="<font color='#6495ed'>大家好我是胡歌</font>";
}
});
</script>
</body>
</html>
v-on 事件绑定
v-on: 事件名=“js片段或者函数名”
@事件名="js或者函数名"
v-for 遍历集合
不带角标输出
<ul>
<li v-for="u in users">
{{u.name +","+u.age+","+u.gender}}
</li>
</ul>
带角标输出
<ul>
<li v-for="(u,i) in users">
{{i}} {{u.name +","+u.age+","+u.gender}}
</li>
</ul>
data:{
users:[
{name:"柳岩",gender:"女",age:21},
{name: "胡歌",gender:"男",age: 30},
{name: "范冰冰",gender:"女",age: 24},
{name: "刘亦菲",gender:"女",age: 18},
{name: "古力娜扎",gender:"女",age: 25}
]
}
对象的遍历,不带角标
<ul>
<li v-for="u in users[0]">
{{u}}
</li>
</ul>
遍历对象,带角标
<ul>
<li v-for="(u,i) in users[0]">
{{i+","+u}}
</li>
</ul>
遍历对象,带角标,带索引
<ul>
<li v-for="(v,k,i) in users[0]">
{{i+"_"+k+","+v}}
</li>
</ul>
遍历数字
<ul>
<li v-for="i in 5">
{{i}}
</li>
</ul>
:key
的作用表示给元素一个唯一索引。集合被渲染到view上后,如果集合发生改变,则将重新渲染view。不加:key
时,需要全部渲染一边集合,而加了:key
就只渲染修改的那部分。
<ul>
<li v-for="(v,k,i) in users[0]" :key="i">
{{i+"_"+k+","+v}}
</li>
</ul>
v-if
当条件表达式为真的时候,显示标签内的内容
<button @click="show = !show">点击切换</button>
<div v-if="show">
<h1>你好</h1>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
show: true
}
});
</script>
v-show
当条件表达式为真时,显示标签内容,与v-if 的区别是,v-if 通过删除和添加标签进行内容显示和隐藏,而v-show 通过设置标签的style 进行内容的显示和隐藏
<div v-show="show">
<h1>你很好,我记住了</h1>
</div>
v-for 和 v-if 一起使用
v-for 会先于v-if 执行
<ul>
<li v-for="i in 5" v-if="i%2 === 0">
{{i}}
</li>
</ul>
v-else,v-else-if
<ul>
<li v-for="i in 5">
<span v-if="i%2===0">偶数:{{i}}</span>
<span v-else style="background-color: #cccccc">奇数:{{i}}</span>
</li>
</ul>
vue 修改class 属性
使用:class="变量名"
或者v-bind:class="变量名"
,使用Vue 修改变量的值,就可改变class 的值,但是此出不能使用插值表达式
<style type="text/css">
div#box{
width: 100px;
height: 100px;
color: darkgray;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
<div id="app">
<button @click="color='red'">红色</button>
<button @click="color='blue'">蓝色</button>
<div id="box" :class="color">
我是盒子
</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
color:"red"
}
});
</script>
class 属性也可以使用对象,在style 里面也可以使用
<div id="app">
<button @click="isRed=!isRed">切换颜色</button>
<!-- <button @click="color='blue'">蓝色</button>-->
<div id="box" :class="{red:isRed,blue:!isRed}">
我是盒子
</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
// color:"red"
isRed: true
}
});
</script>
计算属性
使用Vue 的computed,在里面加上一个方法,方法就是一个计算属性,只计算一次,之后方法名成为属性名,方法的返回值成为属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</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">
<div>
<h1>
您的生日为:{{birth}}
</h1>
</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
birthday:1429032123201
},
computed:{
birth(){
const date = new Date(this.birthday);
return date.getFullYear()+"年"+date.getMonth()+"月"+date.getDay()+"日";
}
}
});
</script>
</body>
</html>
监控watch
demo1,浅度监控,监控变量
<input type="text" v-model="num">
使用Vue的watch 监控变量改变,再watch 中写一个方法,第一个参数是新值,第二个参数是旧址,在函数中可以写监控到变化后所做的事情
<script>
const app = new Vue({
el:"#app",
data:{
num:1,
},
watch:{
num(val,oldVal){
console.log(val,oldVal);
}
}
});
</script>
demo2,深度监控,监控对象中的属性值发生改变 ,当person的对象属性值发生改变后,执行handler函数,handler的参数为改变的值,handler里面可以写上监控到属性改变后所做的事
<script>
const app = new Vue({
el:"#app",
data:{
person:{
name:"jack",
age:21
}
},
watch:{
person: {
deep:true,
handler(val){
console.log(val.age);
}
}
}
});
</script>
Vue 组件(全局组件)
使用Vue.component 定义一个组件component 是个函数,第一个参数是id,为string类型,第二个参数是一个对象,对象中定义了一个模板template,data的形式是函数的形式,函数的返回值是真实的数据。data为函数的目的是,当组件被多次使用时,如果data是一个属性,那么组件将共用这些属性了,data是一个函数的话,每个组件之间的数据不会共享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="app">
<div>
<counter></counter>
</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
Vue.component("counter",{
template:'<button @click="count++">你点了我{{count}}次,我记住你了</button>',
data(){
return {count:0}
}
});
const app = new Vue({
el:"#app",
data:{
}
});
</script>
</body>
</html>
Vue组件(局部组件)
将组件定义为一个对象,然后通过Vue的components 属性,将自定义的组件加入Vue 实例中,这样的自定义组件只能在Vue实例的作用范围内使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="app">
<div>
<counter></counter>
<counter></counter>
<counter></counter>
<counter></counter>
</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// 全局组件
// Vue.component("counter",{
// template:'<button @click="count++">你点了我{{count}}次,我记住你了</button>',
// data(){
// return {count:0}
// }
// });
const counter = {
template:'<button @click="count++">你点了我{{count}}次,我记住你了</button>',
data(){
return {count:0}
}
};
const app = new Vue({
el:"#app",
data:{
},
components:{
counter:counter
}
});
</script>
</body>
</html>
Vue事件冒泡
触发子标签事件后,子标签会报告给父标签,触发父标签的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<div id="app">
<div style="background-color: antiquewhite; width: 100px;height: 100px;" @click="print('div')">
<button @click="print('button')">点我试试</button>
</div>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
},
methods:{
print(msg){
console.log(msg);
}
}
});
</script>
</body>
</html>
点击div ,控制台提示div,点击button,控制台提示button、div
停止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<div id="app">
<div style="background-color: antiquewhite; width: 100px;height: 100px;" @click.stop="print('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",
data:{
},
methods:{
print(msg){
console.log(msg);
}
}
});
</script>
</body>
</html>
使用@事件名.stop="js片段或者函数名"
,该事件就不会发生事件冒泡了
事件修饰符
- .stop 停止事件冒泡
- .prevent 阻止默认事件发生
- .capture使用事件捕获模式
- .self 只有元素自身触发事件才执行(冒泡或者捕获的都行)
- .once 只执行一次
demo 阻止默认事件发生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<div id="app">
<a href="http://www.baidu.com" @click.prevent="print('百度')">百度一下</a>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
},
methods:{
print(msg){
console.log(msg);
}
},
});
</script>
</body>
</html>
点击百度一下,不会触发默认的跳转事件,而是在控制台输出百度。