vuejs动画及vue-resource

最新推荐文章于 2022-11-17 11:09:27 发布

男孩12

最新推荐文章于 2022-11-17 11:09:27 发布

阅读量461

点赞数

分类专栏： vuejs 文章标签： vue.js 动画 javascript

本文链接：https://blog.csdn.net/weixin_51666715/article/details/122609099

版权

vuejs 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

vue-resourse

vue-resourse 他就是 vuejs框架的一个ajax.
Vue 要实现异步加载需要使用到 vue-resource 库。
操作步骤，如下：
一、引入相关的库

1.引入库vue-resourse库同时也要导入vuejs的库
vue-resourse----- <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
vuejs库----<script src="https://unpkg.com/vue/dist/vue.js"></script>

二、进行实践一些操作（我将举用一个例子来编写）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
          border: 2px solid rgba(78, 106, 148, 0.4);
          outline: none;
        }
        .id {
          margin-right: 10px;
        }
        .btn {
          width: 60px;
          height: 30px;
          background-color: #008c8c;
          text-align: center;
          line-height: 30px;
          letter-spacing: 0.5em;
          border: none;
          color: #fff;
          cursor: pointer;
          margin-right: 20px;
        }
        table {
          width: 100%;
          text-align: center;
          border: 1px solid #f4f4f4;
          border-collapse: collapse;
          margin-top: 20px;
          cursor: pointer;
        }
        table thead th {
          width: 25%;
          line-height: 25px;
          height: 25px;
          border: 1px solid rgba(66, 63, 63, 0.5);
        }
        table tbody td {
          height: 25px;
          line-height: 25px;
          border: 1px solid rgba(66, 63, 63, 0.5);
        }
        table tbody tr:nth-child(1) {
          background-color: rgba(109, 104, 104, 0.5);
        }
        table tbody tr:hover {
          background-color: rgba(104, 100, 100, 0.5);
        }
      </style>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
    <div id="app">
       <label>
        id：<input type="text" class="id" v-model='id'/>
       </label>

       <label>
        name：<input type="text" class="name" v-model='name'/>
       </label>

        <label>
          <button class="btn">添加</button>
        </label>

        <label>
          <input type="text" placeholder="请输入关键字" v-model='keyword'/>
          <input type="button" value="查询" @click='find'>
        </label>

        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>汽车品牌</th>
              <th>时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in list">
              <td>{{item['hero-id']}}</td>
              <td>{{item.name}}</td>
              <td>{{item['hero-img']}}</td>
              <td><a href="">删除</a></td>
            </tr>
          </tbody>
        </table>
      </div>
  <script>
    //为了更加的灵活，我们将url重复的拿出来,声明一个全局的根目录
    Vue.http.options.root='http://localhost:8888/';
    //为了简洁好看，我们优先将对应的emulateJSON优先提取出来
    Vue.http.options.emulateJSON=true;
    //new 一个vue实例
    var vm=new Vue({
      el:'#app',
      data:{
        id:'',
        name:'',
        keyword:'',
        list:[
          {id:1,name:'奔驰',time :new Date()},
          {id:2,name:'宝马',time :new Date()},
        ]
      },
      //生命周期函数created
      created(){
        //调用的时候一定要记得加this,不然他不知道你要带调用哪里的函数
        this.fnaddlist();
      },
      methods:{
        //声明一个函数的方法来运行获取我接口的值，这个函数运行在vuejs生命周期的created中
        fnaddlist(){
          //发送请求给服务器,当我们写全的url为：http://localhost:8888/list 这个时候好像似乎把url写死了,所以我们为了更好的把他给写好,所以我们可以
          //声明一个全局的根目录,注意此处的url千万别加一个/  会导致你拼接的时候发生错误.
          this.$http.get('list').then(res =>{
            //status是http状态码中的一个属性 ,当他为200的时候说明你的连接已成功
            if(res.status == 200){
              this.list=res.body;
            }else{
              console.log('连接失败');
            }
          })
        },
        find(){
          //此处url与上面geturl是一样的，为了灵活
          //但是为了更加简便，我们可以将post的第三个参数提取出来放在外面
          this.$http.post('find',{name:this.keyword}).then(res => {
            if(res.status == 200){
              this.list=res.body
            }else{
              console.log('连接失败');
            }
          })
        }
      }
    })
  </script>
</body>
</html>

vue动画

