vue基础-day03

最新推荐文章于 2024-05-06 16:56:42 发布

小小穆子

最新推荐文章于 2024-05-06 16:56:42 发布

阅读量201

点赞数

本文链接：https://blog.youkuaiyun.com/m0_52618824/article/details/118183344

版权

一、生命周期

a、什么是生命周期
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
b、vue生命周期钩子函数
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
生命周期函数=生命周期事件=生命周期钩子
c、vue生命周期
在这里插入图片描述
代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue-2.4.0.js"></script>
<body>
    <div id ="app"> 
        <div>{{num}}</div>
        <input type="text" v-model:value='num'>

    </div>

    <script>
     //创建Vue实例,得到 ViewModel
     const vm = new Vue({
        el: '#app',
        data: {
            num:124,

        },
        methods: {},
        // 生命周期：
        // 从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
        // 生命周期函数=生命周期事件=生命周期钩子
        
        
        // 表示实例完全被创建出来之前，会执行它，
        // 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
        //用于重新跳转页面，比如换新的网址是，会直接从原来的页面跳到新的页面
        beforeCreate(){
            console.log("这个是beforeCreate");
            console.log(this.num);//created
        },
        
        // data 和 methods 都已经被初始化好了！
        // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
        //用于请求接口和数据的初始化
        created(){
            console.log("这个是created");
            console.log(this.num);
        },
        
        // 表示 模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
        // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
        beforeMount(){
            console.log("只是翻译的模板放到了内存中，并没有渲染到页面");
        },
        
        // 表示 内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
        // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
        mounted(){
            console.log("渲染到了页面");
        },
         
        // 这时候，表示 我们的界面还没有被更新
        beforUpdate(){
            console.log("更新之前");
        },
         
        // updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
        // 用于类似于计算器的输入数值随时更新计算结果
        updated(){
            console.log("更新之后");
        },
        //销毁之前
        beforeDestory(){
        },
        //销毁之后
        destroyed(){
        }
     });
    </script>
</body>

</html>

二. vue-resource的使用(vue1.X)

get请求和post请求代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue-2.4.0.js"></script>
    
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <!-- 直接在页面中，通过script标签，引入vue-resource的脚本文件；
    注意：引用的先后顺序是 - 先引用Vue的脚本文件，再引用vue-resource的脚本文件 -->
    <script src="./vue-resource-1.3.4.js"></script>
    <style>
        .box {
        width: 1200px;
        margin: auto;
        display: flex;
        /* 在弹性盒对象的 <div> 元素中的各项中间留有空白： */
        justify-content: space-between;
        /* 在弹性盒对象的 <div> 元素中的各项周围留有空白： */
        /* justify-content: space-around; */

        /* 让弹性盒元素在必要的时候拆行： */
        flex-wrap: wrap;
      }
      .course {
        width: 20%;
        /* padding-right: 20px; */
        height: 180px;
        background-color: aqua;
      }
      .courseImg {
        height: 100px;
      }
    </style>
<body>
    <div id ="app"> 
        <!-- 获取轮播图图片 -->
        <div v-for="(item,index) in imgList" :key="item.id">
            <img :src="item.imgUrlPc" alt="">
        </div>
        <!-- 获取免费课程图片 -->
        <div class="box">
            <div class="course" v-for="(item,index) in courseList" :key="item.id">
                <dl>
                    <dt><img class="courseImg" alt="" :src="item.coverFileUrl"></dt>
                    <dt>vue全家桶从入门到实战</dt>
                    <dt>共23节课|234人报名</dt>
                    <dt>免费</dt>
                </dl>
            </div>
        </div>
    </div>
   
    <script>
     //创建Vue实例,得到 ViewModel
     const vm = new Vue({
        el: '#app',
        data: {
            imgSrc:"",
            imgList:[],
            courseList:[],
        },
        methods: {},
        created(){
            // 接口请求。数据初始化
            //get请求
            this.$http.get("http://wkt.myhope365.com/weChat/applet/course/banner/list?number=4"
            ).then(res=>{
                console.log(res);
                console.log(res.body.data);
                this.imgList=res.body.data;
                console.log(res.body.data);
            });
            //post请求
            this.$http.post("http://wkt.myhope365.com/weChat/applet/course/list/type",
              { type: "free", pageNum: 1, pageSize: 10 },
            //   vue1.X的post请求有第三个参数
              { emulateJSON: true }).then((res=>{
                  console.log(res);
                  this.courseList=res.body.rows;
              }))

        }
     });
    </script>
</body>

</html>

