学习Vue日记第8天

列表交错过渡

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

加油!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值