Vue02

最新推荐文章于 2024-05-03 11:47:20 发布

香鱼嫩虾

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量113

点赞数

分类专栏： VUE 文章标签： vue javascript 过滤器

本文链接：https://blog.csdn.net/hypertext123/article/details/118004376

版权

VUE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

简介
Vue 生命周期
五、过滤器
六、axios

简介

本文是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．使用 {{数据|过\dots$ ’+x; } } }) $30.5

（二）全局过滤器

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

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>

香鱼嫩虾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue02

文章目录简介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
复制链接

扫一扫