一: 过滤器

1. 定义:    过滤器，就是vue允许开发者自定义的文本格式化函数，可以使用在两个地方：输出内容和操作数据中。

定义过滤器的方式有两种。

2.使用vue.filter()进行全局定义

  1. Vue.filter("RMB1", function(v){
  2.       //就是来格式化(处理)v这个数据的
  3.       if(v==0){
  4.             return v
  5.       }
  6.       return v+"元"
  7. })

过滤器的全局定义

3. 在vue对象中通过filters属性来定义

  1. var vm = new Vue({
  2.   el:"#app",
  3.   data:{},
  4.   filters:{
  5.     RMB2:function(value){
  6.       if(value==''){
  7.         return;
  8.       }else{
  9.           return '¥ '+value;
  10.       }
  11.     }
  12.     }
  13. });

过滤器的属性定义

4. 案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="vue/vue.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <span>{{num|f2|RBM}}</span> <!-- 保留两位小数及尾部追加"元"-->
  11.         <br>
  12.         <span>{{text|trans}}</span>   <!-- 转换成大写-->
  13.     </div>
  14.     <script>
  15.          //全局过滤器
  16.         //用于过滤用户输入的数据或者格式化文本
  17.         Vue.filter("f2",function (value) { //在vue的对象调用过滤器时过滤的内容
  18.             //必须要使用return 把过滤后的内容返回
  19.             //js提供的toFixed()
  20.             return value.toFixed(2)
  21.         });
  22.         Vue.filter("RBM",function (value) {//在vue的对象调用过滤器时过滤的内容
  23.             return value +"元";
  24.         });
  25.         let vm=new Vue({
  26.             el:"#app",
  27.             data:{
  28.                 num:10.33333,
  29.                 text:"hello world",
  30.             },
  31.             methods:{
  32.  
  33.             },
  34.             filters:{
  35.                 trans:function (value) {
  36.                     //必须使用return 把过滤后的内容返回
  37.                     return value.toUpperCase();
  38.                 }
  39.             }
  40.         })
  41.     </script>
  42.  
  43. </body>
  44. </html>

过滤器的应用案例

二:  阻止事件冒泡和刷新页面

1. 事件冒泡

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>事件冒泡</title>
  6. </head>
  7. <body>
  8.     <div class="div1" onclick="alert('双加666')" onmouseover="alert('div1')">
  9.         <div class="div2"  onmouseover="alert('div2')">
  10.             <div class="div3"  onmouseover="alert('div3')">
  11.                 <p>点我呀~</p>
  12.             </div>
  13.         </div>
  14.     </div>
  15.     <script>
  16. //事件冒泡就是指点击的事件会触发父及标签执行事件,就像从里往外执行,俗称冒泡
    //即:从p标签到最外层标签都会执行事件
  17.     </script>
  18. </body>
  19. </html>

2. 阻止事件冒泡

　　在事件绑定的时候,vue.js提供了一个属性.top可以帮助我们阻止事件往外传播.

案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/vue.js"></script>
  7.     <style>
  8.     .box{
  9.         background-color: #fff;
  10.         border-radius: 5px;  /* 边框圆角 */
  11.         padding-top: 15px;
  12.         padding-left: 30px;
  13.         padding-bottom: 15px;
  14.         width: 290px;
  15.         height: 160px;
  16.         position: fixed;
  17.         margin: auto;
  18.         left: 0px;
  19.         right: 0px;
  20.         top:0;
  21.         bottom: 0;
  22.     }
  23.     .container{
  24.         background: rgba(0,0,0,0.6);
  25.         width: 100%;
  26.         margin:auto;
  27.         position: fixed;
  28.         top:0;
  29.         left: 0;
  30.         bottom:0;
  31.         right:0;
  32.     }
  33.     </style>
  34. </head>
  35. <body>
  36.     <div id="app">
  37.         <h1 @click="is_show=true">显示</h1>
  38.         <div class="container" v-show="is_show" @click="is_show=false">
  39.             <div class="box" @click.stop="">
  40.                 账号: <input type="text"><br><br>
  41.                 密码: <input type="password"><br><br>
  42.                 <input type="submit" vlaue="提交">
  43.            </div>
  44.         </div>
  45.     </div>
  46.     <script>
  47.  
  48.         let vm = new Vue({
  49.             el:"#app",
  50.             data:{
  51.                 is_show:false,
  52.             },
  53.             methods:{
  54.  
  55.             },
  56.         })
  57.     </script>
  58. </body>
  59. </html>

