列表交错过渡
<!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>
加油!!