回顾昨天内容
1.let和const 2.模板字符串 `` 插变量${变量名} 3.箭头函数 function(){} == ()=>{} 1.this的指向问题 2.arguments不能使用 4.对象单体模式 var person={ name:"张三", fav(){ } } 5.es6的面向对象 class Animal{ constructor(){ }//构造方法，后面不加逗号 showName(){ }//定义方法 }
前端工具介绍：
webpack：打包机，它能将我们的html、css、js,font,png进行打包，交给服务器。
loader 加载器
插件：一个功能，js文件
组件：BootStrap组件，包含js，html，css
html压缩
css压缩
js压缩
js进行混淆
图片压缩
webpage火起来以前，前端工程师都使用grunt和gulp
nodejs+webpack 热重载 有代码改变的时候，浏览器跟着变
nodejs 服务器语言
新建一个项目：
1.在cmd下，cd到项目目录下，执行：npm init --yes 初始化我们的项目，自动生成一个package.json的文件
2.安装依赖包：npm install jquery --save
如果拿到了一个新的项目：
1.cd到当前目录
2.npm install 将依赖包批量安装，如果报错可能是项目版本太久了，可以先执行一次：npm rebuild
3.npm run dev 启动项目，类似的指令还有npm start，还有重新打包命令：npm run build
淘宝镜像：
有时候用npm会因为某些原因，国外的模块下载的太慢，这时就需要用淘宝镜像的cnpm代替npm进行安装了，使用淘宝镜像，首先要安装淘宝镜像，cmd下执行：
npm install -g cnpm --registry=https://registry.npm.taobao.org
v-if指令和v-on指令
vue适合单页面应用，主要移动端。
v-if指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app01"> {{msg}} <div v-if='d'>哈哈哈</div> <!-- d是false则哈哈哈不显示，d是true则哈哈哈显示 --> </div> <!-- 插值语法 --> <script src="vue.js"></script> <script> //vue的实例化 //MVVM Model View ViewModel //指令系统 v-* var app=new Vue({ el:"#app01", data:{ msg:"今天学习VUE", d:false, } }) </script> </body> </html>
v-on指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app01"> {{msg}} <div v-if='d'>哈哈哈</div> <!-- d是false则哈哈哈不显示，d是true则哈哈哈显示 --> <button v-on:click="qie">切换</button> </div> <!-- 插值语法 --> <script src="vue.js"></script> <script> //vue的实例化 //MVVM Model View ViewModel //指令系统 v-* var app=new Vue({ el:"#app01", data:{ msg:"今天学习VUE", d:false, }, methods:{ qie(){ this.d=!this.d;//取反 } //相当于 // qie:function(){ // this.d=!this.d;//取反 // } } }) </script> </body> </html>
v-on的简便写法：
<!-- <button v-on:click="qie">切换</button> --> <!-- v-on的简便写法@ --> <button @click="qie">切换</button>
指令系统
v-else指令
<div id="app01"> {{msg}} <div v-if='d'>哈哈哈</div> <!-- d是false则哈哈哈不显示，d是true则哈哈哈显示 --> <button v-on:click="qie">切换</button> <div v-if="Math.random()>0.5"> How you see me </div> <div v-else> How you don't </div> <!-- 刷新网页随机产生不同的内容 --> </div>
v-else-if指令
<div id="app01"> {{msg}} <div v-if='d'>哈哈哈</div> <!-- d是false则哈哈哈不显示，d是true则哈哈哈显示 --> <button v-on:click="qie">切换</button> <div v-if="Math.random()>0.5"> How you see me </div> <div v-else-if="0.5>Math.random()>0.3"> How you don't </div> <div v-else> emmm.... </div> <!-- 刷新网页随机产生不同的内容 --> </div>
v-show指令
<h3 v-show="isShow">我是一个三级标题</h3> <!-- 是修改css属性中的display，有更高的初始渲染开销，比v-if更加适合做多次切换 -->
v-bind指令
<h3 v-show="isShow" v-bind:title="t">我是一个三级标题</h3> <!-- 是修改css属性中的display，有更高的初始渲染开销，比v-if更加适合做多次切换 --> <img v-bind:src="SrcImage"> …… data:{ msg:"今天学习VUE", d:false, isShow:true, t:"哈哈哈", SrcImage:"./mei.jpg", },
绑定字符串，v-bind指令的简便写法，就是省略v-bind直接：
…… <img v-bind:src="SrcImage" :alt="alt"> <!-- v-bind:省略为： --> …… data:{ msg:"今天学习VUE", d:false, isShow:true, t:"哈哈哈", SrcImage:"./mei.jp", alt:`页面加载于${new Date().toLocaleString()}`,//取当前时间 },
v-bind:class指令
<style type="text/css"> .box{ width: 100px; height: 100px; background-color: red; } .box2{ background-color: green; } </style> …… <div id="app01"> <div class="box" v-bind:class='{box2:isGreen}'> </div> <button @click="changecolor">切换颜色</button> </div> …… <script src="vue.js"></script> <script> //vue的实例化 //MVVM Model View ViewModel //指令系统 v-* var app=new Vue({ el:"#app01", data:{ msg:"今天学习VUE", d:false, isShow:true, t:"哈哈哈", SrcImage:"./mei.jp", alt:`页面加载于${new Date().toLocaleString()}`,//取当前时间 isGreen:true, }, methods:{ changecolor(){ this.isGreen=!this.isGreen; } } }) </script>
监听事件
<div id="app01"> <div class="box" v-bind:class='{box2:isGreen}'> </div> <button @click="changecolor">切换颜色</button> <button @click="count+=1">加{{count}}</button> <!-- 每点击一次加1，简单的运算 --> </div> …… data:{ …… count:0, },
列表渲染
<div id="app01"> <div> <img v-bind:src="tu"> <ul> <li v-for="(item,i) in imgArr" @click='f(item)'>{{i+1}}</li> </ul> </div> </div> <!-- 插值语法 --> <script src="vue.js"></script> <script> var app=new Vue({ el:"#app01", data:{ imgArr:[ {id:1,src:'./1.jpg'}, {id:2,src:'./2.jpg'}, {id:3,src:'./3.jpg'}, {id:4,src:'./4.jpg'}, ], tu:"./2.jpg", }, methods:{ f(item){ this.tu=item.src; } } }) </script>
点击<li>标签切换图片显示
用vue做的轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ width: 180px; overflow: hidden; list-style: none; } ul li{ float: left; width: 30px; height: 30px; line-height: 30px; background: purple; margin-left: 10px; text-align: center; color:white; } button{ margin-top: 10px; margin-left: 5px; margin-right:50px ; } .box{ background: red; } </style> </head> <body> <div id="app01"> <div> <img v-bind:src="tu" @mouseenter='closebanner' @mouseleave='startbanner'> <ul> <li v-for="(item,i) in imgArr" @click='f(item)' :class="{box:isred}" @mouseenter='red(item)' @mouseleave='purple(item)'>{{i+1}}</li> </ul> </div> <button @click="pre">上一张</button> <button @click="next">下一张</button> </div> <script src="vue.js"></script> <script> var app=new Vue({ el:"#app01", data:{ imgArr:[ {id:1,src:'./1.jpg'}, {id:2,src:'./2.jpg'}, {id:3,src:'./3.jpg'}, {id:4,src:'./4.jpg'}, ], tu:"./1.jpg", index:0, banner:null, isred:false, }, //dom元素创建之前来完成的方法 //可以提前获取cookie和session created(){ this.banner=setInterval(this.next,2000); }, methods:{ f(item){ this.tu=item.src; }, pre(){ if(this.index==0){ this.index=this.imgArr.length; } this.index--; this.tu=this.imgArr[this.index].src; }, next(){ if(this.index==this.imgArr.length-1){ this.index=-1; } this.index++; this.tu=this.imgArr[this.index].src; }, closebanner(){ clearInterval(this.banner); }, startbanner(){ this.banner=setInterval(this.next,2000); }, red(item){ this.isred=true; }, purple(item){ this.isred=false; }, } }) </script> </body> </html>
做出来有缺陷，鼠标悬浮在选项上，所有选项都变红。。。。
v-html指令
…… <div>{{str}}</div> <!-- <p>嘿嘿嘿</p> --> <div v-html='str'></div><!-- 嘿嘿嘿 --> …… data:{ str:"<p>嘿嘿嘿</p>" },
计算属性的使用和v-model的实现原理
计算属性
1.传统的用模板语法进行简单运算
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="computed"> <div> {{msg.split('').reverse().join('')}} </div> <!-- 浏览器中字符串被反转了 !dlrow olleh --> </div> <script type="text/javascript" src="vue.js"></script> <script> var com=new Vue({ el:"#computed", data:{ msg:"hello world!", }, methods:{ }, computed:{ } }) </script> </body> </html>
2.通过计算属性，将模板语法中的计算，封装到computed里其中一个方法里
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="computed"> {{fangfa1}} </div> <script type="text/javascript" src="vue.js"></script> <script> var com=new Vue({ el:"#computed", data:{ msg:"hello world!", }, methods:{ }, computed:{ //默认只有getter方法，有返回值的方法 fangfa1(){ return this.msg.split('').reverse().join(''); } } }) </script> </body> </html>
3.计算属性：监听
computed里的方法，绑定了this.msg，一旦监听到this.msg发生了改变，与this.msg有关的数据计算的结果，也跟着改变。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="computed"> {{fangfa1}} <button @click="gai">修改</button> </div> <script type="text/javascript" src="vue.js"></script> <script> var com=new Vue({ el:"#computed", data:{ msg:"hello world!", }, methods:{ gai(){ this.msg="hello luffy!" } }, computed:{ //默认只有getter方法，有返回值的方法 //计算数据属性，watch监听 fangfa1(){ return this.msg.split('').reverse().join(''); } } }) </script> </body> </html>
4.computed里的方法中定义set
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="computed"> {{fangfa1}} <button @click="gai">修改</button> </div> <script type="text/javascript" src="vue.js"></script> <script> var com=new Vue({ el:"#computed", data:{ msg:"hello world!", }, methods:{ gai(){ console.log(this.fangfa1)//直接用this.fangfa1调用，则默认是使用get方法 this.fangfa1="hello luffy!"//给this.fangfa1赋值，则使用的set方法 } }, computed:{ //默认只有getter方法，有返回值的方法 //计算数据属性，watch监听 //想要使用set，需要自定义set，写法如下： //直接用this.fangfa1调用，则默认是使用get方法，如果 fangfa1:{ set:function(newValue){ this.msg=newValue; }, get:function(){ return this.msg.split('').reverse().join(''); } } } }) </script> </body> </html>
5.数据的双向绑定指令：v-model
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <form id="computed"> <input type="text" v-model="msg"> <h3>{{msg}}</h3> </form> <script type="text/javascript" src="vue.js"></script> <script> var com=new Vue({ el:"#computed", data:{ msg:"", }, methods:{ }, computed:{ } }) </script> </body> </html>
v-model数据双向绑定的实现原理
数据的双向绑定=数据单项绑定+UI的事件监听
计算属性的应用：set的应用场景
虽然使用set看起来是不使用set的多此一举，但是其却有着其应用场景，就是数据双向绑定的本质
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <form id="computed"> <!-- <input type="text" v-model="msg"> --> <input type="text" v-bind:value="getValue" @input="msgChange"> <h3>{{getValue}}</h3> </form> <script type="text/javascript" src="vue.js"></script> <script> var com=new Vue({ el:"#computed", data:{ msg:"123", }, methods:{ msgChange(e){ console.log(e.target.value);//e是事件监听对象，e.target.value是每次发生事件后的值 this.getValue=e.target.value; } }, computed:{ getValue:{ set:function(newValue){ this.msg=newValue; }, get:function(){ return this.msg; } } } }) </script> </body> </html>
v-model只适用于表单控件里面
表单文本、多行文本、复选框、单选按钮、多选按钮、选择框……
使用案例：https://cn.vuejs.org/v2/guide/forms.html
.lazy修饰符和.number修饰符和.trim修饰符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <form id="computed"> <input type="text" v-model="msg"> <input type="text" v-model.lazy="msg"> <!-- 加了.lazy修饰符，则不是时时监听，而是当输入完以后，完成同步 --> <input type="number" v-model.number="msg"> <!-- 只能输入数字 --> <input type="text" v-model.trim="msg"> <!-- 自动消除用户输入的收尾空白字符 --> <h3>{{msg}}</h3> </form> <script type="text/javascript" src="vue.js"></script> <script> var com=new Vue({ el:"#computed", data:{ msg:"123", }, methods:{ }, computed:{ } }) </script> </body> </html>