阻止事件冒泡的案例

3. 阻止页面刷新

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/vue.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <!-- 超链接\表单中的提交,希望阻止页面刷新,可以使用 @事件.prevent="" -->
  11.         <a href="" @click.prevent="">百度</a>
  12.     </div>
  13.     <script>
  14.  
  15.         let vm = new Vue({
  16.             el:"#app",
  17.             data:{
  18.             },
  19.  
  20.         })
  21.     </script>
  22. </body>
  23. </html>

阻止页面刷新

　　使用.stop终止事件冒泡和.prevent阻止表单提交的例子

案例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .box1{
  8.             width: 200px;
  9.             height: 200px;
  10.             background: #ccc;
  11.         }
  12.         .box2{
  13.             width: 100px;
  14.             height: 100px;
  15.             background: pink;
  16.         }
  17.     </style>
  18.     <script src="js/vue.min.js"></script>
  19.     <script>
  20.     window.onload = function(){
  21.         var vm = new Vue({
  22.             el:"#app",
  23.             data:{}
  24.         })
  25.     }
  26.     </script>
  27. </head>
  28. <body>
  29.     <div id="app">
  30.         <div class="box1" @click="alert('box1')">
  31.             <div class="box2" @click.stop.prevent="alert('box2')"></div>   <!-- @click.stop来阻止事件冒泡 -->
  32.         </div>
  33.  
  34.         <form action="#">
  35.             <input type="text">
  36.             <input type="submit">
  37.             <input type="submit" value="提交02" @click.prevent=""> <!-- @click.prevent来阻止表单提交 -->
  38.         </form>
  39.     </div>
  40.  
  41. </body>
  42. </html>

案例

三: 计算和侦听属性

1, 字符串反转

  1. <script>
  2.     let str1 = "hello";
  3.     let reverse_str = str1.split('').reverse().join("");
  4.     console.log(reverse_str);
  5. </script>

2. 如果直接把反转的代码写在元素中，则会使得其他同事在开发时时不易发现数据被调整了，所以vue提供了一个计算属性(computed)，可以让我们把调整data数据的代码存在在该属性中。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/vue.min.js"></script>
  7.         <script>
  8.         window.onload = function(){
  9.         var vm = new Vue({
  10.             el:"#app",
  11.             data:{
  12.                 str1: "abcdefgh"
  13.             },
  14.             computed:{   //计算属性：里面的函数都必须有返回值
  15.                 strRevs: function(){
  16.                     var ret = this.str1.split("").reverse().join("");
  17.                     return ret
  18.                 }
  19.             }
  20.         });
  21.     }
  22.     </script>
  23. </head>
  24. <body>
  25.     <div id="app">
  26.          <p>{{ str1 }}</p>
  27.          <p>{{ strRevs }}</p>
  28.     </div>
  29. </body>
  30. </html>

vue的字符串反转案例

3. 监听属性

侦听属性，可以帮助我们侦听data某个数据的变化，从而做相应的自定义操作。

侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数，当侦听的data数据发生变化时，会自定执行的对应函数，这个函数在被调用时，vue会传入两个形参，第一个是变化前的数据值，第二个是变化后的数据值。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="vue/vue.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <span @click="num--">-</span>
  11.         <input type="text" size="1" v-model="num">
  12.         <span @click="num++">+</span>
  13.     </div>
  14.  
  15.     <script>
  16.         //侦听属性  //这里的属性是指data中的数据
  17.         let vm = new Vue({
  18.             el:"#app",
  19.             data:{
  20.                 num:0
  21.             },
  22.             //watch 中的方法,会在数据变化时自动执行
  23.             watch:{
  24.                 /**需观察变量名:function(变化后的值,变化前的值)*/
  25.                 num: function (v1,v2) {
  26.                     if(v1<0){ //监听nun变化的值是否小于0,如果小于0则赋值为0
  27.                         this.num=0;
  28.                     }
  29.                 }
  30.             }
  31.         })
  32.  
  33.     </script>
  34. </body>
  35. </html>

