Vue02

川长思鸟来 2021-09-25 11:02 314阅读 0赞

### 文章目录 ###

*  简介
 *  Vue 生命周期
 *   *  1．什么是生命周期
     *  2．
     *  3．实例创建期间生命周期函数
     *  4．
 *  五、过滤器
 *   *  （一）局部过滤器
     *  （二）全局过滤器
     *  （三）课堂案例 1 使用局部过滤器传一个参数 100,在过滤器里对 price 增加 100,同时在结果前拼接人民币符号. 
        
        \{ \{price|yuan(200)\}\}
        
        ￥300
     *  （四）课堂案例 2 使用全局过滤器传一个参数(形如:’yyyy-MM-dd’或者’yyyy-MM-dd hh:mm:ss’)对 data 的时间数据进行格式化 显示. 
 *  六、axios
 *   *  （一）什么是 axios 易用简洁高效的 http 库,Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
     *  （二）特性 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF
     *  （三）用法

# 简介 #

*  本文是2021/06/17整理的笔记
 *  赘述可能有点多，还请各位朋友耐心阅读
 *  本人的内容和答案不一定是最好最正确的，欢迎各位朋友评论区指正改进

# Vue 生命周期 #

## 1．什么是生命周期 ##

从 Vue 实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期.

## 2． ##

生命周期函数不能写在 methods 里,写在跟 methods 平级的位置

## 3．实例创建期间生命周期函数 ##

