es6基本语法,vue基本语法
一.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="data: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="data: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>
转载于:https://www.cnblogs.com/shanghongyun/p/10006003.html
es6基本语法,vue基本语法相关推荐
- 01 【Vue简介 初识Vue 模板语法和数据绑定】
1.Vue简介 1.1官网 英文官网 中文官网 1.2介绍与描述 Vue 是一套用来动态构建用户界面的渐进式JavaScript框架 ○构建用户界面:把数据通过某种办法变成用户界面 ○渐进式:Vue可 ...
- Vue Eslint语法检测工具
一.ESlint 简介 1. Lint 的含义 如果你写自己的项目怎么折腾都没关系,但是在公司中老板希望每个人写出的代码都要符合一个统一的规则,这样别人看源码就能够看得懂,因为源码是符合统一的编码规范 ...
- Vue知识(一)Vue基础语法
Vue知识 一.邂逅Vue.js 1.认识Vue.js 2.Vue.js安装方式 3.Vue初体验 4.Vue的MVVM框架 二.Vue基础语法 v-if指令 v-show指令 v-else指令 v- ...
- [Vue] 模板语法
vue的一些基础用法 第一章 插值操作 1.1 Mustache 1.2 v-once 1.3 v-html 1.4 v-text 1.5 v-pre 1.6 v-cloak 第二章 绑定属性 2.1 ...
- 从“小胡子”到 vue 插值语法
从"小胡子"到 vue 插值语法 什么是模板引擎 模板引擎是将数据要变为视图最优雅的解决方案,简单来说就是将模板文件和数据通过模板引擎生成一个HTML代码.还不懂?没关系,打个比方 ...
- idea 添加 VUE 的语法
1,首先我们先让 HTML 文件支持 VUE 的语法指令提示 2,File -> Setting -> Edit -> Inspections -> html 3.加入以下: ...
- 4.Vue 模板语法
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. Vue模板语法 这篇文章我们来 ...
- (vue基础试炼_08)Vue模板语法
文章目录 一.插值表达式 二.v-text 中不是字符串而是js表达式 三.v-html 四.js表达式,可以和字符串拼接 五.源码链接 一.插值表达式 <!DOCTYPE html> & ...
- Mvvm、第一个Vue程序、Vue基本语法
一.MVVM概述 1.1.什么是MVVM MVVM(Model-View-ViewModel)是一种软件设计模式,由微软WPF(用于替代WinForm,以前就是用这个技术开发桌面应用程序的)和Silv ...
最新文章
- 目标检测算法Faster R-CNN简介
- 小忆《记录博客一周年》
- 在Linux上配置Telnet服务
- 注解 @PostConstruct 与 @PreDestroy 详解及实例
- nuxt vue ssr实现
- matlab x为整数,关于matlab中用什么字符表示任意整数
- Docker(十二)关于deployment 创建的小坑
- 按钮灭了_劣质灭火器整瓶都灭不掉一盆火 教你几招辨别消防产品真假
- 谷粒商城:Oss endpoint can‘t be empty.
- codeforces 212E IT Restaurants(树形dp+背包思想)
- sentinel-2数据下载 大气校正 转ENVI格式
- 微信unionId和openId
- (超详细)搜索软件Everything的安装与使用
- 测试和开发怎么互转?
- 应用matlab快速实现实验对象随机分组,应用MATLAB快速实现实验对象随机分组
- 绕过微软WGA正版验证(蓝色五角星)的几则技巧
- 【胡侃系列】基于多元回归模型的双十一购物狂欢节天猫商城销售额预测
- 电脑怎么连接隐藏的无线WiFi信号呢?
- 达观数据爱心公益再出发,走进广西桥业小学开展捐书助学活动
- Web前端:Web前端开发工程师工作内容网页案例设计
热门文章
- 自定义按键_NS推送10.0.0版本更新 新增按键自定义和数据转移功能
- Java多线程共享变量控制
- idea添加添加自动添加版本控制
- Android Studio 3.2升级后的编译问题解决办法
- 那些前端应该知道的HTTP知识
- BZOJ 4154 kd-tree dfs序 + 二维空间的区间(矩阵)更新单点查找
- Java核心API -- 9(异常)
- .NET请求编译流程图(解释为什么第一次请求比较慢)
- GAE 博客——B3log Solo 0.3.0 正式版发布了!
- 几款4Gb光纤连接产品对比