侦听属性

4. vue的计算属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/vue.js"></script>
  7. </head>
  8. <body>
  9. <!--<script>-->
  10.     <!--let str1 = "hello";-->
  11.     <!--let reverse_str = str1.split('').reverse().join("");-->
  12.     <!--console.log(reverse_str);-->
  13. <!--</script>-->
  14.  
  15.     <div id="app">
  16.         <span>{{str1}}</span><br>
  17.         <span>{{computed_str1}}</span>
  18.     </div>
  19. <script>
  20.     var vm = new Vue({
  21.         el:"#app",
  22.         data: {
  23.             str1:'hello world',
  24.         },
  25.         //  计算属性
  26.         computed: {
  27.             computed_str1: function(value){
  28.                 return "计算后的内容："+this.str1.split("").reverse().join("");
  29.  
  30.             }
  31.         }
  32.     })
  33. </script>
  34. </body>
  35. </html>

计算属性案例

四: vue对象的生命周期

每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数，我们可以使用这些函数，在对象创建的不同阶段加上我们需要的代码，实现特定的功能。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="vue/vue.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <p>{{num}}</p>
  11.     </div>
  12.     <script>
  13.         let vm =new Vue({
  14.             el:"#app",
  15.             data:{num:10},
  16.             //vm对象初始化之前,此时el和data还没有出现
  17.             beforeCreate: function() {
  18.                 console.log("beforeCreate在vm对象初始化之前，此时el和data还没有出现");
  19.                 console.log(this.$el); // this..$el 查看上面vue对象操作的标签控制器
  20.                 console.log(this.$data); // this.$data 查看上面vue对象保存的data，访问bum这些数据时没有的
  21.             },
  22.              // vm对象初始化之后，
  23.             created: function(){
  24.                 console.log('created在vm对象初始化之后执行了，此时$el没有，但是已经有data数据了');
  25.                 console.log(this.$el);
  26.                 console.log(this.$data);
  27.                 console.log( this.num );
  28.                 // 开发项目时，在这个函数中，编写向后台请求数据的代码，这些代码不涉及到视图html标签的操作
  29.                 // ajax
  30.             },
  31.             // 把data数据挂载到html视图之前
  32.             beforeMount: function(){
  33.                 console.log('beforeMount执行了，此时vue并没有把data数据挂载到html视图中，所以$el还是源码中的vue指令');
  34.                 console.log(this.$el.innerHTML);
  35.                 console.log(this.$data); // $data早已经有了
  36.             },
  37.              // 把data数据挂载到html视图之后
  38.             mounted: function(){
  39.                 console.log('mounted执行了，此时vue已经把data数据挂载到html视图中了，所以$el就是挂载后的数据');
  40.                 console.log(this.$el.innerHTML);
  41.                 // 这个位置用于编写初始化中操作html内容的代码
  42.             }
  43.  
  44.         })
  45.  
  46.     </script>
  47. </body>
  48. </html>

vue对象生命周期及原理

分析展示

  1. 在vue使用的过程中，如果要初始化操作，把初始化操作的代码放在 mounted 中执行。
  2. mounted阶段就是在vm对象已经把data数据实现到页面以后。一般页面初始化使用。例如，用户访问页面加载成功以后，就要执行的ajax请求。
  3.  
  4. 另一个就是created，这个阶段就是在 vue对象创建以后，把ajax请求后端数据的代码放进 created

总结

五: 通过axios实现数据请求

1.概念:

vue.js默认没有提供ajax功能的。

所以使用vue的时候，一般都会使用axios的插件来实现ajax与后端服务器的数据交互。

注意，axios本质上就是javascript的ajax封装，所以会被同源策略限制。

下载地址:

https://unpkg.com/axios@0.18.0/dist/axios.js
https://unpkg.com/axios@0.18.0/dist/axios.min.js

