Vue框架进阶
目录
一、Vue的钩子函数
二、事件传值
三、表单输入绑定
四、简单计算器案例
五、v-model使用后缀参数：
六、计算属性
七、实现输入同步
八、监听属性
一、Vue的钩子函数
1.钩子函数称为vue前端框架的生命周期函数
（1）就是可以在vue的创建、运行、销毁过程中可以触发的一些函数。
2.vue.js的生命周期函数执行流程图
3.生命周期函数一般和el、data、methods、同级别的
（1）格式：mounted(){}
（2）这个mounted函数是在页面挂载之后调用的；还有一个是beforeMount函数，这个函数是在页面挂载之前调用的；一般情况下，这两个生命周期函数使用的比较多
（3）案例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><input type="button" @click="change()" value="切换" /><br /><img :src="path" height="300px" width="300px" /></div><script>var vue = new Vue({el:"#app",data:{i:1,path:"img/left/1.png"},methods:{change(){this.i++;//在函数中变化path值的内容，在函数中获取data中的变量，使用this.变量名或vue.变量名this.path="img/left/" + this.i + ".png";if(this.i >= 11){this.i=1;}}},mounted(){//new Vue中的数据挂载完成，渲染到div中时，调用mounted()函数，即页面数据挂载之后;beforeMount:是页面数据挂载之前,这两种使用的比较多//定时器setInterval(this.change,200);//每隔200毫秒,重复调用change函数;注意:这里不能使用括号}})</script></body>
</html>4.生命周期函数(钩子函数)
（1）beforeCreate()：创建vue实例之前触发；
（2）created()：创建vue实例时触发；
（3）beforeMount()：当vue实例渲染到html页面之前触发；
（4）mounted()：当vue实例渲染到html页面过程中触发；
（5）beforeDestroyed()：vue页面销毁之前触发；
（6）destroyed()：vue页面销毁之后触发；
（7）案例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"></div><script>var vue = new Vue({el:"#app",data:{},mounted() { //相当于js中的onload事件alert("4vue渲染到html页面中触发")},beforeMount() {alert("3vue渲染到html页面之前触发")},created() {alert("2创建vue实例时触发")},beforeCreate() {alert("1创建vue实例前触发")},destroyed() {alert("6vue实例销毁之后触发")},beforeDestroy() {alert("5vue实例销毁之前触发")}})</script></body>
</html>二、事件传值
1.可以在调用时直接传值
2.数组操作
（1）往数组后面追加：
- 格式：数组名.push("要往数组中添加的数据")
- 往数组中添加数据，这个函数是往数组后面追加
（2）往数组前面追加：
- 格式：数组名.unshift("要往数组中添加的数据")
- 往数组中添加数据，这个函数是往数组前面追加
3.可以在事件中直接操作成员变量
4.案例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><input type="button" @click="add(10,30)" value="加法" /><br /><input type="button" @click="num-=1" value="自减" />{{num}}<input type="button" @click="num+=1" value="自增" /><br /><input type="button" @click="addCity()" value="往数组后面添加元素" /><input type="button" @click="addCity2()" value="往数组前面添加元素" />{{citys}}</div><script>var vue = new Vue({el:"#app",data:{num:1,citys:["广州"]},methods:{add(a,b){alert("a+b=" + (a + b))},addCity(){this.citys.push("深圳") //往数组里面添加新的元素，往数组后面添加},addCity2(){this.citys.unshift("东莞")}}})</script></body>
</html>三、表单输入绑定
1.v-model：双向数据绑定。
（1）注意：要使用双向绑定，需要在data中定义一个与v-model值名字相同的变量。
2.v-model一般用在表单中。
（1）注意：使用v-model的表单的单选框不适用checked=checked来设置默认值了，而是之间在data中为此单选的相同变量赋值就可以了。
3.在vue中提交表单不需要form标签了，可以直接写一个函数提交，不过在提交之前需要把数据封装到一个对象中，然后再将这个对象转换为json格式。
（1）将对象转换为json格式：JSON.stringify(要转换的对象名)。
4.再转换完成后，通过axios网络请求技术想后端服务器提交数据。
5.案例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表单/双向数据绑定</title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">用户名:<input type="text" v-model="uname" /><br /> <!-- v-model的设置用来获取表单输入框中的数据 -->密码:<input type="password" v-model="pwd" /><br />性别:男:<input type="radio" v-model="sex" value="1" /> <!-- 默认选中不适用checked=checked -->女:<input type="radio" v-model="sex" value="0" /><br />爱好:看书:<input type="checkbox" v-model="favor" value="1" />听音乐:<input type="checkbox" v-model="favor" value="2" />爬山:<input type="checkbox" v-model="favor" value="3" />蹦极:<input type="checkbox" v-model="favor" value="4" /><input type="button" @click="submit()" value="提交" /></div><script>var vue = new Vue({el:"#app",data:{uname:"小丽",pwd:"123",sex:"1", //设置默认选中favor:[]},methods:{submit(){// alert(this.uname + "--" + this.pwd + "--" + this.sex + "--" + this.favor)//在vue中提交数据，需要创建一个对象来封装表单数据var person = new Object();person.uname = this.uname;person.pwd = this.pwd;person.sex = this.sex;person.favor = this.favor;//当前的数据在开发中是需要提交到服务器里面去，通过json数据传递var s = JSON.stringify(person);//JSON.stringify()可以把对象转成json数据alert(s); //{"uname":"小丽","pwd":"123","sex":"1","hobby":["2","3"]}//这个数据往服务器端发送，需要后面学习axios发送post/get网络请求技术}}})</script></body>
</html>四、简单计算器案例
1.双向绑定只能赋值为字符串。
2.做简单计算器需要使用到输入文本框，因为文本框输入的数据都是字符串所以我们需要把字符串转为数字类型。
（1）直接在v-model后面加上.number，将输入的内容转换为数字类型。
- 案例：
-
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>简单计算器</title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">数值A:<input type="text" v-model.number="num1" /><br /> <!-- .number:输入字符串转换为有效的数字 -->数值B:<input type="text" v-model.number="num2" /><br /><input type="button" @click="add()" value="加法" /><br /><input type="button" @click="reduce()" value="减法" /><br /><input type="button" @click="ride()" value="乘法" /><br />结果:{{result}}</div><script type="text/javascript">var vue = new Vue({el:"#app",data:{num1:"", //双向绑定只能赋值为字符串num2:"",result:""},methods:{add(){if(this.num1 != "" && this.num2 != ""){this.result = this.num1 + this.num2; //直接获取的字符串}},reduce(){if(this.num1 != "" && this.num2 != ""){this.result = this.num1 - this.num2;}},ride(){if(this.num1 != "" && this.num2 != ""){this.result = this.num1 * this.num2;}}}})</script></body> </html>
（2）或者是在vue对象中的某个函数中获取到data中的数据后使用parseFloat(data中获取的要转换的值)，来讲字符串转换为小数。
- 案例：
-
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>简单计算器</title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">数值A:<input type="text" v-model="num1" /><br />数值B:<input type="text" v-model="num2" /><br /><input type="button" @click="add()" value="加法" /><br /><input type="button" @click="reduce()" value="减法" /><br /><input type="button" @click="ride()" value="乘法" /><br />结果:{{result}}</div><script type="text/javascript">var vue = new Vue({el:"#app",data:{num1:"", //双向绑定只能赋值为字符串num2:"",result:""},methods:{add(){if(this.num1 != "" && this.num2 != ""){//parseFloat()相当于java中的Float.parseFloat("数字的字符串形式")this.result = parseFloat(this.num1) + parseFloat(this.num2); }},reduce(){if(this.num1 != "" && this.num2 != ""){this.result = parseFloat(this.num1) - parseFloat(this.num2); }},ride(){if(this.num1 != "" && this.num2 != ""){this.result = parseFloat(this.num1) * parseFloat(this.num2); }}}})</script></body> </html>
五、v-model使用后缀参数：
1..number：输入字符串转为有效的数字；
2..trim：输入首尾空格过滤(等同于java中String类中的trim()方法)；
3..lazy：取代input的change(值改变)和blur(失去焦点)的结合事件；
（1）注意，在使用.lazy后缀之后，当前页面中所有的input标签都会受到影响。
4.案例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>简单计算器</title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">数值A:<input type="text" v-model.trim="num1" /><br />数值B:<input type="text" v-model.trim="num2" /><br />lazy测试:<input type="text" v-model.lazy="test()" /><br /></div><script type="text/javascript">var vue = new Vue({el:"#app",data:{num1:"", //双向绑定只能赋值为字符串num2:"",result:""},methods:{test(){alert("失去焦点")}}})</script></body>
</html>六、计算属性
1.计算属性就是会将函数中的一些结果计算好并返回回来，我们可以直接调用
2.写计算属性，我们会有一个写计算属性的空间，这个空间和el、data、methods、mounted等等同级
3.格式：computed:{}
4.computed的大括号中写的都是函数
5.常用函数
（1）split()：切分字符串，括号中写入的是切分的标准
（2）reverse()：反转数组中的内容
（3）join()：将反转之后的字符使用特定的符号连接起来，括号中写入的是连接符号
6.计算属性调用和函数调用的区别：
（1）计算属性通过插值调用时不需要加括号，但是函数调用需要加括号。
（2）计算属性是有缓存的，也就是说，只要你要计算的属性没有发送改变，那么当我们多次调用这个计算属性中的函数的时候，它只会返回上一次的计算结果，而不会重新计算，也就是不必再次执行函数；而函数调用是没有缓存的，没有调用都会重新计算结果。
7.案例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>计算属性</title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">计算属性:{{getResult}} <!-- 计算属性调用，只写函数名称，不需要写括号 --><br />函数调用:{{reverseMessage()}}</div><script>var vue = new Vue({el:"#app",data:{msg:"Hello Vue"},methods:{reverseMessage:function(){return this.msg.split("").reverse().join("");}},mounted() {},computed:{ //写计算属性的空间getResult(){/*split("")是使用空白符，切分Hello Vue;reverse()是反转,join是将反转之后的每个字母连接起来split()相当于java中String类中的split(String regex)方法*/// return this.msg.split("") //-->[ "H", "e", "l", "l", "o", " ", "V", "u", "e" ] // return this.msg.split("").reverse() //-->[ "e", "u", "V", " ", "o", "l", "l", "e", "H" ] return this.msg.split("").reverse().join(""); //-->euV olleH }}})</script></body>
</html>七、实现输入同步
1.案例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">姓:<input type="text" v-model="firstname" /><br />名:<input type="text" v-model="secondname" /><br />字:<input type="text" v-model="lastname" /><br />{{getLastName}}<br />{{LastName()}}</div><script>var vue = new Vue({el:"#app",data:{firstname:"",secondname:"",lastname:""},methods:{LastName(){return this.firstname + this.secondname + this.lastname}},mounted() {},computed:{ //写计算属性的空间getLastName(){return this.firstname + this.secondname + this.lastname}}})</script></body>
</html>八、监听属性
1.watch与change事件相似
2.watch与el、data、methods、computed、mounted等也是同一级别的
3.格式：watch:{}
4.watch中的函数名是你要监听的变量的变量名，也就是说watch中的函数名要和你要监听的变量的名称是相同的，当你监听的变量的值发生改变的时候，会调用这个函数
5.案例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>监听属性</title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">姓:<input type="text" v-model="firstname" /><br />名:<input type="text" v-model="secondname" /><br />字:<input type="text" v-model="lastname" /><br />{{fullname}}</div><script>var vue = new Vue({el:"#app",data:{firstname:"",secondname:"",lastname:"",fullname:""},methods:{},mounted() {},computed:{ //写计算属性的空间},watch:{ //监听属性,有点像onchange事件/*当前函数的名称是变量firstname:表示监听firstname双向绑定的输入框当firstname的输入框中的值发生改变时,当前这个函数就会被触发*/firstname(){this.fullname = this.firstname + this.secondname + this.lastname;},secondname(){this.fullname = this.firstname + this.secondname + this.lastname;},lastname(){this.fullname = this.firstname + this.secondname + this.lastname;}}})</script></body>
</html>