学习Vue日记第8天

最新推荐文章于 2022-06-03 18:00:27 发布
最新推荐文章于 2022-06-03 18:00:27 发布
阅读量114 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43061473/article/details/117677610
版权

列表交错过渡

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="velocity.js"></script>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    <input placeholder="请输入要查找的内容" v-model="query">
    <transition-group name="item" tag="ul" @before-enter="beforeEnter"
     @enter="enter" @leave="leave" v-bind:css="false">
      <li v-for="(item, index) in ComputedList" :key="item.msg"
       :data-index="index">
        {{ item.msg }}
      </li>
    </transition-group>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data () {
        return {
          query: '',    // v-model绑定的值
          items: [
            { msg: '张三' },
            { msg: '李四' },
            { msg: '张芳芳' },
            { msg: '王琳琳' },
            { msg: '冯圆' }
          ]
        }
      },
      computed: {                     // 计算属性
        ComputedList () {
          var vm = this.query		      // 获取到input输入框中的内容
          var nameList = this.items	  // 数组
          return nameList.filter(function (item) {
            return item.msg.toLowerCase().indexOf(vm.toLowerCase()) !== -1
          })
        }
      },
      methods: {
        beforeEnter (el) {
          el.style.opacity = 0
          el.style.height = 0
        },
        enter (el, done) {
          var delay = el.dataset.index * 150
          setTimeout(function () {//推迟毫秒
            Velocity(el, { opacity: 1, height: '1.6em' }, { complete: done })
          }, delay)
        },
        leave (el, done) {
          var delay = el.dataset.index * 150
          setTimeout(function () {
            Velocity(el, { opacity: 0, height: 0 }, { complete: done })
          }, delay)
        }
      }
    })
  </script>
</body>
</html>