2. axios提供发送请求的常用方法有两个：axios.get() 和 axios.post()

  1. // 发送get请求
  2.     // 参数1: 必填，字符串，请求的数据接口的url地址
  3.     // 参数2：必填，json对象，要提供给数据接口的参数
  4.     // 参数3：可选，json对象，请求头信息
  5.     axios.get('/user',{
  6.             ID:'12345',
  7.       })
  8.     .then(function (response) { // 请求成功以后的回调函数
  9.             console.log("请求成功");
  10.             console.log(response);
  11.     })
  12.     .catch(function (error) {   // 请求失败以后的回调函数
  13.             console.log("请求失败");
  14.             console.log(error);
  15.     });
  16.  
  17. // 发送post请求，参数和使用和axios.get()一样。
  18.     axios.post('/user',{
  19.         params:{
  20.             firstName: 'Fred',
  21.             lastName: 'Flintstone'
  22.         }
  23.     })
  24.     .then(function (response) {
  25.       console.log(response);
  26.     })
  27.     .catch(function (error) {
  28.       console.log(error);
  29.     });
  30.  
  31. // b'firstName=Fred&lastName=Flintstone'

例

3. json

　　概念: json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式。json的作用：在不同的系统平台，或不同编程语言之间传递数据。

4: json 数据的语法　

  1. json数据对象类似于JavaScript中的对象，但是它的键对应的值里面是没有函数方法的，值可以是普通变量，不支持undefined，值还可以是数组或者json对象。
  2.  
  3. ```json
  4. // json数据的对象格式：
  5. {
  6.     "name":"tom",
  7.     "age":18
  8. }
  9.  
  10. // json数据的数组格式：
  11. ["tom",18,"programmer"]
  12. ```
  13.  
  14. 复杂的json格式数据可以包含对象和数组的写法。
  15.  
  16. ```json
  17. {
  18.   "name":"小明",
  19.   "age":200,
  20.   "fav":["code","eat","swim","read"],
  21.   "son":{
  22.     "name":"小小明",
  23.     "age":100,
  24.   }
  25. }
  26.  
  27. // 数组结构也可以作为json传输数据。
  28. ```
  29.  
  30. json数据可以保存在.json文件中，一般里面就只有一个json对象。
  31.  
  32. 总结：
  33.  
  34. ```json
  35. 1. json文件的后缀是json
  36. 2. json文件一般保存一个单一的json数据对象
  37. 3. json数据的属性不能是方法或者undefined，属性值只能：数值、字符串、对象和数组
  38. 4. json数据只使用双引号、每一个属性成员之间使用逗号隔开，并且最后一个成员没有逗号。
  39.    {
  40.       "name":"小明",
  41.       "age":200,
  42.       "fav":["code","eat","swim","read"],
  43.       "son":{
  44.         "name":"小小明",
  45.         "age":100
  46.       }
  47.     }
  48. ```

语法:

5: json数据的转换方法

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script>
  7.     var json_obj = {
  8.       "name":"小明",
  9.       "age":200,
  10.       "fav":["code","eat","swim","read"],
  11.       "son":{
  12.         "name":"小小明",
  13.         "age":100
  14.       }
  15.     };
  16.         // json对象转换成字符串格式的json数据
  17.     var data_str = JSON.stringify(json_obj);
  18.     console.log( data_str );
  19.         // 字符串格式的json数据转换成json对象
  20.     var data_json = JSON.parse(data_str);
  21.     console.log( data_json );
  22.     </script>
  23. </head>
  24. <body>
  25.  
  26. </body>
  27. </html>

代码

六: ajax

1.概念

  1. 1  ajax，一般中文称之为："阿贾克斯"，是英文 “Async Javascript And Xml”的简写，译作：异步js和xml数据传输数据。
  2. 2  ajax的作用： ajax可以让js代替浏览器向后端程序发送http请求，与后端通信，在用户不知道的情况下操作数据和信息，从而实现页面局部刷新数据/无刷新更新数据。
  3. 所以开发中ajax是很常用的技术，主要用于操作后端提供的`数据接口`，从而实现网站的`前后端分离`。
  4. 3  ajax技术的原理是实例化js的XMLHttpRequest对象，使用此对象提供的内置方法就可以与后端进行数据通信。

2: 数据接口

  1. 数据接口，也叫api接口，表示`后端提供`操作数据/功能的url地址给客户端使用。
  2. 客户端通过发起请求向服务端提供的url地址申请操作数据【操作一般：增删查改】
  3. 同时在工作中，大部分数据接口都不是手写，而是通过函数库/框架来生成。

3: 前后端分离

在开发Web应用中，有两种应用模式：

　　1 前后端不分离

　　2: 前后端分离

