一：全局过滤器和局部过滤器
ps：不管是局部过滤器还是全局过滤器，一定都要有renturn 返回
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VUE的过滤器</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <span>{{num|f2|}}</span> <br> <span>{{text|trans}}</span> <br> <span>{{num|f2|f3}}</span> <!-- 调用多个过滤器 --> <br> <span>{{text_02|f4 }}</span> </div> <script> // 不管是局部过滤器还是全局过滤器，一定都要有renturn 返回 // 01 在全局定义自定义过滤器，这样全局的对象都可以使用 Vue.filter("f2", function (value) { //全局过滤器，/ 在Vue对象调用过滤器时过滤的内容 //过滤器名字 函数（value值），会将对象的值调用到value中，然后进行过滤，再返回给视图 console.log("f2的过滤器。。。。", value); return value.toFixed(2) // 保留两位小数 }); Vue.filter("f3", function (value) { console.log("f3的过滤器。。。", value); return value + "RMB.." }); Vue.filter("f4", function (value) { console.log("f4的过滤器。。。", value); //用过滤器进行简单的判断 if (value < 0) { return "数字小于0" } else { return "数字大于0" } }); let vm = new Vue({ el: "#app", data: { num: 10.33333, text: "hello world", text_02: 0.2345, }, methods: {}, // 局部过滤器 filters: { //局部过滤器 trans: function (value) { return value.toUpperCase(); //小写字母换成大写 } } }) </script> </body> </html>
二：事件冒泡
01：小案例说明
ps：<!-- 在div1块里包含div2，div3里面包含div3，div3包含p标签的时候，我们将鼠标移动到文本上， 会依次弹出div3 div2 div1的弹出框，绑定的事件一次次往外展开，这个就是事件冒泡 --> <body> <div id="div1" onclic="alert('双击999')" onmouseover="alert('div1')"> <div class="div2" onmouseover="alert('div2')"> <div class="div3" onmouseover="alert('div3')"> <p>点击试一试。</p> </div> </div> </div> </body>
02：小案例：模仿模态对话框 -->@click.stop=""
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止事件冒泡</title> <script src="js/vue.js"></script> <style> .d1 { height: 1000px; } .box { width: 300px; height: 160px; border: 1px solid black; margin: auto; bottom: 0; right: 0; left: 0; top: 0; position: fixed; padding-bottom: 10px; padding-left: 30px; padding-right: 10px; padding-top: 10px; } .contain{ background: rgba(0,0,0,0.7); width: 100%; margin: auto; position: fixed; top:0; bottom:0; left:0; right:0; } </style> <!-- 前三个数是rgb颜色，第四个参数是透明度，当将上下左右距离都相同的时候，窗口就会固定在正中间 --> </head> <body> <div id="d1"> <h2 @click="is_show=true">点击</h2> <div class="contain" v-show="is_show" @click="is_show=false"> <div class="box" @click.stop=""> <!-- 这里 点击的范围是会在box中，其他的地方点击不会发生点击事件，不会衍生到父类中的div中去 --> <br><br> 用户名：<input type="text"><br><br> 密码：<input type="password"><br><br> <input type="submit" value="确认"> </div> </div> </div> <script> let vm=new Vue({ el:"#d1", data:{ is_show:false, } }) </script> </body> </html>
03：页面不刷新
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止事件冒泡</title> <script src="js/vue.js"></script> </head> <body> <div class="app"> <a href="https://www.baidu.com/">百度啊</a> <br> <!--页面刷新 --> <!-- 超链接表单中的提交,希望阻止页面刷新,可以使用 @事件.prevent="" --> <a href="" @click.prevent="">百度不刷新</a> <!-- 怎么跳转到新的页面？？？？--> </div> <script> let vm=new Vue({ el:".app", data:{ links:"https://www.baidu.com/", } }) </script> </body> </html>
三:VUE的数据侦听属性 watch:{ 要观察的变量名:function(变化后的值，变化前的值){ 可写判断语句 } }
01：VUE对象的侦听属性
侦听属性，可以帮助我们侦听data某个数据的变化，从而做相应的自定义操作。侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数，当侦听的data数据发生变化时，
会自定执行的对应函数，这个函数在被调用时，vue会传入两个形参，第一个是变化前的数据值，第二个是变化后的数据值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VUE的侦听属性</title> <script src="js/vue.js"></script> </head> <body> <div class="d1"> <span @click="num--">-</span> <input type="text" v-model="num"> <span @click="num++">+</span> </div> <script> let vm = new Vue({ el: ".d1", data: { num: 0, }, watch: { /* 要观察的变量名:function(变化后的值，变化前的值){ } */ num: function (v_new, v_old) { if (v_new < 0) { this.num = 0 } } } }) </script> </body> </html>
02：VUE的对象的计算属性
如果直接把反转的代码写在元素中，则会使得其他同事在开发时时不易发现数据被调整了，所以vue提供了一个计算属性(computed)， 可以让我们把调整data数据的代码存在在该属性中
001：字符串反转：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VUE对象的字符串反转</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <span>{{text01}}</span><br><br> <span>{{f1}}</span> </div> <script> let vm=new Vue({ el:"#app", data:{ text01:"are UU ok ??", }, computed: { f1: function (value) { return this.text01.split("").reverse().join("+") }, } }); </script> <script> //浏览器调试端可以看到打印反转后的内容 let str1 = "hello"; let reverse_str = str1.split('').reverse().join(""); console.log(reverse_str); </script> </body> </html>
四：vue对象的生命周期（执行过程）
每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数，我们可以使用这些函数， 在对象创建的不同阶段加上我们需要的代码，实现特定的功能。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VUE对象的字符串反转</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <span>{{text01}}</span><br><br> <span>{{f1}}</span> </div> <script> let vm=new Vue({ el:"#app", data:{ text01:"are UU ok ??", }, computed: { f1: function (value) { return this.text01.split("").reverse().join("+") }, } }); </script> <script> //浏览器调试端可以看到打印反转后的内容 let str1 = "hello"; let reverse_str = str1.split('').reverse().join(""); console.log(reverse_str); </script> </body> </html>
总结：
在vue使用的过程中，如果要初始化操作，把初始化操作的代码放在 mounted 中执行。
mounted阶段就是在vm对象已经把data数据实现到页面以后。一般页面初始化使用。例如，用户访问页面加载成功以后，就要执行的ajax请求。
另一个就是created，这个阶段就是在 vue对象创建以后，把ajax请求后端数据的代码放进 created
五：通过axios实现数据请求
数据接口，也叫api接口，表示`后端提供`操作数据/功能的url地址给客户端使用。
客户端通过发起请求向服务端提供的url地址申请操作数据【操作一般：增删查改】
同时在工作中，大部分数据接口都不是手写，而是通过函数库/框架来生成
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue对象生命周期</title> <script src="js/vue.js"></script> <script src="js/axios.js"></script> <!-- 这个必须要要卸载vue.js插件的后面 --> <!-- 可以先从官网上下载这个axios.js插件 https://unpkg.com/axios@0.18.0/dist/axios.js https://unpkg.com/axios@0.18.0/dist/axios.min.js --> </head> <body> <div id="d1"> 请输入需要查询的城市<input type="text" v-model="city"><br><br> <button @click="getWeather">点击查询天气结果</button> <p>{{ganmao}}</p> </div> <script> let vm = new Vue({ el: "#d1", data: { city: "深圳", //可写成默认是深圳 ganmao: "", weather_info: "", }, methods: { getWeather: function () { // 在这里编写ajax // axios是一个对象 // axios.get(url地址).then(function(){}) 发送get请求获取数据 // axios.post() 发送post请求上传数据 // 进入ajax之前,保存vue对象到一个变量里面,方便在ajax内部使用 this _this = this; axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.city) .then(function (response) { console.log(response); //从接口获得返回的数据 console.log("ajax内部的匿名函数", this); _this.ganmao = response.data.data.ganmao }).catch(function (error) { //捕捉发生的错误，error 里面会包含错误信息 console.log(error) }) } } }) </script> </body> </html>
六：同源策略
01: 同源策略，是浏览器为了保护用户信息安全的一种安全机制。所谓的同源就是指代通信的两个地址（例如服务端接口地址与浏览器客户端页面地址）
之间比较，是否协议、域名(IP)和端口相同。不同源的客户端脚本[javascript]在没有明确授权的情况下，没有权限读写对方信息。
ajax本质上还是javascript，是运行在浏览器中的脚本语言，所以会被受到浏览器的同源策略所限制。
前端地址：`http://www.onetom.cn/index.html` | 是否同源 | 原因 |
| ------------------------------------------- | -------- | ------------------------ |
| `http://www.onetom.cn/user/login.html` | 是 | 协议、域名、端口相同 |
| `http://www.onetom.cn/about.html` | 是 | 协议、域名、端口相同 |
| `https://www.onetom.cn/user/login.html` | 否 | 协议不同 ( https和http ) |
| `http:/www.onetom.cn:5000/user/login.html` | 否 | 端口 不同( 5000和80) |
| `http://bbs.onetom.cn/user/login.html` | 否 | 域名不同 ( bbs和www ) |
同源策略针对ajax的拦截，代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.12.4.js"></script> <script> $(function(){ $("#btn").on("click",function(){ $.ajax({ url: 'http://weatherapi.market.xiaomi.com/wtr-v2/weather', type: 'get', dataType: 'json', data:{ "cityId":101010100 } }) .done(function(resp) { // 请求成功以后的操作 console.log(resp); }) .fail(function(error) { // 请求失败以后的操作 console.log(error); }); }); }) </script> </head> <body> <button id="btn">点击获取数据</button> </body> </html>
02:ajax跨域(跨源)方案之CORS
CORS是一个W3C标准，全称是"跨域资源共享"，它允许浏览器向跨源的后端服务器发出ajax请求，从而克服了AJAX只能同源使用的限制。 实现CORS主要依靠后端服务器中响应数据中设置响应头信息返回的。 response = new Response() response .set_header("") // 在响应行信息里面设置以下内容： Access-Control-Allow-Origin: ajax所在的域名地址 Access-Control-Allow-Origin: www.oldboy.cn # 表示只允许www.oldboy.cn域名的客户端的ajax跨域访问 // * 表示任意源，表示允许任意源下的客户端的ajax都可以访问当前服务端信息 Access-Control-Allow-Origin: *
03:同源策略的解决方案总结：
0. 同源策略：浏览器的一种保护用户数据的一种安全机制。 浏览器会限制脚本语法不能跨源访问其他源的数据地址。 同源：判断两个通信的地址之间，是否协议，域名[IP]，端口一致。 ajax： http://127.0.0.1/index.html api数据接口： http://localhost/index 这两个是同源么？不是同源的。 1. ajax默认情况下会受到同源策略的影响，一旦受到影响会报错误如下： No 'Access-Control-Allow-Origin' header is present on the requested resource 2. 解决ajax只能同源访问数据接口的方式： 3. 在服务端的响应行中设置： Access-Control-Allow-Origin: 允许访问的域名地址