学习Vue日记第8天_{ msg: '张三' }, { msg: '李四' }, { msg: '张芳芳' }, { ms-程序员宅基地

列表交错过渡

<!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>

加油!!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43061473/article/details/117677610

智能推荐

程序员用简单C语言一顿神操作,瞬间打造植物大战僵尸,无人不服_用c写了植物大战僵尸什么水平-程序员宅基地

文章浏览阅读1.9k次。近日被朋友忽悠着玩植物大僵尸,who怕who,展示我真正的技术到了,程序员可不是废的,顺便分享下,使用C语言写的植物大战僵尸简单的外挂源码,虽然这款植物大战僵尸辅助功能简单,但绝对实用,非常适合零基础小白入门练手。界面展示如下:源码展示如下:你的关注,便是小编持续分享的动力,我们下次见。声明:本文内容来源于网络,如有侵权请联系删除..._用c写了植物大战僵尸什么水平

软件测试之谈(一)_一谈到测试 用户测试-程序员宅基地

文章浏览阅读342次。转眼间,我工作已经大半年了,今天利用周末时间写一篇日记。对我在上海工作的一个总结,在这段时间里,我学习了白盒测试,学会了如何去编写白盒测试用例。我们项目组主要负责底层驱动的开发,代码由C/C++编写而成。对于我刚刚进入公司的实习生来讲,有很多难度。软件测试是软件开发中一个重要组成部分。当项目组开发软件时,需要遵照一系列步骤去进行,这些步骤构成了软件开发过程。在软件开发过程中的每一个步骤,都应该有明_一谈到测试 用户测试

SSH远程失败----WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!_等待数据失败。错误为 195887167。connection closed by remote h-程序员宅基地

文章浏览阅读860次。@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@IT IS POSSIBLE THAT SOM..._等待数据失败。错误为 195887167。connection closed by remote host, possibly d

vnc linux 6.1 注册码,OracleLinux6.1 64位 下配置VNC和Samba.doc-程序员宅基地

文章浏览阅读197次。OracleLinux6.1 64位 下配置VNC和SambaOracle Linux 6.1 (64位) 下配置VNC和SambaVNC Server配置首先验证是否安装了VNC Server,新版本改名叫tigerVNC,虎年的原因.yum list | grep vnc如果没有,在安装介质或者网络上找到并且安装;tigervnc-server.x86_64设置vnc server密码;vnc..._vncserver 6.1注册码

Android O HIDL的使用例子 -- 蓝牙HCI 服务进程[email protected]程序员宅基地

文章浏览阅读2.7k次,点赞2次,收藏16次。From1.1、Treble 计划概览 Android O 引入” Treble” 计划,目标是通过重构 Android OS 的 framework,使 Android 设备制造商能更快、更易、更低成本地升级 Android 版本。新的架构主要有两个特点:1)切分出 system 分区和 vendor 分区;2)使用 HIDL 勾通 system 分区[email protected]

NanoPC-T3 嵌入式开发板上手体验_nano pc t3-程序员宅基地

文章浏览阅读2.5k次。系统资源处理器nor flash [“固体硬盘” 容量小,速度快,价格高]nand flash 【硬盘 容量大,掉电数据不会丢失】RAMLCD基础资源 (接口资源)启动方式nand flash 启动 SD卡启动系统安装支持什么 怎么安装 一般安装在nand flash中用电脑上烧写软件 把引导安装程序 烧写到SD卡用电脑把 Linux系统复制到SD卡SD卡插入,开关设置_nano pc t3

随便推点

python 预编译_python预编译-程序员宅基地

文章浏览阅读647次。广告关闭腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元!我们可以通过下面的实例更好理解:import re string = hellomypythonhispythonourpythonendpattern =re.compile(.python.)#预编译result =pattern.findall(string)#找出符合模式的所..._python 预编译

java.io.FileNotFoundException 关于系统找不到指定文件的问题_arduino esp32 上传:java.io.filenotfound系统找不到指定文件-程序员宅基地

文章浏览阅读1.7w次,点赞2次,收藏3次。上传文件然后报java.io.FileNotFoundException: G:\HibernateWorkspace\codedog\out\artifacts\....(系统找不到指定的文件)然而文件路径和文件名称都已经存到了数据库表中。但是本地确实没有该文件。找了半天问题终于到原因了//判断文件夹是否存在,如果不存在则创建文件夹if (!file.exists()) { ..._arduino esp32 上传:java.io.filenotfound系统找不到指定文件

软件接口API规范_软件通用接口规范要求-程序员宅基地

文章浏览阅读1w次,点赞2次,收藏23次。软件接口API规范 当前版本:V1._软件通用接口规范要求

【Selenium】元素定位_定位多个元素的数组表达-程序员宅基地

文章浏览阅读558次。元素属性定位 id,name,class_name元素标签定位 tag_name超链接定位link_text ,partial_link_text元素路径定位Xpath选择器定位CSS_定位多个元素的数组表达

bompexpl.exploder_userexit 标准展BOM-程序员宅基地

文章浏览阅读420次。l_levels_to_explode NUMBER; l_module NUMBER DEFAULT 2; -- bom = 2 l_cst_type_id NUMBER DEFAULT - 1; -- all cost = -1 else 0 -- l_item_id NUMBER; -- l_orga..._bompexpl.exploder_userexit

知识图谱补全-ProjE: Embedding Projection for Knowledge Graph Completion_知识图谱 proje 模型的-程序员宅基地

文章浏览阅读2.2k次,点赞2次,收藏15次。ProjE: Embedding Projection for Knowledge Graph Completion阅读笔记backgroundmotivationmodelexperimentsconclusion会议:Proceedings of the Thirty-First AAAI Conference on Artificial Intelligence (AAAI-17)author :Baoxu Shi and Tim WeningerUniversity of Notre Dam_知识图谱 proje 模型的

推荐文章

热门文章

相关标签