4: axjx使用

ajax的使用必须与服务端程序配合使用，但是目前我们先学习ajax的使用，所以暂时先不涉及到服务端python代码的编写。因此，我们可以使用别人写好的数据接口进行调用。jQuery将ajax封装成了一个函数$.ajax()，我们可以直接用这个函数来执行ajax请求。

编写代码获取接口提供的数据：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="vue/vue.js "></script>
  7.     <script src="vue/axios.js"></script>
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         请输入您要查询的城市: <input type="text" v-model="city">
  12.         <button @click="getWeather">点击获取天气</button>
  13.         <p>{{ganmao}}</p>
  14.     </div>
  15.     <script>
  16.         let vm=new Vue({
  17.             el:"#app",
  18.             data:{
  19.                 city:"深圳",
  20.                 ganmao:"",
  21.                 weather_info:""
  22.             },
  23.             methods:{
  24.                 getWeather:function () {
  25.                     //在这里编写ajax
  26.                     //axios是一个对象
  27.                     //axios.get(url地址).then(function(){}) 发送get请求获取数据
  28.                     //axios.post() 发送post请求上传数据
  29.                     //进入ajax之前,保存vue对象到一个变量里面,方便在ajax内部使用this
  30.                     _this=this;
  31.                     axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" +this.city)
  32.                         .then(function (response) { //会在ajax请求成功以后,自动只想
  33.                             //response 里面会包含后端返回的数据
  34.                             console.log("response",response);
  35.                             console.log("ajax内部的匿名函数:",this)
  36.                                 //this.ganmao=response.data.data.ganmao
  37.                             _this.ganmao=response.data.data.ganmao
  38.                         }).catch(function (error) {  //会在ajax请求失败后,自动执行
  39.                             //error里面会包含错误信息
  40.                             console.log(error);
  41.  
  42.                     })
  43.                 }
  44.             }
  45.         })
  46.  
  47.     </script>
  48. </body>
  49. </html>

使用axios操作数据接口

显示效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/jquery-1.12.4.js"></script>
  7.     <script>
  8.     $(function(){
  9.         $("#btn").on("click",function(){
  10.             $.ajax({
  11.                 // 后端程序的url地址
  12.                 url: 'http://wthrcdn.etouch.cn/weather_mini',
  13.                 // 也可以使用method，提交数据的方式，默认是'GET'，常用的还有'POST'
  14.                 type: 'get',
  15.                 dataType: 'json',  // 返回的数据格式，常用的有是'json','html',"jsonp"
  16.                 data:{ // 设置发送给服务器的数据，如果是get请求，也可以写在url地址的?后面
  17.                     "city":'北京'
  18.                 }
  19.             })
  20.             .done(function(resp) {     // 请求成功以后的操作
  21.                 console.log(resp);
  22.             })
  23.             .fail(function(error) {    // 请求失败以后的操作
  24.                 console.log(error);
  25.             });
  26.         });
  27.     })
  28.     </script>
  29. </head>
  30. <body>
  31. <button id="btn">点击获取数据</button>
  32. </body>
  33. </html>

jQ版本代码

  1. 1. 发送ajax请求，要通过$.ajax()，参数是对象，里面有固定的参数名称。
  2.    $.ajax({
  3.      "url":"数据接口url地址",
  4.      "method":"http请求方式，前端只支持get和post",
  5.      "dataType":"设置服务器返回的数据格式，常用的json，html，jsonp，默认值就是json",
  6.      // 要发送给后端的数据参数，post时，数据必须写在data，get可以写在data,也可以跟在地址栏?号后面
  7.      "data":{
  8.        "数据名称":"数据值",
  9.      }
  10.    }).then(function(resp){ // ajax请求数据成功时会自动调用then方法的匿名函数
  11.      console.log( resp ); // 服务端返回的数据
  12.    }).fail(function(error){ // ajax请求数据失败时会自动调用fail方法的匿名函数
  13.      console.log( error );
  14.    });
  15.  
  16. 2. ajax的使用往往配合事件操作进行调用。

总结：