可复用的过渡
template方式

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="velocity.js"></script>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    <input placeholder="请输入要查找的内容" v-model="query">
    <fade :query="query" :items="items">
      <li v-for="(item, index) in ComputedList"
       :key="item.msg" :data-index="index">
        {{ item.msg }}
      </li>
    </fade>
  </div>

  <template id="temp">
    <transition-group name="item" tag="ul" @before-enter="beforeEnter"
     @enter="enter" @leave="leave" :css="false">
      <slot></slot>
    </transition-group>
  </template>
  
  <script>
    Vue.component('fade', {		    // 定义组件名为fade
      props: ['query', 'items'],	// 组件实例的属性
      template: '#temp', 
      methods: {
        beforeEnter (el) {
          el.style.opacity = 0
          el.style.height = 0
        },
        enter (el, done) {
          var delay = el.dataset.index * 150
          setTimeout(function () {
            Velocity(el, {opacity: 1, height: '1.6em'}, {complete: done})
          }, delay)
        },
        leave (el, done) {
          var delay = el.dataset.index * 150
          setTimeout(function () {
            Velocity(el, {opacity: 0, height: 0}, {complete: done})
          }, delay)
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {
        query: '',
        items: [
          { msg: '张三' },
          { msg: '李四' },
          { msg: '张芳芳' },
          { msg: '王琳琳' },
          { msg: '冯圆' }
        ]
      },
      computed: {	 // 计算属性
        ComputedList () {
          var vm = this.query
          var nameList = this.items
          return nameList.filter(function (item) {
            return item.msg.toLowerCase().indexOf(vm.toLowerCase()) !== -1
          })
        }
      }
    })
  </script>
</body>
</html>

函数组件方式

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="velocity.js"></script>
  <script src="vue.js"></script>
</head>
<body>
  <div id="app">
    <input placeholder="请输入要查找的内容" v-model="query">
    <fade :query="query" :items="items">
      <li v-for="(item, index) in ComputedList" :key="item.msg"
       :data-index="index">
        {{ item.msg }}
      </li>
    </fade>
  </div>  
  
  <script>
    Vue.component('fade', {
      functional: true,	  // 标记fade组件为函数式组件 
      props: ['query', 'items'],
      render (h, ctx) {
        var data = {
          props: {			  // props组件
            tag: 'ul',		// 修改默认渲染的span标签为ul
            css: false
          },
          on: {
            beforeEnter (el) {
              el.style.opacity = 0
              el.style.height = 0
            },
            enter (el, done) {
              var delay = el.dataset.index * 150
              setTimeout(function () {
                Velocity(el, { opacity: 1, height: '1.6em' }, { complete: done })
              }, delay)
            },
            leave (el, done) {
              var delay = el.dataset.index * 150
              setTimeout(function () {
                Velocity(el, { opacity: 0, height: 0 }, { complete: done })
              }, delay)
            }
          }
        }
        // data是传递给组件的数据对象，作为createElement()的第2个参数传入组件
        // ctx.children是VNode子节点的数组
        return h('transition-group', data,ctx.children)
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {
        query: '',
        items: [
          { msg: '张三' },
          { msg: '李四' },
          { msg: '张芳芳' },
          { msg: '王琳琳' },
          { msg: '冯圆' }
        ]
      },
      computed: {
        ComputedList () {
          var vm = this.query
          var nameList = this.items 
          return nameList.filter(function (item) {
            return item.msg.toLowerCase().indexOf(vm.toLowerCase()) !== -1
          })
        }
      }
    })
  </script>
</body>
</html>

路由

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue.js"></script>
  <script src="vue-router.js"></script>
</head>
<body>
  <div id="app">
    <router-link to="/login" tag="span">前往登录</router-link>
    <router-view></router-view>
  </div>
  <script>
    // 创建组件
    var login = {
      template: '<h1>登录组件</h1>'
    }
    var routerObj = new VueRouter({
      mode:'history',
      routes: [ 
        // 配置路由匹配规则
         {path: '/login', component: login }
      ]
    })
    var vm = new Vue({
      el: '#app',
      // 将路由规则对象注册到vm实例上
      router: routerObj
    })
  </script>
</body>
</html>

路由常用属性

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vue.js"></script>
  <script src="vue-router.js"></script>
</head>
<body>
  <div id="app">
    <router-link to="/user?id=10&name=admin">登录</router-link>
    <router-view></router-view>
  </div>
  <script>
    // 定义user组件 
    var user = {
      template: '<h3>id: {{this.$route.query.id}} ' +'{{this.$route.name}}'+ 
      'name: {{$route.query.name}}</h3>',
      created () {					      // 组件的生命周期钩子函数
        console.log(this.$route)	// 用this.$route来接收参数
      }
    }
    var router = new VueRouter({
      routes: [
        { path: '/user', component: user }
      ]
    })
    var vm = new Vue({ el: '#app', router })
  </script>
</body>
</html>

加油！！

c木
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
*python高级数据-列表-元组-字典
weixin_43828415的博客
03-10 941
【代码】*python高级数据-列表-元组。
字典与函数（Python day 12）
weixin_41061046的博客
03-12 265
字典 1、 只要外字典的键和内字典的值 a={ "001":{"name":"张三",'age':28,'sex':"男"}, "002":{"name":"李四",'age':38,'sex':"男"}, "003":{"name":"王五",'age':28,'sex':
Python列表使用
weixin_44135472的博客
07-10 111
列表 : - 列表的新增\修改\删除操作
Vue的过渡效果
garyhu1的博客
04-21 7028
概述 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 包括以下工具： 在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库，如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库，如 Velocity.js 在这里，我们只会讲到进入、离开和列表的
Vue学习笔记进阶篇——函数化组件
weixin_30448685的博客
08-04 132
本文为转载，原文：Vue学习笔记进阶篇——函数化组件 介绍 之前创建的锚点标题组件是比较简单，没有管理或者监听任何传递给他的状态，也没有生命周期方法。它只是一个接收参数的函数。在这个例子中，我们标记组件为functional， 这意味它是无状态（没有data），无实例（没有this上下文）。一个函数化组件就像这样： Vue.component('my-component', ...
MVCz在线个人日记系统
12-29
【MVCz在线个人日记系统】是一个专门为个人用户设计的在线日记平台，它允许用户通过互联网存储和管理自己的日记条目。这个系统基于Web技术，采用Model-View-Controller（MVC）架构模式进行开发，使得代码结构清晰，...
日记产品
02-24
8. **API接口**：如果产品支持移动应用或第三方服务集成，可能会包含RESTful API设计，利用Python的Flask-Restful或Django REST framework来实现。 9. **前端技术**：尽管主要关注Python，但前端界面可能使用HTML、...
仿花生日记官网源码.rar
10-23
"花生日记"很可能是一款与购物优惠、返利或社交电商相关的应用程序，而"仿"则意味着这个源码是参照其官网界面和功能进行开发的，可能用于学习、研究或创建类似的应用。 【描述解析】 "仿花生日记官网源码" 的描述...
Honest-Journal:复杂的日记
03-11
8. **可能的API集成**：为了增强功能，Honest-Journal可能还整合了第三方服务，如天气API、情绪分析API等，以提供更丰富的日志体验。 9. **版本控制**：文件名为"Honest-Journal-master"暗示了项目可能使用Git进行...
TCBBS论坛 心情日记
12-09
这个压缩包“tcbbs8”很可能包含了该论坛系统的第八个版本或更新，用于搭建一个具有个性化和互动性的在线社区平台。下面我们将深入探讨TCBBS论坛系统的关键组成部分和可能涉及的技术知识点。 1. **论坛系统架构**：...
vue习题
热门推荐
qq_45179355的博客
06-03 1万+
一 单选题，每道小题1分，共9道小题，9分1. 下面选项中，可以用来创建store实例对象的是（）。A new Vuex.Store({})B new Vue({})C new Vuex({})D new Store({})2. 以下代码 {{this.$store.state.name}}var store = new Vuex.Store({ state:{name:'store'}})var vm = new Vue({...
Vue.js学习笔记-进阶部分+完整实现代码
qq_31965515的博客
04-17 794
深入响应式 追踪变化： 把普通js对象传给Vue实例的data选项，Vue将使用Object.defineProperty把属性转化为getter/setter（因此不支持IE8及以下），每个组件实例都有相应的watcher实例对象，它把属性记录为依赖，当依赖项的setter被调用的时候，watcher会被通知并重新计算，从而更新渲染 变化检测： Vue不能检测到对象属性的添...
进入/离开&列表过渡总结
weishichuan4321的博客
04-16 1727
概述vue在插入、更新或移除dom时，提供多种不同方法的应用过渡效果，包括以下工具：（1）在css过渡和动画中自动应用class（2）可以配合第三方css动画库，如animate.css（3）在过渡钩子函数中使用javascript直接操作dom（4）可以配合第三方javascript动画库，如velocity.js单元素/组件的过渡vue提供了transition的封装组件，在下列情形中，可以给...
思维进化算法优化BP神经网络——非线性函数拟合.rar
07-26
神经网络的matlab案例，本案例介绍如下： 技术深度：案例详细介绍了如何使用MATLAB进行深度学习模型的构建、训练和测试。 实际应用：通过具体的图像识别任务，展示模型的实际应用效果，让你直观感受神经网络的强大能力。 代码解析：提供完整的MATLAB代码，并对关键部分进行详细注释，帮助你理解每一步的工作原理。 优化策略：探讨不同的训练策略和参数调整方法，优化模型性能。
穿山甲水平井导向系统用户手册
07-26
国内一款高水平的水平井地质导向系统，双向拟合，结合三维地质模型进行三维导向
基于YOWOv2的视频动作检测python源码+模型+训练源码+项目说明（使用UCF24数据集）.zip
07-26
【1】项目代码完整且功能都验证ok，确保稳定可靠运行后才上传。欢迎下载使用！在使用过程中，如有问题或建议，请及时私信沟通，帮助解答。 【2】项目主要针对各个计算机相关专业，包括计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。 【3】项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 【4】如果基础还行，或热爱钻研，可基于此项目进行二次开发，DIY其他不同功能，欢迎交流学习。 【注意】 项目下载解压后，项目名字和项目路径不要用中文，否则可能会出现解析不了的错误，建议解压重命名为英文名字后再运行！有问题私信沟通，祝顺利！ 基于YOWOv2的视频动作检测python源码+模型+训练源码+项目说明（使用UCF24数据集）.zip基于YOWOv2的视频动作检测python源码+模型+训练源码+项目说明（使用UCF24数据集）.zip基于YOWOv2的视频动作检测python源码+模型+训练源码+项目说明（使用UCF24数据集）.zip基于YOWOv2的视频动作检测python
【SCI1区】Matlab实现三角测量拓扑聚合优化器TTAO-Transformer-GRU故障诊断算法研究.rar
07-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
从个人角度看什么是加密算法
最新发布
07-26
个人文章，有需要的下载：从个人角度看什么是加密算法
学习vue3 第三十八章
08-12
但是，我可以给你一些关于Vue 3的基本知识和学习资源。 Vue 3是一个流行的JavaScript框架，用于构建用户界面。它是Vue.js的最新版本，带来了一些新的特性和改进。 对于学习Vue 3，你可以从官方文档开始。Vue官方...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值