使用的标签：transition
1.使用我们vue动画首先要了解原理:主要原理就是css3属性transition 和 transform属性进行设置
2.其中动画属性如下:
在这里插入图片描述
使用代码如下:

<style>
        .v-enter,.v-leave-to{
            opacity: 0;
            transform: translateX(150px);
        }
        .v-enter-active,.v-leave-active{
            transition: all .5s ease;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click='flag=!flag'>点击有惊喜</button>
        <!-- transition作为vue动画标签包含的是将要实现动画的元素 -->
        <transition>
            <h1 v-show='flag'>{{msg}}</h1>
        </transition>

    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
               msg:"惊喜不惊喜，给大家提前说一声过年好",
               flag:false
            },
            methods:{
            }
        })
    </script>

animate.css 动画样式

1.导包

<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css" rel="stylesheet">

搭配transition标签使用我们可以不用定义属性了，直接使用他的属性就可以了
代码如下:

 <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css" rel="stylesheet">
</head>
<body>
    <div id="app">
        <button @click='flag=!flag'>点击有惊喜</button>
        <!-- transition作为vue动画标签包含的是将要实现动画的元素 -->
        <transition enter-active-class='bounceIn' leave-active-class='bounceOut'>
            <h1 v-show='flag'>{{msg}}</h1>
        </transition>

    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
               msg:"惊喜不惊喜，给大家提前说一声过年好",
               flag:false
            },
            methods:{
            }
        })
    </script>

使用钩子函数实现动画半场效果

@before-enter=‘函数/方法’,
@enter=‘函数/方法’,
@after-enter=‘函数/方法’

常见案例,淘宝的购物车

 <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
        h1{
            width: 15px;
            height: 15px;
            background-color: red;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click='flag=!flag'>点击有惊喜</button>
        <!-- transition作为vue动画标签包含的是将要实现动画的元素 -->
        <transition
        @before-enter='before'
        @enter='enter'
        @after-enter='after'
        >
            <h1 v-show='flag'></h1>
        </transition>

    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
               flag:false
            },
            methods:{
                // 所有的第一个参数依然是el Dom元素对象
                before(el){
                    el.style.transform='translate(0,0)';
                },
                enter(el,den){
                    //一定要写 el.offsetWidth 或者el.offset.. 任意都可以，这可以让你看到运动的轨迹
                    el.offsetWidth;
                    el.style.transform='translate(150px,140px)';
                    el.style.transition='all 1s ease';
                    den();
                },
                after(el){
                    this.flag=!this.flag;
                }
            }
        })
    </script>

列表过渡效果

我们列表的数据一般都是用v-for来进行渲染,这个时候我们不能使用transition来包裹我们想要实现的列表动画效果,
这个时候我们常用的使transition-group
使用说明如下:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
        /* 添加效果 */
        .v-enter,.v-leave-to{
            transform: translateY(80px);
        }
        .v-enter-active,.v-leave-active{
            transition: all .6s ease;
        }
        /* 删除效果 */
        .v-move{
            transform: translateY(80px);
        }
        .v-leave-active{
            transition: all .6s ease;
        }
    </style>
</head>
<body>
    <div id="app">
        <label>
            id:<input type="text" v-model='id'>
        </label>
        <label>
            name:<input type="text" v-model='name'>
        </label>
        <label>
            <button @click='add'>添加</button>
        </label>
     
          <!-- appear入场效果 -->
          <!-- tag指定我们transition-group渲染的时候在页面中显示的标签为 -->
         <transition-group appear tag='ul'>
            <li v-for='(item,i) in list' :key="item.id" @click='del(i)'>{{item.id}} ----- {{item.name}}</li>
         </transition-group>

    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                name:'',
                id:'',
               list:[
                   {id:1,name:'张三'},
                   {id:2,name:'李四'},
                   {id:3,name:'王五'}
                ]
            },
            methods:{
                add(){
                    this.list.push({id:this.id,name:this.name})
                },
                del(i){
                  this.list.splice(i,1);  
                }
            }
        })
    </script>

男孩12

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vuejs动画及vue-resource

vue-resoursevue-resourse 他就是 vuejs框架的一个ajax.Vue 要实现异步加载需要使用到 vue-resource 库。操作步骤，如下：一、引入相关的库1.引入库vue-resourse库同时也要导入vuejs的库vue-resourse----- <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>vuejs
复制链接

扫一扫