5: jQuery还提供了$.get 和 $post简写$.ajax的操作。

  1. // 发送get请求
  2. // 参数1：数据接口的请求地址
  3. // 参数2：发送给接口地址的数据参数
  4. // 参数3：ajax请求成功以后，调用的匿名函数，匿名函数的第一个参数还是服务端返回的数据
  5. // 参数4：设置服务端返回的数据格式，告诉给jQuery
  6. $.get("test.php", { "func": "getNameAndTime" },
  7.    function(data){
  8.      alert(data.name); // John
  9.      console.log(data.time); //  2pm
  10.    }, "json");
  11.  
  12. // 发送post请求
  13. // 参数1：数据接口的请求地址
  14. // 参数2：发送给接口地址的数据参数
  15. // 参数3：ajax请求成功以后，调用的匿名函数，匿名函数的第一个参数还是服务端返回的数据
  16. // 参数4：设置服务端返回的数据格式，告诉给jQuery
  17. $.post("test.php", { "func": "getNameAndTime" },
  18.    function(data){
  19.      alert(data.name); // John
  20.      console.log(data.time); //  2pm
  21.    }, "json");

jquery 的ajax操作

七: 同源策略

  1. 1 同源策略，是浏览器为了保护用户信息安全的一种安全机制。所谓的同源就是指代通信的两个地址（例如服务端接口地址与浏览器客户端页面地址）之间比较，是否协议、域名(IP)和端口相同。不同源的客户端脚本[javascript]在没有明确授权的情况下，没有权限读写对方信息。
  2. 2 ajax本质上还是javascript，是运行在浏览器中的脚本语言，所以会被受到浏览器的同源策略所限制。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/jquery-1.12.4.js"></script>
  7.     <script>
  8.     $(function(){
  9.         $("#btn").on("click",function(){
  10.             $.ajax({
  11.                 url: 'http://weatherapi.market.xiaomi.com/wtr-v2/weather',
  12.                 type: 'get',
  13.                 dataType: 'json',
  14.                 data:{
  15.                     "cityId":101010100
  16.                 }
  17.             })
  18.             .done(function(resp) {     // 请求成功以后的操作
  19.                 console.log(resp);
  20.             })
  21.             .fail(function(error) {    // 请求失败以后的操作
  22.                 console.log(error);
  23.             });
  24.         });
  25.     })
  26.     </script>
  27. </head>
  28. <body>
  29. <button id="btn">点击获取数据</button>
  30. </body>
  31. </html>

同源策略针对ajax的拦截，代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/vue.js"></script>
  7.     <script src="js/axios.js"></script><!-- 写在vue后面 -->
  8. </head>
  9. <body>
  10.     <div id="app">
  11.         请输入您要查询的歌名: <input type="text" v-model="city">
  12.         <button @click="getWeather">点击获取歌曲信息</button>
  13.         <p>{{ganmao}}</p>
  14.     </div>
  15.     <script>
  16.         // 同源策略:
  17.         // 在浏览器页面运行过程中,
  18.         // 服务器和浏览器运行程序的地址要保持在同一个源下.
  19.         // 源:必须同样的域名, 同样的端口, 同样的协议
  20.         // ajax运行的前端地址: http://www.baidu.com/get_user
  21. // 服务器:     https://blog.baidu.com/get_user                     不同源,[端口一样,域名不同,协议不同,]
  22. // 服务器:     http://blog.sina.com/get_user                       不同源,[端口一样,域名不同,协议相同,]
  23. // 服务器:     http://www.baidu.com/v1/get_user                        同源,[端口一样,域名一样,协议相同,]
  24.  
  25.         let vm = new Vue({
  26.             el:"#app",
  27.             data: {
  28.                 city:"",
  29.                 ganmao:"",
  30.                 weather_info:""
  31.             },
  32.             methods: {
  33.                 getWeather: function(){
  34.                     _this = this;
  35.                     axios.get("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query="+this.city)
  36.                         .then(function(response){  // 会在ajax请求成功过以后，自动执行
  37.                             console.log(response);
  38.                             console.log("ajax内部的匿名函数:",this);
  39.  
  40.                             _this.ganmao = response.data.data.ganmao
  41.                         }).catch(function(error){ // 会在ajax请求失败过后,自动执行
  42.                             console.log(error);
  43.                         })
  44.                 }
  45.             }
  46.         })
  47.     </script>
  48. </body>
  49. </html>

同源策略的拦截,基于vue代码

效果:

