10天从入门到精通Vue-vue-resourceVue中的动画

Posted 共饮一杯无

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了10天从入门到精通Vue-vue-resourceVue中的动画相关的知识，希望对你有一定的参考价值。

vue-resource 实现 get, post, jsonp请求

除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求

  1. 之前的学习中，如何发起数据请求？
  2. 常见的数据请求类型？  get  post jsonp
  3. 测试的URL请求资源地址：暂无

  4. JSONP的实现原理

    • 由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全；
    • 可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）；
    • 具体实现过程：
    • 先在客户端定义一个回调方法，预定义对数据的操作；
    • 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；
    • 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
    • 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了；
    • 带大家通过 Node.js ，来手动实现一个JSONP的请求例子； 
      
const http = require(http);
// 导入解析 URL 地址的核心模块
const urlModule = require(url);

    const server = http.createServer();
    // 监听 服务器的 request 请求事件，处理每个请求
    server.on(request, (req, res) =>
    const url = req.url;

    // 解析客户端请求的URL地址
    var info = urlModule.parse(url, true);

    // 如果请求的 URL 地址是 /getjsonp ，则表示要获取JSONP类型的数据
    if (info.pathname === /getjsonp)
    // 获取客户端指定的回调函数的名称
    var cbName = info.query.callback;
    // 手动拼接要返回给客户端的数据对象
    var data =
    name: 共饮一杯无,
    age: 22,
    gender: 男,
    hobby: [吃饭, 睡觉, 运动]

    // 拼接出一个方法的调用，在调用这个方法的时候，把要发送给客户端的数据，序列化为字符串，作为参数传递给这个调用的方法：
    var result = $cbName($JSON.stringify(data));
    // 将拼接好的方法的调用，返回给客户端去解析执行
    res.end(result);
    else
    res.end(404);

    );

    server.listen(3000, () =>
    console.log(server running at http://127.0.0.1:3000);
    );

  5. vue-resource 的配置步骤：
    • 直接在页面中，通过script标签，引入 vue-resource 的脚本文件；
    • 注意：引用的先后顺序是：先引用 Vue 的脚本文件，再引用 vue-resource 的脚本文件；

  6. 发送get请求：

    getInfo()  // get 方式获取数据
this.$http.get(http://127.0.0.1:8899/api/getlunbo).then(res => 
console.log(res.body);
)

  7. 发送post请求：

    postInfo() 
var url = http://127.0.0.1:8899/api/post;
// post 方法接收三个参数：
// 参数1： 要请求的URL地址
// 参数2： 要发送的数据对象
// 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
this.$http.post(url,  name: zs ,  emulateJSON: true ).then(res => 
console.log(res.body);
);

  8. 发送JSONP请求获取数据：

    jsonpInfo()  // JSONP形式从服务器获取数据
var url = http://127.0.0.1:8899/api/jsonp;
this.$http.jsonp(url).then(res => 
console.log(res.body);
);

    Vue中的动画

    为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能；

    使用过渡类名

  9. html结构：

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

  10. VM 实例：

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


);

  11. 定义两组类样式：

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


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

    使用第三方 CSS 动画库

  12. 导入动画类库：

    <link rel="stylesheet" type="text/css" href="./lib/animate.css">

  13. 定义 transition 及属性：

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

    使用动画钩子函数

  14. 定义 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>

  15. 定义三个 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;

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

    .show
  transition: all 0.4s ease;

    v-for 的列表过渡

  17. 定义过渡样式：

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


.list-enter-active,
.list-leave-active 
  transition: all 0.3s ease;

</style>

  18. 定义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>
  19. 定义 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 = ;
    
  
);

    列表的排序过渡

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

  • v-move 和 v-leave-active 结合使用，能够让列表的过渡更加平缓柔和： 
    .v-move
transition: all 0.8s ease;

.v-leave-active
position: absolute;

相关文章

  1. 10天从入门到精通Vue(一)-vue基本概念和基础语法(v-text、v-bind、v-on、v-model等)
  2. vue.js 1.x 文档
  3. vue.js 2.x 文档
  4. vuejs 3.x文档
  5. js 里面的键盘事件对应的键码
  6. pagekit/vue-resource
  7. navicat如何导入sql文件和导出sql文件
  8. 贝塞尔在线生成器

以上是关于10天从入门到精通Vue-vue-resourceVue中的动画的主要内容，如果未能解决你的问题，请参考以下文章

10天从入门到精通Vue-vue的过滤器自定义指令Vue实例的生命周期

运维大师讲堂，7天从入门到进阶

两年AI研究经验(教训)总结，进来看看吧！

30天从入门到放弃我的机器学习之路 8

《wireshark从入门到精通》

《wireshark从入门到精通》