一.es6基本语法
0.es6参考网站
http://es6.ruanyifeng.com/#README
1.let 和 const
(1)const特点:
只在局部作用域起作用
不存在变量提升
不能重复声明
Var声明变量提升问题:
1 <script>
2 //相当于在开头var a,所以第一次打印是undefined而不是报错
3 console.log(a); //undefined
4 {
5 var a=1;
6 console.log(a) //1
7 }
8 console.log(a) //1
9
10 </script>
变量重复声明问题:
1 <script>
2 {
3 var a=1;
4 var a=2;
5 console.log(a) //2 var可以重复声明,下一次会把上一次的覆盖
6 let b=1;
7 let b=2;
8 console.log(b) //Identifier 'b' has already been declared
9 //let不可以重复声明变量
10 }
11 </script>
(2)Let特点:
局部作用域
不能重复声明
只声明常量,不可变的量
2.模板字符串:用$和{}实现字符串的拼接
1 <script>
2 let name="shy";
3 let a=`我的名字叫${name}`;
4 console.log(a); //我的名字叫shy
5 </script>
3.箭头函数
语法:
1 <script>
2 let add1 = function add(x) {
3 return x
4 };
5 ret1=add1(10);//10
6 console.log(ret1);//以上为普通函数
7
8 let add2 = (x) => {
9 return x
10 };
11 ret2=add2(20);//20
12 console.log(ret2)//箭头函数的语法
13 </script>
简便写法:
1 <script>
2 let add3 =x =>x;
3 ret3=add3(30);
4 console.log(ret3)
5 </script>
4.es6的类
(1)使用匿名函数做方法的类
1 <script>
2 let person={
3 name:"shy",
4 age:13,
5 favorite:function(){
6 console.log(this.name)
7 }
8 };
9 person.favorite()//shy
10 </script>
(2)使用箭头函数做方法的类
1 <script>
2 let person={
3 name:"shy",
4 age:13,
5 favorite: () => {
6 console.log(111)
7 }
8 };
9 person.favorite()//11
10 </script>
(3)this的指向问题
1 <script>
2 //正常函数
3 let person1={
4 name:"shy",
5 age:13,
6 favorite:function (){
7 console.log(this)//{name: "shy", age: 13, favorite: ƒ}
8 }
9 };
10 person1.favorite();
11 //箭头函数
12 let person2={
13 name:"shy",
14 age:13,
15 favorite: () => {
16 console.log(this)//Window {postMessage: ƒ, close: ƒ, frames: Window, …}
17 }
18 };
19 person2.favorite()
20 </script>
总结:在普通的函数中,this是指向调用者,在箭头函数中this指向调用者的父类,即上下文
5.对象的单体模式
1 <script>
2 let person={
3 name:"shy",
4 fav(){
5 console.log(this)
6 }
7 //相当于以下写法
8 // fav:function(){
9 // console.log(this)
10 // }
11 }
12 </script>
相当于正常的函数,所以this的指向是调用者
6.基于原型给函数声明方法(函数的原型)
1 <script>
2 function Person (name,age){
3 this.name=name;
4 this.age=age;
5 }
6 Person.prototype.showname=function(){
7 console.log(this.name)
8 };
9 let person=new Person("shy",13);
10 person.showname()
11 </script>
注:给Person的原型添加一个 方法,以后其他地方也可以调用该方法,可以将prototype理解成Person的父类
7.类
1 <script>
2 class Person{
3 constructor(name,age){//放置参数
4 this.name=name;//这里的this与python中的self类似
5 this.age=age;
6 }
7 showname(){
8 console.log(this.name)
9 }
10 }
11 let person=new Person("shy",15);
12 person.showname()//shy
13 </script>
二. vue基本用法
1.介绍
Vue是一套用于构建用户界面的渐进式框架。创始人:尤雨溪
前端三大框架:
vue,
angular:谷歌公司
react:Facebook
2.下载,引用
(1)下载
在官网中;https://cn.vuejs.org/v2/guide/连接cdn的资源或下载使用均可
(2)引用,实例化
1 <body>
2 //模板语法
3 <div class="box">{{ message }}</div>
4 //引包
5 <script src="vue.js"></script>
6 <script>
7 //实例化对象
8 var box = new Vue({
9 //绑定元素
10 el: '.box',
11 //数据
12 data: {
13 message: 'Hello Vue!'
14 }
15 })
16 </script>
17 </body>
注:模板语法中可以放很多种类型的数据
<h2>{{ msg }}</h2> //字符串
<h3>{{ 'hhahda' }}</h3> //直接渲染字符串
<h3>{{ 1+1 }}</h3> //运算
<h4>{{ {'name':'alex'} }}</h4> //字典
<h5>{{ person.name }}</h5> //字典的使用
<h2>{{ 1>2? '真的': '假的' }}</h2> //三元运算符
<p>{{ msg2.split('').reverse().join('') }}</p>
<div>{{ <h2>日天</h2> }}</div> //标签
3.v-text,v-html
v-text相当于innertext,v-html相当于innerHTML
1 <body>
2 <div class="box">
3 <div v-text="msg"></div> //<h2>shy</h2>
4 <div v-html="msg"></div> //shy
5 </div>
6 <script src="vue.js"></script>
7 <script>
8 new Vue({
9 el:".box",
10 data(){
11 return{
12 msg:"<h2>shy</h2>"
13 //******
14 //data中必须是一个函数,函数中要return一个对象,可以是空对象
15 //******
16 }
17 }
18 })
19 </script>
20 </body>
4.v-if,v-show
1 <head>
2 <meta charset="UTF-8">
3 <title>Title</title>
4 <style>
5 .show_or_hide1{
6 height: 200px;
7 width: 200px;
8 background-color: #ce8483;
9 }
10 .show_or_hide2{
11 height: 200px;
12 width: 200px;
13 background-color: #ce412f;
14 }
15 </style>
16 </head>
17 <body>
18 <div class="box">
19 <button v-on:click="handlerclick">显示隐藏</button>
20 <div class="show_or_hide1" v-show="show_or_hide"></div>//v-show语法
21 <div class="show_or_hide2" v-if="show_or_hide"></div>//v-if语法
22 </div>
23 <script src="vue.js"></script>
24 <script>
25 new Vue({
26 el:".box",
27 data(){
28 return{
29 show_or_hide:true
30 }
31 },
32 methods:{
33 handlerclick(){
34 this.show_or_hide=!this.show_or_hide;
35 }
36 }
37 })
38 </script>
39 </body>
当show_or_hide为真时,盒子显示,show_or_hide为false时,盒子隐藏,V-show:相当于style.display,v-if相当于删掉盒子(渲染开销大),盒子消失时会用<!---->占位
v-show与v-if的区别
v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-if可以与v-else一起使用
1 <body>
2 <div class="box">
3 <div v-if="Math.random() > 0.5">大于0.5</div>
4 <div v-else>小于0.5</div>
5 </div>
6 <script src="vue.js"></script>
7 <script>
8 new Vue({
9 el:".box",
10 data(){
11 return{
12
13 }
14 }
15 })
16 </script>
17 </body>
注:自定义属性和vue定义的属性在前端显示时,vue定 义的属性前会加一个$
5.v-bind和v-on
(1)v-bind
作用:用来绑定属性,如img标签的src,alt,a标签的href,id,class
语法：
1 <body>
2 <div id="app">
3 //绑定语法
4 <img v-bind:src="img_src" v-bind:alt="img_alt">
5 </div>
6 <script src="vue.js"></script>
7 <script>
8 new Vue({
9 el:"#app",
10 data(){
11 return{
12 img_src:"./11.JPG",
13 img_alt:"美女",
14 }
15 },
16 })
17 </script>
18 </body>
数据驱动视图,设计模式mvvm model view viewmodel
(2)v-on
作用:v-on可以监听所有的事件
例:动态添加active类名
1 <head>
2 <meta charset="UTF-8">
3 <title>Title</title>
4 <style>
5 .box{
6 width: 200px;
7 height: 200px;
8 background-color: #ce8483;
9 }
10 .active{
11 width: 200px;
12 height: 200px;
13 background-color: #637ece;
14 }
15 </style>
16 </head>
17 <body>
18 <div id="app">
19 //v-on的语法
20 <button v-on:click="changecolor">切换颜色</button>
21 //v-bind的另一种用法
22 <div class="box" v-bind:class="{active:is_show}"></div>
23 </div>
24 <script src="vue.js"></script>
25 <script>
26 new Vue({
27 el:"#app",
28 data(){
29 return{
30 is_show:true,
31 }
32 },
33 //v-on声明的函数都在methods里
34 methods:{
35 changecolor(){
36 this.is_show=!this.is_show
37 }
38 }
39 })
40 </script>
41 </body>
(3)v-bind和v-on的简便写法
v-bind可以使用":"来代替
v-on可以使用"@"来代替
1 <head>
2 <meta charset="UTF-8">
3 <title>Title</title>
4 <style>
5 .box{
6 width: 200px;
7 height: 200px;
8 background-color: #ce8483;
9 }
10 .active{
11 width: 200px;
12 height: 200px;
13 background-color: #637ece;
14 }
15 </style>
16 </head>
17 <body>
18 <div id="app">
19 //v-bind可以使用":"来代替
20 <img :src="img_src" :alt="img_alt">
21 //v-on可以使用"@"来代替
22 <button @click="changecolor">切换颜色</button>
23 <div class="box" :class="{active:is_show}"></div>
24 </div>
25 <script src="vue.js"></script>
26 <script>
27 new Vue({
28 el:"#app",
29 data(){
30 return{
31 img_src:"./11.JPG",
32 img_alt:"美女",
33 is_show:true,
34 }
35 },
36 methods:{
37 changecolor(){
38 this.is_show=!this.is_show
39 }
40 }
41 })
42 </script>
43 </body>
数据驱动视图
声明式和命令式的区别
- 命令式编程：命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实
- 声明式编程：告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)。
5.v-for
1 <body >
2 <div id="app">
3 //只有在确认状态正常时,才显示该列表
4 <ul v-if="data.static=='ok'">
5 <li>id---姓名---年龄</li>
6 //v-for语法
7 //循环元素和索引,顺序是(元素,索引)
8 <li v-for="(item,index) in data.users " :key='item.id'>
9 //一定要绑定key,可以节省性能的消耗,有id绑定id,没有id绑定,不用Vue来计算dom,使用key表示来计算,以节省性能
10 {{ item.id }}---{{ item.name }}---{{ item.age }}
11 </li>
12 </ul>
13 </div>
14
15 <script src="vue.js"></script>
16 <script>
17 new Vue({
18 //不能直接用body标签
19 el:"#app",
20 data(){
21 return{
22 //模拟后端返回数据
23 data:{
24 static:"ok",
25 users:[
26 {id:1,name:"shy",age:"18"},
27 {id:2,name:"jwb",age:"19"},
28 {id:3,name:"jwo",age:"20"},
29 ]
30 }
31 }
32 },
33 })
34 </script>
35 </body>
v-for也可以便利对象
1 <body >
2 <div id="app">
3 <ul>
4 //此处的顺序一定是先value,后key
5 <li v-for="(value,key) in person">{{ key }}--{{ value }}</li>
6 </ul>
7 </div>
8 <script src="vue.js"></script>
9 <script>
10 new Vue({
11 el:"#app",
12 data(){
13 return{
14 person:{
15 name:"shy",
16 hobby:"sking"
17 },
18 }
19 },
20 })
21 </script>
22 </body>
三.实例
1.轮播图的实现
1 <body>
2 <div id="app">
3 <img :src="images[currentindex].imgsrc" alt="aaa"> <br>
4 <button @click="preHandler">上一张</button>
5 <button @click="nextHandler">下一张</button>
6 </div>
7 <script src="vue.js"></script>
8 <script>
9 let vm=new Vue({
10 el:"#app",
11 data(){
12 return{
13 images:[
14 {id:1,imgsrc:"./assets/1.png"},
15 {id:2,imgsrc:"./assets/2.png"},
16 {id:3,imgsrc:"./assets/3.png"},
17 {id:4,imgsrc:"./assets/4.png"},
18 ],
19 currentindex:0
20 }
21 },
22 methods:{
23 preHandler(){
24 this.currentindex-=1;
25 if(this.currentindex==0){
26 this.currentindex=3
27 }
28 },
29 nextHandler(){
30 this.currentindex+=1;
31 if(this.currentindex==4){
32 this.currentindex=0
33 }
34 }
35 }
36 })
37 </script>
38 </body>
加定时器自动轮播的轮播图
1 <body>
2 <div id="app">
3 <img :src="images[currentindex].imgsrc" alt="aaa"> <br>
4 <button @click="preHandler">上一张</button>
5 <button @click="nextHandler">下一张</button>
6 </div>
7 <script src="vue.js"></script>
8 <script>
9 let vm=new Vue({
10 el:"#app",
11 data(){
12 return{
13 images:[
14 {id:1,imgsrc:"./assets/1.png"},
15 {id:2,imgsrc:"./assets/2.png"},
16 {id:3,imgsrc:"./assets/3.png"},
17 {id:4,imgsrc:"./assets/4.png"},
18 ],
19 currentindex:0
20 }
21 },
22 methods:{
23 preHandler(){
24 this.currentindex-=1;
25 if(this.currentindex==0){
26 this.currentindex=3
27 }
28 },
29 nextHandler(){
30 this.currentindex+=1;
31 if(this.currentindex==4){
32 this.currentindex=0
33 }
34 },
35
36 },
37 //created方法DOM创建完成时执行的方法
38 created(){
39 //定时器
40 setInterval(() => {
41 //使用箭头函数,使this指向vue,如果不用箭头函数,则指向window对象
42 console.log(this);
43 this.currentindex+=1;
44 if (this.currentindex == 4) {
45 this.currentindex = 0;
46 }
47 }, 2500);
48 }
49 })
50 </script>
51 </body>
2.vue中使用ajax
(1)从后端接口获取数据
1 <body>
2 <div id="app">
3
4 <span v-for="a in names" :key="a.id">{{ a.name }} </span>
5
6 </div>
7 <script src="vue.js"></script>
8 <script>
9 new Vue({
10 el:"#app",
11 data(){
12 return{names:[]}
13 },
14 created(){
15 $.ajax({
16 url:"https://www.luffycity.com/api/v1/course_sub/category/list/",
17 type:"get",
18 success:(response) => {
19 console.log(response);
20 //push是往数组的最后添加一项,unshift是向数组的开头添加一项,shift是从数组的开头删除一项
21 response.data.unshift({"id":0,"name":"全部","category":10})
22 this.names=response.data;
23 //如果不用箭头函数,this指向ajax
24 console.log(this);
25 console.log(response.data);
26 }
27 })
28 }
29 })
30 </script>
31 </body>
(2)点击颜色渲染
1 <head>
2 <meta charset="UTF-8">
3 <title>Title</title>
4 <script src="./js/jquery.js/"></script>
5 <style>
6 .active{
7 color: #1cb7fd;
8 }
9 </style>
10 </head>
11 <body>
12 <div id="app">
13 //v-on监听事件时,可以对事件传参数
14 <span @click="change_color(index)" :class="{active:index==currentindex}" v-for="(a,index) in names" :key="a.id">{{ a.name }} </span>
15 </div>
16 <script src="vue.js"></script>
17 <script>
18 new Vue({
19 el:"#app",
20 data(){
21 return{names:[],currentindex:0}
22 },
23 created(){
24 $.ajax({
25 url:"https://www.luffycity.com/api/v1/course_sub/category/list/",
26 type:"get",
27 success:(response) => {
28 console.log(response);
29 //push是往数组的最后添加一项,unshift是向数组的开头添加一项,shift是从数组的开头删除一项
30 response.data.unshift({"id":0,"name":"全部","category":10})
31 this.names=response.data;
32 //如果不用箭头函数,this指向ajax
33 console.log(this);
34 console.log(response.data);
35 }
36 })
37 },
38 methods:{
39 change_color(index){
40 this.currentindex=index
41 }
42 }
43 })
44 </script>
45 </body>
3.音乐播放器
1 <head>
2 <meta charset="UTF-8">
3 <title>Title</title>
4 <style>
5 //正在播放的音乐背景颜色加深类名
6 .active{
7 background-color: #ce8483;
8 }
9 </style>
10 </head>
11 <body>
12 <div id="music">
13 <!--//controls autoplay显示播放按钮等-->
14 //ended方法:当前歌曲执行完毕后执行
15 <audio :src="musicData[currentIndex].songSrc" controls autoplay @ended="next"></audio>
16 <ul>
17 <li @click="songHandler(index)" v-for="(item,index) in musicData" :key="item.id" :class="{active:index==currentIndex}">
18 <h2>歌名:{{ item.name }}</h2>
19 <h3>歌手:{{ item.author }}</h3> <br>
20 </li>
21 </ul>
22 </div>
23 <script src="vue.js"></script>
24 <script>
25 var musicData = [{
26 id: 1,
27 name: '于荣光 - 少林英雄',
28 author: '于荣光',
29 songSrc: './static/于荣光 - 少林英雄.mp3'
30 },
31 {
32 id: 2,
33 name: 'Joel Adams - Please Dont Go',
34 author: 'Joel Adams',
35 songSrc: './static/Joel Adams - Please Dont Go.mp3'
36 },
37 {
38 id: 3,
39 name: 'MKJ - Time',
40 author: 'MKJ',
41 songSrc: './static/MKJ - Time.mp3'
42 },
43 {
44 id: 4,
45 name: 'Russ - Psycho (Pt. 2)',
46 author: 'Russ',
47 songSrc: './static/Russ - Psycho (Pt. 2).mp3'
48 }
49 ];
50 new Vue({
51 el:"#music",
52 data(){
53 return{
54 musicData:[],
55 currentIndex:0
56 }
57 },
58 created(){
59 this.musicData=musicData
60 },
61 methods:{
62 //点击li标签播放歌曲
63 songHandler(index){
64 console.log(111);
65 this.currentIndex=index
66 },
67 next(){
68 this.currentIndex++
69 }
70 }
71 })
72 </script>
73 </body>
4.计算属性和侦听器
(1)侦听器watch
1 <body>
2 <div id="app">
3 <p>{{ message }}</p>
4 <button @click="message='dsz'">更换</button>
5 </div>
6 <script src="vue.js"></script>
7 <script>
8 new Vue({
9 el:"#app",
10 data(){
11 return{
12 message:"shy",
13 aaa:"aaa"
14 }
15 },
16 //watch监听器可以监听多个属性
17 watch:{
18 "message":function(a){
19 //此时的a是改变后的message
20 console.log(a);
21 //此处可以对message的值进行操作
22 this.message="shy"
23 },
24 "aaa":function(a){
25 console.log(a);
26 }
27 }
28 })
29 </script>
30 </body>
(2)计算属性computed
1 <body>
2 <div id="app">
3 <p>{{ msg }}</p>
4 <button @click="name='dsz'">更换</button>
5 </div>
6 <script src="vue.js"></script>
7 <script>
8 new Vue({
9 el:"#app",
10 data(){
11 return{
12 name:"shy",
13 age:18
14 }
15 },
16 //计算属性语法
17 //计算属性可以监听多个"多个属性"或'单个属性'
18 computed:{
19 //计算属性默认值有getter方法
20 msg:function(){
21 return `我是${ this.name },今年${ this.age }`
22 }
23 }
24 })
25 </script>
26 </body>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