（1）beforeCreate()  
①执行时机 实例被完全创建之前会执行它。  
②注意: 在 beforeCreate 生命周期函数执行的时候,data 中的数据和 methods 中的方法都没有被初始化 这时调用 data 会输出 undefined,调用方法会报错 beforeCreate() \{ console.log(this.msg); //输出 undefined this.test();//报错 注意：方法调用也有 this console.log(’=beforeCreate 阶段==’); \}, undefined  
（2）Created()  
①执行时机 实例被创建之后会执行它  
②注意 在 created 中 data 和 methods 都已经被初始化了。如果想要调用 data 中的数据和 methods 中的方法,最早只能在 created 中操作. created() \{ console.log(this.msg); //正常输出 hello this.test(); //方法正常调用 console.log(’=create 阶段==’); \},  
（3）beforeMount()  
①执行时机 还没有把模板渲染到页面 表示模板已经编译完成在内存中了,但是尚未把模板渲染到页面。  
②注意在 beforeMount 执行的时候,页面中的元素还没有真正的被替换,只是之前的模板字符串 beforeMount() \{ console.log(document.getElementById(“app”).innerText); //结果是\{ \{msg\}\} console.log(’=beforeMount 阶段==’); \}, （4）mounted()  
①执行时机 内存中的模板已经挂载到了页面,用户已经可以看到完整的内容了。  
②注意 注意:mounted 是实例创建期间最后一个生命周期函数。执行完 mounted 表示实例已经挂在完成，如果想要通过某 些插件操作 DOM 节点,最早要在 mounted 中进行. mounted() \{ console.log(document.getElementById(“app”).innerText); //结果是 hello console.log(’=mounted 阶段==’); \},

## 4． ##

运行期间生命周期函数 运行期间的生命周期函数会执行多次  
（1）beforeUpdate()  
①执行时机 表示页面还没有更新,数据已经被更新了。  
②注意 页面和 data 中的数据没有同步 beforeUpdate() \{ console.log(‘data 中的数据：’ + this.msg); console.log(‘页面中的数据：’ + document.getElementById(“app”).innerText); console.log(’=beforeUpdate 阶段==’); \},  
（2）updated() data 中的数据和页面中的数据保持同步,都是最新的 updated() \{ console.log(‘data 中的数据：’ + this.msg); console.log(‘页面中的数据：’ + document.getElementById(“app”).innerText); console.log(’=updated 阶段==’); \}, activated:keep-alive 组件激活时调用。 deactivated:keep-alive 组件停用时调用。  
5． 销毁过程  
（1）beforeDestroy() 销毁之前执行 beforeDestroy() \{  
//data/methods/fiter/指令…都处于可用状态,并没真正执行销毁 console.log(’=beforeDestroy 阶段==’); \},  
（2）destroyed() 销毁执行 destroyed() \{ // data/methods/fiter/指令…都处于不可用状态 console.log(‘destroyed 阶段==’); \}

# 五、过滤器 #

## （一）局部过滤器 ##

1．定义 filters:\{ yuan(x)\{ return ‘KaTeX parse error: Expected 'EOF', got '\}' at position 6: '+x; \}̲ \} 2．使用 \{ \{数据|过…’+x; \} \} \}) $30.5

## （二）全局过滤器 ##

1．定义 Vue.filter(‘过滤器的名字’,function(x,y)\{ return x+y; \})  
2．使用  
\{ \{msg|过滤器的名字(‘参数’)\}\}

\{ \{msg|myRev(‘你好’)\}\}

olleh 你好

## （三）课堂案例 1 使用局部过滤器传一个参数 100,在过滤器里对 price 增加 100,同时在结果前拼接人民币符号.  \{ \{price|yuan(200)\}\}  ￥300 ##

## （四）课堂案例 2 使用全局过滤器传一个参数(形如:’yyyy-MM-dd’或者’yyyy-MM-dd hh:mm:ss’)对 data 的时间数据进行格式化 显示. ##

<title>
     </title>
      <script src="js/vue.js" type="text/javascript" charset="utf-8"> </script> </head> <body><div id="app"> 
      {
       {msg|myDate('yyyy-MM-dd')}}
       </div> 
       <script type="text/javascript"> Vue.filter('myDate',function(x,y){ if('yyyy-MM-dd'===y){ return x.getFullYear()+'年'+(x.getMonth()+1)+'月'+x.getDate()+'日'; } else if('yyyy-MM-dd HH:mm:ss'===y){ return x.getFullYear()+' 年 '+(x.getMonth()+1)+' 月 '+x.getDate()+' 日 '+x.getHours()+'时'+x.getMinutes()+'分'+x.getSeconds()+'秒'; } }) var vm = new Vue({ el:'#app', data:{ msg:new Date() } }) </script>
         </body>
          </html>

2020 年 8 月 17 日

# 六、axios #

## （一）什么是 axios 易用简洁高效的 http 库,Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 ##

## （二）特性 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF ##

## （三）用法 ##

1．引入 axios.js  
2．发送请求 执行 GET 请求  
// 为给定 ID 的 user 创建请求  
`axios.get('/user?ID=12345') .then(function (response) { console.log(response); }).catch(function (error) { console.log(error); });` // 上面的请求也可以这样做

axios.get('/user', { params: { ID: 12345 } }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); }); 执行 POST 请求 axios.post('/user', JSON.stringify(this.user)) .then(function (response) { console.log(response); }).catch(function (error) { console.log(error); }); 
    <!DOCTYPE html> 
    <html>
    <head>
    <meta charset="utf-8" /> 
    <title></title> 
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/axios.js" type="text/javascript" charset="utf-8"> </script> 
    </head> 
    <body>
    <div id="app"> 
    <table> 
    <tr>
    <td>序号</td>
     <td>姓名</td> 
     <td>年龄</td> 
     </tr> 
     <tr v-for="s in list"> 
     <td>{
       {s.id}}</td>
     <td>{
       {s.name}}</td> 
     <td>{
       {s.age}}</td> 
     </tr> 
     </table> 
     </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ msg:'hello', list:[] }, methods:{ getList(){ // var that=this; axios.get('http://localhost:8080/hello').then((response)=> { console.log(response); console.log(response.data); console.log(response.status); this.list=response.data console.log(this.list); }) } } ,created() { this.getList() } }) </script> 
         </body>
          </html>