2 ajax跨域(跨源)方案之CORS

  1.    1 CORS是一个W3C标准，全称是"跨域资源共享"，它允许浏览器向跨源的后端服务器发出ajax请求，从而克服了AJAX只能同源使用的限制。
  2.  
  3. ​     2  实现CORS主要依靠后端服务器中响应数据中设置响应头信息返回的。
  4. 　　　　response = new Response()
  5. 　　　　response .set_header("")
  1. // 在响应行信息里面设置以下内容：
  2. Access-Control-Allow-Origin: ajax所在的域名地址
  3.  
  4. Access-Control-Allow-Origin: www.oldboy.cn  # 表示只允许www.oldboy.cn域名的客户端的ajax跨域访问
  5.  
  6. // * 表示任意源，表示允许任意源下的客户端的ajax都可以访问当前服务端信息
  7. Access-Control-Allow-Origin: *

  1. 0. 同源策略：浏览器的一种保护用户数据的一种安全机制。
  2.    浏览器会限制脚本语法不能跨源访问其他源的数据地址。
  3.    同源：判断两个通信的地址之间，是否协议，域名[IP]，端口一致。
  4.  
  5.    ajax：  http://127.0.0.1/index.html
  6.    api数据接口：  http://localhost/index
  7.  
  8.    这两个是同源么？不是同源的。
  9.  
  10. 1. ajax默认情况下会受到同源策略的影响，一旦受到影响会报错误如下：
  11.      No 'Access-Control-Allow-Origin' header is present on the requested resource
  12.  
  13. 2. 解决ajax只能同源访问数据接口的方式：
  14.    1. 在服务端的响应行中设置：
  15.       Access-Control-Allow-Origin: 允许访问的域名地址

总结

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="vue/vue.js"></script>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <select  v-model="province">
  11.             <option value="0">省份</option>
  12.             <option v-for="item in area_list" v-if ="item.pid==0" :value="item.id">{{item.name}}</option>
  13.         </select>
  14.         <select v-model="city">
  15.             <option value="0">城市</option>
  16.             <option v-for="item in area_list" v-if="item.pid==province" :value="item.id">{{item.name}}</option>
  17.         </select>
  18.         <select v-model="area">
  19.             <option value="0">地区</option>
  20.             <option v-for="item in area_list" v-if="item.pid==city" :value="item.id">{{item.name}}</option>
  21.         </select>
  22.     </div>
  23.     <script>
  24.     let vm =new Vue({
  25.         el:"#app",
  26.         data:{
  27.             province:0,
  28.             city:0,
  29.             area:0,
  30.             area_list:[]
  31.         },
  32.         mounted:function () {
  33.             //使用axios向后端请求行政区划的信息
  34.             this.area_list=[ //事件从后端通过axios获取到的     //id,名称,父ID
  35.                     {"id":1,"name":"北京市","pid":0 },         //"id","name","pid"
  36.                     {"id":2,"name":"广东省","pid":0 },
  37.                     {"id":3,"name":"广西省","pid":0 },
  38.                     {"id":4,"name":"湖南省","pid":0 },
  39.                     {"id":5,"name":"广州市","pid":2 },
  40.                     {"id":6,"name":"深圳市","pid":2 },
  41.                     {"id":7,"name":"惠州市","pid":2 },
  42.                     {"id":8,"name":"桂林市","pid":3 },
  43.                     {"id":9,"name":"长沙市","pid":4 },
  44.                     {"id":10,"name":"株洲市","pid":4 },
  45.                     {"id":11,"name":"保安区","pid":6 },
  46.                     {"id":12,"name":"福田区","pid":6 },
  47.                     {"id":13,"name":"增城区","pid":5 },
  48.                     {"id":14,"name":"惠城区","pid":7 },
  49.                     {"id":15,"name":"大亚湾","pid":7 },
  50.                     {"id":16,"name":"惠东县","pid":7 },
  51.                     {"id":17,"name":"海淀区","pid":1 },
  52.                     {"id":18,"name":"潮阳区","pid":1 },
  53.                 ];
  54.         },
  55.         watch:{
  56.             province: function () {  //监听省省份
  57.                 this.city = 0;
  58.                 this.area=0;
  59.             },
  60.             city:function () {  //监听城市
  61.                 this.area=0;
  62.             }
  63.         }
  64.     })
  65.  
  66.     </script>
  67.  
  68. </body>
  69. </html>