三、axios的使用

Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中
get请求和post请求代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .box {
        width: 1200px;
        margin: auto;
        display: flex;
        /* 在弹性盒对象的 <div> 元素中的各项中间留有空白： */
        justify-content: space-between;
        /* 在弹性盒对象的 <div> 元素中的各项周围留有空白： */
        /* justify-content: space-around; */

        /* 让弹性盒元素在必要的时候拆行： */
        flex-wrap: wrap;
      }
      .course {
        width: 20%;
        /* padding-right: 20px; */
        height: 180px;
        background-color: aqua;
      }
      .courseImg {
        height: 100px;
      }
    </style>
<body>
    <div id ="app"> 
        <div v-for="(item,index) in imgList" :key="item.id">
            <img :src="item.imgUrlPc" alt="" />
        </div>

        <!-- 获取免费课程图片 -->
        <div class="box">
            <div class="course" v-for="(item,index) in courseList" :key="item.id">
                <dl>
                    <dt><img class="courseImg" alt="" :src="item.coverFileUrl"></dt>
                    <dt>2351</dt>
                    <dt>2351</dt>
                    <dt>2351</dt>
                </dl>
            </div>
        </div>
    </div>
    </div>

    <script>
     //创建Vue实例,得到 ViewModel
     const vm = new Vue({
        el: '#app',
        data: {
            imgSrc:"",
            imgList:[],
            courseList:[],
        },
        methods: {},
        created(){
            axios.get("http://wkt.myhope365.com/weChat/applet/course/banner/list?number=4"
            ).then((res)=>{
                console.log(res);
                this.imgList=res.data.data;
            })
            
            // form参数类型
            // 新建一个FormData()对象
            let form=new FormData();
            // let form = new URLSearchParams();

          // 添加属性 append
          form.append("type","free");
          form.append("pageSize", 10);
          form.append("pageNum", 1);

            //post接口
            axios.post(
                "http://wkt.myhope365.com/weChat/applet/course/list/type",
                form
            ).then((res)=>{
                console.log(res);
                this.courseList=res.data.rows;
            })
        }
     });
    </script>
</body>

</html>

四、Vue中的动画

1 、使用过渡类名
HTML结构：

<div id="app">
<input type="button" value="动起来" @click="myAnimate">
  <!-- 使用 transition 将需要过渡的元素包裹起来 -->
  <transition name="fade">
    <div v-show="isshow">动画哦</div>
  </transition>
</div>

VM 实例：

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
  isshow: false
},
methods: {
  myAnimate() {
    this.isshow = !this.isshow;
  }
}
});

定义两组类样式：

/* 定义进入和离开时候的过渡状态 */
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.2s ease;
    position: absolute;
  }

  /* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
    transform: translateX(100px);
  }

2、使用第三方css动画库

导入动画类库：<link rel="stylesheet" type="text/css" href="./lib/animate.css">

定义 transition 及属性：

<transition
enter-active-class="fadeInRight"
  leave-active-class="fadeOutRight"
  :duration="{ enter: 500, leave: 800 }">
<div class="animated" v-show="isshow">动画哦</div>
</transition>

3、使用动画钩子函数
定义 transition 组件以及三个钩子函数：

<div id="app">
  <input type="button" value="切换动画" @click="isshow = !isshow">
  <transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter">
    <div v-if="isshow" class="show">OK</div>
  </transition>
</div>

定义三个 methods 钩子方法：

methods: {
      beforeEnter(el) { // 动画进入之前的回调
        el.style.transform = 'translateX(500px)';
      },
      enter(el, done) { // 动画进入完成时候的回调
        el.offsetWidth;
        el.style.transform = 'translateX(0px)';
        done();
      },
      afterEnter(el) { // 动画进入完成之后的回调
        this.isshow = !this.isshow;
      }
}

定义动画过渡时长和样式：

.show{
transition: all 0.4s ease;
}

4、 v-for的列表过渡
定义过渡样式：

<style>
  .list-enter,
  .list-leave-to {
    opacity: 0;
    transform: translateY(10px);
  }

  .list-enter-active,
  .list-leave-active {
    transition: all 0.3s ease;
  }
</style>

定义DOM结构，其中，需要使用 transition-group 组件把v-for循环的列表包裹起来：

<div id="app">
  <input type="text" v-model="txt" @keyup.enter="add">
  <transition-group tag="ul" name="list">
    <li v-for="(item, i) in list" :key="i">{{item}}</li>
  </transition-group>
</div>

定义 VM中的结构：

 // 创建 Vue 实例，得到 ViewModel
  var vm = new Vue({
    el: '#app',
    data: {
      txt: '',
      list: [1, 2, 3, 4]
    },
    methods: {
      add() {
        this.list.push(this.txt);
        this.txt = '';
      }
    }
  });

5、列表的排序过渡
组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。

v-move 和 v-leave-active 结合使用，能够让列表的过渡更加平缓柔和：

v-move{
transition: all 0.8s ease;
}
.v-leave-active{
position: absolute;
}