列表搜索过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="searchName">
<ul>
<li v-for="(p,index) in filterPersons" :key="index">
{{index}}---{{p.name}}---{{p.age}}
</li>
<br>
<button @click="setOrderType(1)">年龄升序</button>
<button @click="setOrderType(2)">年龄降序</button>
<button @click="setOrderType(0)">原本顺序</button>
</ul>
</div>
<script src="../vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
searchName: '',
orderType: 0,//原本顺序为0，升序为1，降序为2
persons: [
{ name: 'wym', age: 18 },
{ name: 'lin', age: 19 },
{ name: 'shi', age: 20 }
],
},
computed: {
filterPersons() {
//获取数据
const { searchName, persons, orderType } = this;
let fPersons;
//filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
fPersons = persons.filter(p => p.name.indexOf(searchName) != -1);
//排序
if (orderType !== 0) {
fPersons.sort(function (p1, p2) {//返回负数p1在前，返回正数p2在前
if (orderType == 2) {
return p2.age - p1.age;//降序
} else {
return p1.age - p2.age;//升序
}
})
}
return fPersons;
}
},
methods: {
setOrderType(thisType) {
this.orderType = thisType;
}
}
})
</script>
</body>
</html>
数组的filter方法
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
filter() 不会对空数组进行检测。
filter() 不会改变原始数组。
数组的排序方法sort
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。
两个参数a，b
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回负值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回正值。
事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 绑定监听 -->
<button @click="test">test</button>
<button @click="test1(123)">test1</button>
<button @click="test2">test2</button>
<button @click="test3(123,$event)">test3</button>
<!-- 事件修饰 -->
<div style="width: 200px;height:200px;background-color:red" @click="test4">
<div style="width: 100px;height:100px;background-color:blue" @click.stop="test5"></div>
</div>
<a href="http://www.baidu.com" @click.prevent="test6">baidu</a>
<br>
<!-- 按键修饰符 -->
<input type="text" @keyup.enter="test7">
<br>
<input type="text" @keyup.13="test7">
</div>
<script src="../vue.js"></script>
<script>
//创建实例
const vm = new Vue({
el: '#app',
data: {
test() {
alert("abc")//abc
},
test1(number) {
alert(number)//123
},
test2(event) {
alert(event.target.innerHTML)//test2
},
test3(number, event) {
alert(event.target.innerHTML)//test3
},
test4() {
alert('out')
},
test5(event) {
// event.stopPropagation();//阻止冒泡
alert('inner')
},
test6(event) {
// event.preventDefault();//阻止事件默认行为
},
test7(event) {
//点击enter键时返回输入的内容
// if (event.keyCode == 13) {
// alert(event.target.value)
// }
alert(event.target.value)
}
}
})
</script>
</body>
</html>
表单数据的收集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<form action="/xxx" @submit.prevent="handleSubmit">
<span>userName:</span>
<input type="text" v-model="username">
<br>
<span>password:</span>
<input type="text" v-model="password">
<br>
<span>sex</span>
<input type="radio" id="female" value="女" v-model="sex">
<label for="female">女</label>
<input type="radio" id="male" value="男" v-model="sex">
<label for="male">男</label>
<br>
<span>favorite</span>
<input type="checkbox" id="basket" value="basket" v-model="likes">
<label for="basket">篮球</label>
<input type="checkbox" id="foot" value="foot" v-model="likes">
<label for="foot">足球</label>
<input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
<label for="pingpang">乒乓</label>
<br>
<span>city</span>
<select v-model="cityID">
<option value="">未选择</option>
<option :value="p.id" v-for="(p,index) in allCity" :key="index">{{p.name}}</option>
</select>
<br>
<span>介绍</span>
<textarea cols="30" rows="10" v-model="description"></textarea>
<br>
<input type="submit" value="注册">
</form>
</div>
<script src="../vue.js"></script>
<script>
//创建实例
const vm = new Vue({
el: '#app',
data: {
username: '',
password: '',
sex: '',
likes: ['foot'],
allCity: [{ id: 1, name: 'BJ' }, { id: 2, name: 'SH' }, { id: 3, name: 'GD' }],
cityID: '3',
description: '输入内容'
},
methods: {
handleSubmit() {
console.log(this.username + " " + this.password + " " + this.sex + " " + this.likes + " " + this.allCity[this.cityID - 1].name + " " + this.description)
}
}
})
</script>
</body>
</html>
Vue实例生命周期
初始化：new Vue()=>beforeCreate=>created=>beforeMount=>mounted(挂载)
更新：=>beforeUpdate=>updated
销毁死亡：=>beforeDestroy=>destroy
其中最常用的是mounted和beforeDestroy：
mounted：发送Ajax请求，启动定时器等异步任务
beforeDestroy：做收尾工作，清除定时器等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="destoryVm">destory vue</button>
<p v-show="isShow">wym</p>
</div>
<script src="../vue.js"></script>
<script>
//创建实例
const vm = new Vue({
el: '#app',
data: {
isShow: true,
},
mounted() {//初始化显示后立即调用
//使用箭头函数；如果不使用箭头函数，this指向window；this函数没有自己的this，继承上面的this；当使用回调函数的时候就使用箭头函数
this.intervalId = setInterval(() => {
console.log("1")
this.isShow = !this.isShow
}, 1000)
},
beforeDestroy() {
//防止内存泄漏,要不然setInterval一直触发
clearInterval(this.intervalId);
},
methods: {
destoryVm() {
this.$destroy();
}
}
})
</script>
</body>
</html>
过渡&动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.slide-fade-enter-active {
transition: all 0.3s ease;
}
.slide-fade-leave-active {
transition: all 0.8s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
.bounce-enter-active {
-webkit-animation: bounce-in .5s;
animation: bounce-in .5s;
}
.bounce-leave-active {
-webkit-animation: bounce-in .5s reverse;
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="app">
<button @click="isShow=!isShow">toggle</button>
<transition name="fade">
<p v-show="isShow">hello</p>
</transition>
</div>
<div id="app1">
<button @click="isShow=!isShow">toggle</button>
<transition name="slide-fade">
<p v-show="isShow">hello</p>
</transition>
</div>
<div id="example-2">
<button @click="show = !show">Toggle show</button>
<transition name="bounce">
<p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at
lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
</transition>
</div>
<script src="../vue.js"></script>
<script>
//创建实例
const vm = new Vue({
el: '#app',
data: {
isShow: true,
}
})
const vm1 = new Vue({
el: '#app1',
data: {
isShow: true,
}
})
new Vue({
el: '#example-2',
data: {
show: true
}
})
</script>
</body>
</html>
先写一个transition标签，给他属性name赋值xxx
在css里写：
.xxx-leave-active:消失时候的动效
.xxx-enter-active:出现时候的动效
.xxx-enter/.xxx-leave-to:动效最后的效果
过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 一个moment插件 -->
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>
</head>
<body>
<div id="app">
<p>{{date}}</p>
<p>{{date|dateString}}</p>
<p>{{date|dateString('YY-MM-DD HH:mm:ss')}}</p>
</div>
<script src="../vue.js"></script>
<script>
//创建实例
Vue.filter('dateString', function (value, format) {
return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
})
const vm = new Vue({
el: '#app',
data: {
date: new Date()
}
})
</script>
</body>
</html>
指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 防止在加载完成前出现{{}} */
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- ref自定义属性 -->
<p ref="content">helloworld</p>
<button @click="hint">提示</button>
<p v-cloak>{{msg}}</p>
<p v-upper-text="msg1"></p>
<p v-lower-text="msg1"></p>
<p v-upper-text="msg2"></p>
<p v-lower-text="msg2"></p>
</div>
<script src="../vue.js"></script>
<script>
//创建实例
//全局指令
Vue.directive('upper-text',function(el,binding){
el.textContent=binding.value.toUpperCase()
})
const vm = new Vue({
el: '#app',
data: {
msg: 'nihao',
msg1:'Helloworld',
msg2:'Nihaoshijie'
},
methods:{
hint(){
//调用自定义属性
alert(this.$refs.content.textContent);
}
},
//局部指令
directives:{
'lower-text'(el,binding){
el.textContent=binding.value.toLowerCase()
}
}
})
</script>
</body>
</html>