行政区三级联动案例

二: vue的属性及功能,axios的更多相关文章

  1. Vue计算属性

    github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...

  2. vue计算属性详解——小白速会

    一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...

  3. Excel阅读模式/聚光灯开发技术之二 超级逐步录入提示功能开发原理简述—— 隐鹤 / HelloWorld

    Excel阅读模式/聚光灯开发技术之二 超级逐步录入提示功能开发原理简述———— 隐鹤  /  HelloWorld 1. 引言 自本人第一篇博文“Excel阅读模式/单元格行列指示/聚光灯开发技术要 ...

  4. 一周一个小demo — vue.js实现备忘录功能

    这个vue实现备忘录的功能demo是K在github上找到的,K觉得这是一个用来对vue.js入门的一个非常简单的demo,所以拿在这里共享一下. (尊重他人劳动成果,从小事做起~  demo原git ...

  5. 示例vue 的keep-alive缓存功能的实现

    本篇文章主要介绍了vue 的keep-alive缓存功能的实现,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Vue 实现组件信息的缓存 当我们 ...

  6. Vue计算属性缓存(computed) vs 方法

    Vue计算属性缓存(computed) vs 方法 实例 <div id="example"> <p>Original message: "{{ ...

  7. Vue源码分析(二) : Vue实例挂载

    Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...

  8. WijmoJS V2019.0 Update2发布：再度增强 React 和 Vue 框架的组件功能

    前端开发工具包 WijmoJS 在2019年的第二个主要版本 V2019.0 Update2 已经发布,本次发布涵盖了React 和 Vue 框架下 WijmoJS 前端组件的功能增强,并加入更为易用 ...

  9. vue计算属性详解

    一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> ...

随机推荐

  1. onclick或者其他事件在部分移动端无效的问题

    最近开发碰到一个问题,大多数手机都可以正常访问点击,但是有部分手机onclick无效,不知道可能是什么原因?该如何解决? 我遇到的这个问题,实际不是onclick的原因,而是因为js里面包含es6的语 ...

  2. kali linux下 hachcat安装

    网上关于hachcat的简单使用方法介绍很多,然而却很少有在kali linux上的安装教程,找了好长时间,终于安装成功了,特此将中间借鉴的内容记录如下: #首先安装p7z,用于解压下载的p7z包 # ...

  3. 再论sklearn分类器

    https://www.cnblogs.com/hhh5460/p/5132203.html 这几天在看 sklearn 的文档,发现他的分类器有很多,这里做一些简略的记录. 大致可以将这些分类器分成 ...

  4. Cent Linux启动tomcat慢的问题

    Tomcat7的session id的生成主要通过java.security.SecureRandom生成随机数来实现,随机数算法使用的是”SHA1PRNG”. 是因为一个JDK一个bug,在这个bu ...

  5. 同级div设置display:inline-block，父级div强制不换行

    同级div设置display:inline-block,父级div强制不换行 <html> <head></head> <body> <div i ...

  6. Pycharm小技巧

    Pycharm专业版2017.3及以上 Python2.7.x及以上 补全与高亮 在创建python2.7,django1.10的项目时,碰到html代码不补全也不高亮的问题,解决思路如下: # 依次 ...

  7. P2590 [ZJOI2008]树的统计（树链剖分）

    P2590 [ZJOI2008]树的统计 虽然是入门树剖模板 但是我终于1A了(大哭) 懒得写啥了(逃 #include<iostream> #include<cstdio> ...

  8. tls 双向认证 client端代码例子

    example: python import httplib import json import ssl import urllib2 import requests CA_FILE = " ...

  9. 批处理no.bat

    在公司每次我启动电脑, 网络连接需要一段时间, 而我想在这段小时间里面, 一旦网络连接成功就帮我启动微信和qq, 如果还没有连接成功就继续监测直到有网络了才会成功才会打开两个程序, 当打开程序后脚本自 ...

  10. python简说（十四）内置函数

    # sorted 排序# map  循环调用函数的,保存返回值# filter  循环调用函数,如果函数返回false,那么就过滤掉这个值,是指从你传入的这个list里面过虑. def abc(num ...