一:过滤器
1. 定义: 过滤器，就是vue允许开发者自定义的文本格式化函数，可以使用在两个地方：输出内容和操作数据中。
定义过滤器的方式有两种。
2.使用vue.filter()进行全局定义
Vue.filter("RMB1", function(v){
//就是来格式化(处理)v这个数据的
if(v==0){
return v
}
return v+"元"
})
3. 在vue对象中通过filters属性来定义
var vm = new Vue({
el:"#app",
data:{},
filters:{
RMB2:function(value){
if(value==''){
return;
}else{
return '¥ '+value;
}
}
}
});
4. 案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue/vue.js"></script> </head> <body> <div id="app"> <span>{{num|f2|RBM}}</span> <!-- 保留两位小数及尾部追加"元"--> <br> <span>{{text|trans}}</span> <!-- 转换成大写--> </div> <script> //全局过滤器 //用于过滤用户输入的数据或者格式化文本 Vue.filter("f2",function (value) { //在vue的对象调用过滤器时过滤的内容 //必须要使用return 把过滤后的内容返回 //js提供的toFixed() return value.toFixed(2) }); Vue.filter("RBM",function (value) {//在vue的对象调用过滤器时过滤的内容 return value +"元"; }); let vm=new Vue({ el:"#app", data:{ num:10.33333, text:"hello world", }, methods:{ }, filters:{ trans:function (value) { //必须使用return 把过滤后的内容返回 return value.toUpperCase(); } } }) </script> </body> </html>
二. 阻止事件冒泡和刷新页面
1. 事件冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件冒泡</title> </head> <body> <div class="div1" onclick="alert('双加666')" onmouseover="alert('div1')"> <div class="div2" onmouseover="alert('div2')"> <div class="div3" onmouseover="alert('div3')"> <p>点我呀~</p> </div> </div> </div> <script> //事件冒泡就是指点击的事件会触发父及标签执行事件,就像从里往外执行,俗称冒泡
//即:从p标签到最外层标签都会执行事件
</script> </body> </html>
2. 阻止事件冒泡
在事件绑定的时候,vue.js提供了一个属性.top可以帮助我们阻止事件往外传播.
案例
扫描二维码关注公众号，回复：
5499901 查看本文章
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <style> .box{ background-color: #fff; border-radius: 5px; /* 边框圆角 */ padding-top: 15px; padding-left: 30px; padding-bottom: 15px; width: 290px; height: 160px; position: fixed; margin: auto; left: 0px; right: 0px; top:0; bottom: 0; } .container{ background: rgba(0,0,0,0.6); width: 100%; margin:auto; position: fixed; top:0; left: 0; bottom:0; right:0; } </style> </head> <body> <div id="app"> <h1 @click="is_show=true">显示</h1> <div class="container" v-show="is_show" @click="is_show=false"> <div class="box" @click.stop=""> 账号: <input type="text"><br><br> 密码: <input type="password"><br><br> <input type="submit" vlaue="提交"> </div> </div> </div> <script> let vm = new Vue({ el:"#app", data:{ is_show:false, }, methods:{ }, }) </script> </body> </html>
3. 阻止页面刷新
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <!-- 超链接\表单中的提交,希望阻止页面刷新,可以使用 @事件.prevent="" --> <a href="" @click.prevent="">百度</a> </div> <script> let vm = new Vue({ el:"#app", data:{ }, }) </script> </body> </html>
使用.stop终止事件冒泡和.prevent阻止表单提交的例子
案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box1{ width: 200px; height: 200px; background: #ccc; } .box2{ width: 100px; height: 100px; background: pink; } </style> <script src="js/vue.min.js"></script> <script> window.onload = function(){ var vm = new Vue({ el:"#app", data:{} }) } </script> </head> <body> <div id="app"> <div class="box1" @click="alert('box1')"> <div class="box2" @click.stop.prevent="alert('box2')"></div> <!-- @click.stop来阻止事件冒泡 --> </div> <form action="#"> <input type="text"> <input type="submit"> <input type="submit" value="提交02" @click.prevent=""> <!-- @click.prevent来阻止表单提交 --> </form> </div> </body> </html>
三: 计算和侦听属性
1, 字符串反转
<script> let str1 = "hello"; let reverse_str = str1.split('').reverse().join(""); console.log(reverse_str); </script>
2. 如果直接把反转的代码写在元素中，则会使得其他同事在开发时时不易发现数据被调整了，所以vue提供了一个计算属性(computed)，可以让我们把调整data数据的代码存在在该属性中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.min.js"></script> <script> window.onload = function(){ var vm = new Vue({ el:"#app", data:{ str1: "abcdefgh" }, computed:{ //计算属性：里面的函数都必须有返回值 strRevs: function(){ var ret = this.str1.split("").reverse().join(""); return ret } } }); } </script> </head> <body> <div id="app"> <p>{{ str1 }}</p> <p>{{ strRevs }}</p> </div> </body> </html>
3. 监听属性
侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数，当侦听的data数据发生变化时，会自定执行的对应函数，这个函数在被调用时，vue会传入两个形参，第一个是变化前的数据值，第二个是变化后的数据值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <span @click="num--">-</span> <input type="text" size="1" v-model="num"> <span @click="num++">+</span> </div> <script> // 侦听属性 // 这里的属性是指代data中的数据 let vm = new Vue({ el:"#app", data:{ num:0 }, // watch里面的方法，会在数据发生变化时，自动执行 watch:{ /** * 要观察的变量名: function(变化后的值,变化前的值){ * * } */ num: function(v1,v2){ if(v1<0){ this.num=0; } } } }) </script> </body> </html>
4. vue的计算属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <!--<script>--> <!--let str1 = "hello";--> <!--let reverse_str = str1.split('').reverse().join("");--> <!--console.log(reverse_str);--> <!--</script>--> <div id="app"> <span>{{str1}}</span><br> <span>{{computed_str1}}</span> </div> <script> var vm = new Vue({ el:"#app", data: { str1:'hello world', }, // 计算属性 computed: { computed_str1: function(value){ return "计算后的内容："+this.str1.split("").reverse().join(""); } } }) </script> </body> </html>
四: vue对象的生命周期
每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数，我们可以使用这些函数，在对象创建的不同阶段加上我们需要的代码，实现特定的功能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <p>{{num}}</p> </div> <script> // 侦听属性 // 这里的属性是指代data中的数据 let vm = new Vue({ el:"#app", data:{ num:10 }, // vm对象初始化之前，此时el和data还没有出现 beforeCreate: function(){ console.log("beforeCreate在vm对象初始化之前，此时el和data还没有出现"); console.log(this.$el); // this..$el 查看上面vue对象操作的标签控制器 console.log(this.$data); // this.$data 查看上面vue对象保存的data，访问bum这些数据时没有的 }, // vm对象初始化之后， created: function(){ console.log('created在vm对象初始化之后执行了，此时$el没有，但是已经有data数据了'); console.log(this.$el); console.log(this.$data); console.log( this.num ); // 开发项目时，在这个函数中，编写向后台请求数据的代码，这些代码不涉及到视图html标签的操作 // ajax }, // 把data数据挂载到html视图之前 beforeMount: function(){ console.log('beforeMount执行了，此时vue并没有把data数据挂载到html视图中，所以$el还是源码中的vue指令'); console.log(this.$el.innerHTML); console.log(this.$data); // $data早已经有了 }, // 把data数据挂载到html视图之后 mounted: function(){ console.log('mounted执行了，此时vue已经把data数据挂载到html视图中了，所以$el就是挂载后的数据'); console.log(this.$el.innerHTML); // 这个位置用于编写初始化中操作html内容的代码 } }) </script> </body> </html>
在vue使用的过程中，如果要初始化操作，把初始化操作的代码放在 mounted 中执行。
mounted阶段就是在vm对象已经把data数据实现到页面以后。一般页面初始化使用。例如，用户访问页面加载成功以后，就要执行的ajax请求。
另一个就是created，这个阶段就是在 vue对象创建以后，把ajax请求后端数据的代码放进 created
五通过axios实现数据请求
1.概念:
所以使用vue的时候，一般都会使用axios的插件来实现ajax与后端服务器的数据交互。
注意，axios本质上就是javascript的ajax封装，所以会被同源策略限制。
下载地址:
https://unpkg.com/[email protected]/dist/axios.js
https://unpkg.com/[email protected]/dist/axios.min.js
2. axios提供发送请求的常用方法有两个：axios.get() 和 axios.post()
// 发送get请求 // 参数1: 必填，字符串，请求的数据接口的url地址 // 参数2：必填，json对象，要提供给数据接口的参数 // 参数3：可选，json对象，请求头信息 axios.get('/user',{ ID:'12345', }) .then(function (response) { // 请求成功以后的回调函数 console.log("请求成功"); console.log(response); }) .catch(function (error) { // 请求失败以后的回调函数 console.log("请求失败"); console.log(error); }); // 发送post请求，参数和使用和axios.get()一样。 axios.post('/user',{ params:{ firstName: 'Fred', lastName: 'Flintstone' } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // b'firstName=Fred&lastName=Flintstone'
3. json
son的作用：在不同的系统平台，或不同编程语言之间传递数据。