VUE修饰符
回顾
知识点
v-text
v-html
v-model
v-bind :
v-on @
v-once
v-show
v-if
v-else-if
v-else
v-for
MVVM 基于MVC的双向绑定设计模式
作业
商品布局
<!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>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.borderd {
width: 1196px;
height: 625px;
background-color: #f5f5f5;
margin: 50px auto;
padding: 20px 5px;
box-sizing: border-box;
}
.title {
border-left: 5px black solid;
font-size: 18px;
text-indent: 10px;
margin-bottom: 20px;
}
.content>img {
float: left;
}
.panel {
float: left;
width: 920px;
margin: -5px 10px;
}
.panel-item {
width: 220px;
height: 285px;
padding: 30px;
box-sizing: border-box;
background-color: white;
float: left;
margin: 5px;
}
.panel-item>img {
width: 140px;
height: 140px;
}
.price {
text-align: center;
color: red;
}
</style>
<script src="../vue.js"></script>
</head>
<body>
<div class="borderd" id="borderd">
<p class="title">潮电酷玩 ELECTRONICS</p>
<div class="content">
<img src="./img/01.jpg">
<div class="panel">
<div class="panel-item" v-for="goods in goods_list">
<img :src="'./img/'+goods.picture">
<p>{{ goods.name }}</p>
<p class="price">￥{{ goods.price }}</p>
</div>
</div>
</div>
</div>
<script>
var vue = new Vue({
el: "#borderd",
data: {
goods_list: [
{
picture: "02.jpg", id: 1, name: '法族高速U盘512g手机电脑两用车载防水', price: 99.8
}, {
picture: "03.jpg", id: 2,
name: '韩国现在挂烫机家用蒸汽熨斗小型手持挂', price: 299
}, {
picture: "04.jpg", id: 3, name: '惠普暗影精灵6电竞吃鸡联盟游戏办公笔记本', price: 19.9
}, {
picture: "05.jpg", id: 4, name: '华为智选力博得智能儿童牙刷高效净齿', price: 199
}, {
picture: "06.jpg", id: 5, name: '复读机学生小学初中英语学习同步课本', price: 299
}, {
picture: "07.jpg", id: 6, name: '支付宝收钱音响语音播报器商用微信二维码', price: 2299
}, {
picture: "08.jpg", id: 7, name: '夏新麦克风话筒音响一提全民无线K歌神器', price: 1299
}, {
picture: "09.jpg", id: 8, name: '小米手环3NFC版黑色心率睡眠监测智能', price: 599
}
]
}
})
</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>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
table {
background-color: #CACACA;
width: 1000px;
margin: 0 auto;
}
td,
th {
background-color: white;
text-align: center;
line-height: 30px;
}
.blue>td{
background-color: #7DB3FA !important;
}
.red>td{
background-color: red !important;
}
</style>
<script src="../vue.js"></script>
</head>
<body>
<div class="borderd" id="borderd">
<table>
<tr>
<th>id</th>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr v-for="student in student_list" :class="student.score>=90?'blue': student.score<60?'red':''">
<td>{{ student.id }}</td>
<td>{{ student.name }}</td>
<td>{{ student.sex }}</td>
<td>{{ student.score }}</td>
<td v-if="student.score >= 90">优秀</td>
<td v-else-if="student.score >= 80">良好</td>
<td v-else-if="student.score >= 60">及格</td>
<td v-else>不及格</td>
</tr>
</table>
</div>
<script>
var vue = new Vue({
el: "#borderd",
data: {
student_list: [
{ id: 1, name: '诸葛亮', sex: '男', score: 98 },
{ id: 2, name: '周瑜', sex: '男', score: 88 },
{ id: 3, name: '刘阿斗', sex: '男', score: 50 },
{ id: 4, name: '曹植', sex: '男', score: 90 },
{ id: 5, name: '张飞', sex: '男', score: 70 },
{ id: 6, name: '曹丕', sex: '男', score: 55 }
]
}
})
</script>
</body>
</html>
v-if和v-for混用-乘法口诀表
<!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>Document</title>
<script src="./vue.js"></script>
<style>
span{
display: none;
}
.red{
/* color: red; */
display: inline-block;
}
</style>
</head>
<body>
<div id="app">
<p v-for="i in 9">
<span v-for="j in 9" v-show="j <= i">
{{ j }} * {{ i }} = {{ i*j }}
</span>
</p>
<p v-for="i in 9">
<span v-for="j in 9" :class="j <= i?'red':''">
{{ j }} * {{ i }} = {{ i*j }}
</span>
</p>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
}
})
</script>
</body>
</html>
学员信息等级表
基本的vue结构
<!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>Document</title>
<script src="./vue.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
table{
width: 1000px;
margin: 0 auto;
background-color: black;
}
th,td{
text-align: center;
background-color: white;
line-height: 50px;
}
h1{
text-align: center;
line-height: 60px;
}
input{
margin: 0 auto;
display: inline-block;
width: 200px;
}
</style>
</head>
<body>
<div id="app">
<h1>学员信息</h1>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>成绩</th>
<th>操作</th>
</tr>
<tr v-for="s in students">
<td>{{ s.id }}</td>
<td>{{ s.name }}</td>
<td>{{ s.gender }}</td>
<td>{{ s.age }}</td>
<td>{{ s.socre }}</td>
<td>
<button>修改</button>
<button>删除</button>
</td>
</tr>
</table>
<hr />
<input placeholder="学员姓名" v-model="obj.name">
<input placeholder="学员性别" v-model="obj.gender">
<input placeholder="学员年龄" v-model="obj.age">
<input placeholder="学员成绩" v-model="obj.socre">
<input type="button" value="提交" @click="get_score">
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
obj: {
name: "",
gender: "",
age: "",
socre: ""
},
students: [
{
id: 1,
name: "张三",
gender: "男",
age: 18,
socre: 80
},
{
id: 2,
name: "李四",
gender: "女",
age: 21,
socre: 90
},
{
id: 3,
name: "王五",
gender: "男",
age: 18,
socre: 60
},
{
id: 4,
name: "赵六",
gender: "男",
age: 19,
socre: 85
},
{
id: 5,
name: "候七",
gender: "男",
age: 18,
socre: 80
},
]
},
methods: {
get_score(){
console.log(this.obj)
}
}
})
</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>Document</title>
<script src="./vue.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
table{
width: 1000px;
margin: 0 auto;
background-color: black;
}
th,td{
text-align: center;
background-color: white;
line-height: 50px;
}
h1{
text-align: center;
line-height: 60px;
}
input{
margin: 0 auto;
display: inline-block;
width: 200px;
}
</style>
</head>
<body>
<div id="app">
<h1>学员信息</h1>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>成绩</th>
<th>操作</th>
</tr>
<tr v-for="s in students">
<td>{{ s.id }}</td>
<td>{{ s.name }}</td>
<td>{{ s.gender }}</td>
<td>{{ s.age }}</td>
<td>{{ s.socre }}</td>
<td>
<button>修改</button>
<button>删除</button>
</td>
</tr>
</table>
<hr />
<input placeholder="学员姓名" v-model="obj.name">
<input placeholder="学员性别" v-model="obj.gender">
<input placeholder="学员年龄" v-model="obj.age">
<input placeholder="学员成绩" v-model="obj.socre">
<input type="button" value="提交" @click="get_score">
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
obj: {
id: 0,
name: "",
gender: "",
age: "",
socre: ""
},
students: [
{
id: 5,
name: "张三",
gender: "男",
age: 18,
socre: 80
},
{
id: 4,
name: "李四",
gender: "女",
age: 21,
socre: 90
},
{
id: 3,
name: "王五",
gender: "男",
age: 18,
socre: 60
},
{
id: 2,
name: "赵六",
gender: "男",
age: 19,
socre: 85
},
{
id: 1,
name: "候七",
gender: "男",
age: 18,
socre: 80
},
]
},
methods: {
get_score(){
if(this.obj.name.trim() === ""){
return alert("用户姓名不可以为空")
}
if(this.obj.name.trim() === ""){
return alert("用户姓名不可以为空")
}
if(this.obj.name.trim() === ""){
return alert("用户姓名不可以为空")
}
if(this.obj.name.trim() === ""){
return alert("用户姓名不可以为空")
}
var id = this.students?this.students[0].id+1:1
this.obj.id = id
var add_obj = {
...this.obj
}
this.obj = {
id: 0,
name: "",
gender: "",
age: "",
socre: ""
}
this.students.unshift(add_obj)
}
}
})
</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>Document</title>
<script src="./vue.js"></script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.container{
width: 600px;
margin: 20px auto;
}
.form-control {
padding: 10px;
width: 100%;
border: 1px solid #DDD;
border-radius: 4px;
vertical-align: middle;
outline: none;
}
.options{
background: #EEE;
}
.options li{
line-height: 30px;
padding: 0 10px;
cursor: pointer;
}
.options li:hover{
background: cornflowerblue;
color:#FFF;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<input class="form-control" type="text" placeholder="请输入搜索关键词" v-model="keywords"/>
<ul class="options">
<li v-for="v in result()">{{ v }}</li>
</ul>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data:{
keywords: "",
search_list: [],
list:[
'vue的优缺点',
'vue的作者',
'vue官网',
'mvvm设计模式',
'vue和react的区别'
]
},
methods: {
result(){
//通过keywords来筛选list当中的数据
var res = this.list.filter(
item=>{
return item.indexOf(this.keywords) !== -1
}
)
if(this.keywords.trim() === "" ){
return []
}
return res
}
}
});
</script>
</html>
事件处理
在vue开发当中，如果事件函数没有形参，那么在调用函数的时候，函数可以不加调用括号，这个时候调用函数，默认传递的第一个参数就是事件参数,但是如果有传参的必要（比如：分页，必须传递页码），vue提供了内置的变量$event来传递事件。
<body>
<div id="app">
<button @click="fun($event,1,2)">按钮</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data:{
},
methods: {
fun(event,a,b){
//event
console.log(a+b)
event.target.style.color="red"
}
}
});
</script>
修饰符
事件修饰符
事件冒泡：
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
事件冒泡顺序（从内到外）
event.stopPropagation()
stop
阻止冒泡事件，需要写道子的事件绑定上
<body>
<div id="app">
<div class="parent" @click="parent_fun">
<div class="child" @click.stop="child_fun">
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data:{
},
methods: {
parent_fun(){
alert("我是父容器")
},
child_fun(){
alert("我是子容器")
}
}
});
</script>
self
阻止冒泡事件，需要写道父的事件绑定上
<body>
<div id="app">
<div class="parent" @click.self="parent_fun">
<div class="child" @click="child_fun">
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data:{
},
methods: {
parent_fun(){
alert("我是父容器")
},
child_fun(){
alert("我是子容器")
}
}
});
</script>
prevent
取消默认事件
<body>
<div id="app">
<form>
<input name="username">
<button type="submit" @click.prevent="child_fun">提交</button>
</form>
</div>
</body>
<script>
new Vue({
el: '#app',
data:{
},
methods: {
parent_fun(){
alert("我是父容器")
},
child_fun(){
alert("我是子容器")
}
}
});
</script>
capture
在事件冒泡的过程当中，优先执行含有capture修饰符的事件，打乱了冒泡顺序。
<body>
<div id="app">
<div class="parents" @click.capture="parents_fun">
<div class="parent" @click.capture="parent_fun">
<div class="child" @click.capture="child_fun">
</div>
</div>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data:{
},
methods: {
parents_fun(){
alert("我是仙贝容器")
},
parent_fun(){
alert("我是父容器")
},
child_fun(){
alert("我是子容器")
}
}
});
once
阻止事件连续执行，只能执行一次。
<body>
<div id="app">
<button @click.once="fun">点击</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data:{
},
methods: {
fun(){
console.log("嘿嘿嘿")
}
}
});
</script>
passive
可以让滚动事件立即执行
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div>
按键修饰符
在触发指定的按键后，触发事件
-
.enter只有回车可以触发 -
.tab只有tab可以触发 -
.delete(捕获“删除”和“退格”键)只有删除或者退格可以触发 -
.esc只有esc可以触发 -
.space只有空格可以触发 -
.up只有光标上可以触发 -
.down只有光标下可以触发 -
.left只有光标左可以触发 -
.right只有光标右可以触发
由于按键类型太多，可以使用键盘码（keycode）来代替按键名称，实现所有按键都可以执行
自定义按键修饰符
<body>
<div id="app">
<input @keydown.enter="fun">
<input @keydown.13="fun">
<input @keydown.hhh="fun">
</div>
</body>
<script>
Vue.config.keyCodes.hhh=13
new Vue({
el: '#app',
data:{
},
methods: {
fun(events){
console.log(events)
}
}
});
</script>
表单修饰符
lazy
number
trim
<!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>Document</title>
<script src="./vue.js"></script>
<style>
.parents{
width: 700px;
height: 700px;
background-color: yellowgreen;
}
.parent{
width: 500px;
height: 500px;
background-color: skyblue;
}
.child{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<!-- lazy：<input v-model.lazy="message"> <br /> 就数据被修改的频率改为失焦后修改-->
<!-- number：<input v-model.number="message"> <br /> 将输入的内容转化为数字类型 -->
<!-- trim：<input v-model.number="message"> <br /> 取消输入的空格 -->
{{ message }} <br>
{{ message+1 }}
</div>
</body>
<script>
Vue.config.keyCodes.hhh=13
new Vue({
el: '#app',
data:{
message: 1
}
});
</script>
</html>
$set
直接使用索引为数组添加元素或者使用键为对象添加值，vue不会自动刷新,$set(目标对象，对应的索引或者键，需要修改的值)
<!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>Document</title>
<script src="./vue.js"></script>
<style>
.parents{
width: 700px;
height: 700px;
background-color: yellowgreen;
}
.parent{
width: 500px;
height: 500px;
background-color: skyblue;
}
.child{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<h2 v-for="user in user_list">{{ user }}</h2>
<button @click="add">添加</button>
</div>
</body>
<script>
Vue.config.keyCodes.hhh=13
new Vue({
el: '#app',
data:{
user_list: [
"张三",
"张麻子",
"李四"
]
},
methods:{
add(){
// this.user_list[3] = "葫芦娃" //直接使用索引为数组添加元素或者使用键为对象添加值，vue不会自动刷新
// this.$set(this.user_list,3,"葫芦娃")
this.user_list.unshift("葫芦娃")
console.log(this.user_list)
}
}
});
</script>
</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>Document</title>
<script src="./vue.js"></script>
<style>
.parents{
width: 700px;
height: 700px;
background-color: yellowgreen;
}
.parent{
width: 500px;
height: 500px;
background-color: skyblue;
}
.child{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<div>
<label>姓名</label>
<input v-model="form_date.name"/>
</div>
<div>
<label>性别</label>
<input type="radio" value="男" name="gender" v-model="form_date.gender"/> 男
<input type="radio" value="女" name="gender" v-model="form_date.gender"/> 女
</div>
<div>
<label>爱好</label>
<input type="checkbox" name="hobby" value="唱" v-model="form_date.hobby"/> 唱
<input type="checkbox" name="hobby" value="跳" v-model="form_date.hobby"/> 跳
<input type="checkbox" name="hobby" value="rap" v-model="form_date.hobby"/> rap
</div>
<div>
<label>工作</label>
<select v-model="form_date.job">
<option value="程序员">程序员</option>
<option value="外卖员">外卖员</option>
<option value="快递员">快递员</option>
</select>
</div>
<button @click="submit">提交</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data:{
form_date: {
name: "老王",
gender: "男",
hobby: ["唱", "rap"],
job: "程序员"
}
},
methods:{
submit(){
console.log(this.form_date)
}
}
});
</script>
</html>
localStorage
localstorage是h5新特性
localstorage存在本地内存
localstorage存储数量：比较大
localstorage存储格式：字符串（json格式字符串）
json数据格式化
JSON.stringfy({对象}) 对象 转换为 json字符串
JSON.parse json字符串转换为对象
localStorage的方法
添加数据
localStorage.setItem(key,value) json字符串
获取数据
localStorage.getItem(key) json字符串 JSON.parse(localStorage.getItem(key))
删除数据
loaclStorage.removeItem(key)
352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
