列表过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本列表</title>
<!--引入Vue-->
<script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<div id="test01">
<!--遍历数据-->
<h2>人员列表</h2>
<input type="text" placeholder="请输入姓名" v-model="keyWord">
<ul>
<li v-for="(person,index) in filterPerson" :key="person.id" >
{{index}}-{{person.name}}-{{person.age}}-{{person.sex}}
</li>
</ul>
</div>
<!--设置不提示-->
<script type="text/javascript" >
Vue.config.productionTip = false;
const vm = new Vue({
data: {
keyWord:'',
persons: [
{id: '001', name: '周冬雨', age: 18, sex: '女'},
{id: '002', name: '周杰伦', age: 19, sex: '男'},
{id: '003', name: '马冬梅', age: 20, sex: '女'},
{id: '004', name: '温兆伦', age: 21, sex: '男'}
],
// filterPerson:[]
},
//用watch实现
// watch:{
// keyWord:{
// immediate:true, //立即监视,默认 ''
// handler(newData){
// this.filterPerson = this.persons.filter(
// (p)=>{return p.name.indexOf(newData) !== -1;}
// );
// }
// }
// }
//用计算属性
computed:{
filterPerson(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
}
}
})
vm.$mount('#test01')
</script>
</body>
</html>
列表排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本列表</title>
<!--引入Vue-->
<script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<div id="test01">
<!--遍历数据-->
<h2>人员列表</h2>
<input type="text" placeholder="请输入姓名" v-model="keyWord">
<button @click="flag=1">年龄升序</button>
<button @click="flag=2">年龄降序</button>
<button @click="flag=0">原顺序</button>
<ul>
<li v-for="(person,index) in filterPerson" :key="person.id" >
{{index}}-{{person.name}}-{{person.age}}-{{person.sex}}
</li>
</ul>
</div>
<!--设置不提示-->
<script type="text/javascript" >
Vue.config.productionTip = false;
const vm = new Vue({
data: {
keyWord:'',
flag:0, //0表示原顺序,1表示升序,2表示降序
persons: [
{id: '001', name: '周冬雨', age: 18, sex: '女'},
{id: '002', name: '周杰伦', age: 19, sex: '男'},
{id: '003', name: '马冬梅', age: 20, sex: '女'},
{id: '004', name: '温兆伦', age: 21, sex: '男'}
],
},
//用计算属性
computed:{
filterPerson(){
const arr = this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord) !== -1
})
//判断是否需要排序
if(this.flag){
arr.sort((p1,p2)=>{
return this.flag===1 ? p1.age-p2.age : p2.age-p1.age;
})
}
return arr;
}
}
})
vm.$mount('#test01')
</script>
</body>
</html>
Vue.set()方法:如果想在后期给vue对象添加响应式属性,必须这样,否则不是响应式,只能给data里面某一个对象里添加属性,不能直接给Vue添加属性
修改Vue对象数组元素时
- filter不会改变原数组
数据监测原理大总结(重要)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据监测</title>
<!--引入Vue-->
<script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<div id="test01">
<h1>学生信息</h1>
<button @click="student.age++">年龄+1</button><br/> <!--简单功能直接写-->
<button @click="addSex">添加性别属性,默认值:男</button><br/>
<button @click="addFriendInProList">在列表首位添加一个朋友</button><br/>
<button @click="updateFirstFriendName">修改第一个朋友的名字为:张三</button><br/>
<button @click="addHobby">添加一个爱好</button><br/>
<button @click="updateHobby">修改第一个爱好为:开车</button><br/>
<button @click="filterSmoke">过滤掉爱好者的抽烟</button><br/>
<h3>姓名:{{student.name}}</h3>
<h3>年龄:{{student.age}}</h3>
<h3 v-if="student.sex">性别:{{student.sex}}</h3>
<h3>爱好:</h3>
<ul>
<li v-for="(h,index) in student.hobby" :key="index" >
{{h}}
</li>
</ul>
<h3>朋友们:</h3>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}--{{f.age}}
</li>
</ul>
</div>
<!--设置不提示-->
<script type="text/javascript" >
Vue.config.productionTip = false;
const vm = new Vue({
data: {
student:{
name:'tom',
age:18,
hobby:['抽烟','喝酒','嫖娼'],
friends:[
{name:'jerry',age:35},
{name:'tony',age:38}
]
}
},
methods:{
addSex(){
// this.$set(this.student,'sex','男')
Vue.set(this.student,'sex','男')
},addFriendInProList(){
//朋友列表首位添加一名朋友
this.student.friends.unshift({name:'libai',age: 18})
},updateFirstFriendName(){
//修改第一个朋友的名字
this.student.friends[0].name='张三'
},addHobby(){
//添加一个hobby
this.student.hobby.push('赌博')
},updateHobby(){
//修改第一个爱好为:开车
this.student.hobby.splice(0,1,'开车') //从索引值为0开始,删除一个,在插入'开车'
// Vue.set(this.student.hobby,0,'开车')
// this.$set(this.student.hobby,0,'开车')
},filterSmoke(){
//过滤掉抽烟
this.student.hobby = this.student.hobby.filter((h)=>{
return h !== '抽烟'
})
}
}
})
vm.$mount('#test01')
</script>
</body>
</html>
收集表单信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>收集表单信息.html</title>
<!--引入Vue-->
<script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<div id="test01">
<form @submit.prevent="demo">
<!-- 双向绑定v-model ==> 默认收集value-->
<!--v-model.trim去掉数据前后的空格,数据中间空格不会去除-->
账号:<input type="text" v-model.trim="userInfo.account"> <br><br>
密码:<input type="password" v-model="userInfo.password"> <br><br>
<!--v-model.number只能限制输入数字类型-->
年龄:<input type="number" v-model.number="userInfo.age"> <br><br>
性别:
<input type="radio" name="sex" v-model="userInfo.sex" value="male">男
<input type="radio" name="sex" v-model="userInfo.sex" value="female">女 <br><br>
爱好:
<input type="checkbox" v-model="userInfo.hobby" value="吃饭">吃饭
<input type="checkbox" v-model="userInfo.hobby" value="睡觉">睡觉
<input type="checkbox" v-model="userInfo.hobby" value="打游戏">打游戏 <br><br>
所属小区
<select v-model="userInfo.city">
<option value="">请选择校区</option>
<option value="beijing">北京校区</option>
<option value="shanghai">上海校区</option>
<option value="shenzhen">深圳校区</option>
<option value="hangzhou">杭州校区</option>
</select> <br><br>
其他信息:
<!--v-model.lazy 失去焦点一瞬间vue才会收集 "其他信息" 里的信息-->
<textarea v-model.lazy="userInfo.other"></textarea> <br><br>
<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="https://baidu.com">《用户协议》</a> <br><br>
<button>提交</button>
</form>
</div>
</body>
<!--设置不提示-->
<script type="text/javascript" >
Vue.config.productionTip = false;
const vm = new Vue({
data: {
userInfo:{
account:'',
password:'',
sex:'',
age:'',
hobby:[],
city:'beijing',
other:'',
agree:false
}
},
methods:{
demo(){
//以json数据在控制台打印
console.log(JSON.stringify(this.userInfo))
}
}
})
vm.$mount('#test01')
</script>
</html>
日期类第三方类dayjs
https://www.bootcdn.cn/
- 下载(复制链接,ctrl+s)保存到桌面js文件夹
- 进入GitHut仓库看教程
引入dayjs.min.js
<script type="text/javascript" src="xxxx/dayjs.min.js"></script>
dayjs(时间戳对象)
方法:
.startOf('month')
.add(1, 'day')
.set('year', 2018)
.format('YYYY-MM-DD HH:mm:ss')
v-xxx指令
我们学过的指令:
v-bind : 单向绑定解析表达式,简写 :
v-model : 双向数据绑定
v-for : 遍历 数组、对象、字符串(不常用)
v-on : 绑定事件监听,简写 @
v-if : 条件渲染(动态控制节点是否存在)
v-else : 条件渲染(动态控制节点是否存在)
v-show : 条件渲染(动态控制节点是否展示)
新的指令
- v-text(不常用)
<h1 v-text="name"></h1> ==> 把标签内容全部替换为name
与{{name}}插值语法差不多,但是插值语法更灵活
- v-html
- v-cloak:网速慢的时候,可以加上,避免vue数据没加载时,模板已经渲染在页面上
<style>
[v-clock]{display: none;} <!-- 包含v-clock的不展示 -->
</style>
<div v-cloak id="test01">
<div v-text="name"></div>
<div v-html="name"></div>
</div>
- v-once
<!-- 只会读取一次n -->
<div v-once>初始的n值:{{n}}</div>
<div >现在的n值:{{n}}</div>
<button @click="n++">点我n+1</button>
- v-pre
自定义指令
生命周期
挂载流程
更新流程
销毁流程