style和class使用、 条件渲染、列表渲染之购物车显示不显示、v-for遍历数字，数组，对象、key值解释和数组的检测与更新、数据的双向绑定、事件处理之过滤案例、事件处理之事件修饰符、事件处理之按键修饰符
style和class使用
属性指令控制style和class
class可以等于：字符串，数组（用的多），对象
style可以等于：字符串，数组，对象（用的多）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
<style>
.red {
background-color: red;
font-size: 80px;
}
.green {
background-color: #a3e526;
font-size: 40px;
}
</style>
</head>
<body>
<div id="app">
<button @click="handleClick">点我变色</button>
<hr>
<div :class="class_obj">
金智秀 WOW
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
class_obj: 'red',
},
methods: {
handleClick(){
this.class_obj='green'
},
}
})
</script>
</html>
class可以等于：字符串，数组（用的多），对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
<style>
.red {
background-color: red;
font-size: 80px;
}
.green {
background-color: #a3e526;
font-size: 40px;
}
.background-pink {
background-color: #f1bac9;
}
.size-60 {
font-size: 70px;
}
.size-100 {
font-size: 70px;
}
</style>
</head>
<body>
<div id="app">
<button @click="handleClick">点我变色</button>
<hr>
<div :class="class_arry">
金智秀 WOW
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
// class_obj: {
// 'background-pink':true,
// 'size-60': false,
// },
class_arry: ['size-60',],
},
methods: {
handleClick() {
// this.class_obj['size-60']=true
// 向class_arry添加新的属性
this.class_arry.push('background-pink')
},
}
})
</script>
</html>
style可以等于：字符串，数组，对象（用的多）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
<style>
.red {
background-color: red;
font-size: 80px;
}
.green {
background-color: #a3e526;
font-size: 40px;
}
.background-pink {
background-color: #f1bac9;
}
.size-60 {
font-size: 70px;
}
.size-100 {
font-size: 70px;
}
</style>
</head>
<body>
<div id="app">
<button @click="handleClick2">点我变背景色</button>
<hr>
<div :style="style_obj">
金智秀 WOW
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
// style_str: 'font-size: 60px;background-color: bisque'
// background-color,可以更改为驼峰式的写法backgroundColor
// style_array: [{'font-size':'90px',backgroundColor:'aqua'}],
style_obj: {'font-size': '60px', 'background-color': 'bisque'}
},
methods: {
handleClick2(){
// 点击背景色发生变化
this.style_obj['background-color'] = 'orange'
}
}
})
</script>
</html>
条件渲染
1）写在标签上，控制标签的显示与不显示
2）v-if='布尔值/运算完是布尔值'...v-else-if='布尔值/运算完是布尔值'...v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<h1>条件渲染</h1>
<div v-if="score>=90">优秀</div>
<div v-else-if="score>=80 && score<90">良好</div>
<div v-else-if="score>=60 && score<80">及格</div>
<div v-else>不及格</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
score: 53
}
})
</script>
</body>
</html>
列表渲染之购物车显示不显示
v-for：放在标签上，可以循环显示多个此标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.top{margin-top: 50px}
</style>
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row top">
<div class="col-md-6 col-md-offset-3">
<div class="text-center" style="margin-bottom: 30px">
<button @click="handleClick" class="btn btn-success">加载购物车</button>
</div>
<div v-if="goodList.length>0">
<table class="table table-bordered">
<thead>
<tr>
<th>商品id号</th>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
</thead>
<tbody>
<tr v-for="good in goodList">
<th>{{good.id}}</th>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.count}}</td>
</tr>
</tbody>
</table>
</div>
<div v-else>购物车是空的</div>
</div>
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
goodList:[]
},
methods:{
handleClick(){
this.goodList = [
{id: 1, name: '小汽车', price: '89731元', count: 1},
{id: 2, name: '小火车', price: '33292元', count: 4},
{id: 3, name: '小飞机', price: '49184元', count: 5},
{id: 4, name: '小坦克', price: '29433元', count: 2},
{id: 5, name: '小轮船', price: '53224元', count: 6},
{id: 6, name: '小木筏', price: '48972元', count: 4},
]
}
}
})
</script>
</body>
</html>
v-for遍历数字，数组，对象
v-for 可以循环数组，数字，字符串，对象
v-for="key in obj"
-如果是数组：key就是数组的一个个元素
-如果是数字：key就是从1开始的一个个数字
-如果是字符串：key就是一个个字符
-如果是对象：key就是一个个value的值
v-for="(key,value) in obj"
-如果是数组：key就是数组的一个个元素,value就是索引
-如果是数字：key就是从1开始的一个个数字,value就是索引
-如果是字符串：key就是一个个字符,value就是索引
-如果是对象：key就是一个个value的值，value就是一个个key
每次循环的标签上，一般都会带一个属性： :key='值必须唯一'
-key值得解释：为了加速虚拟dom的替换
例如：v-for="good in goodList" :key="good.id"
循环数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.top{margin-top: 50px}
</style>
</head>
<body>
<div id="app">
<h1>循环数字</h1>
<ul>
<li v-for="i in num">
{{i}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
num:4, // 循环数字，从1开始到4结束
},
})
</script>
</body>
</html>
循环字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.top{margin-top: 50px}
</style>
</head>
<body>
<div id="app">
<h1>循环字符串</h1>
<ul>
<li v-for="i in str">
{{i}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
str:'jisoo is so beautiful哇哦！', // 循环字符串
},
})
</script>
</body>
</html>
循环对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.top{margin-top: 50px}
</style>
</head>
<body>
<div id="app">
<h1>循环对象</h1>
<ul>
<li v-for="i in obj">
{{i}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
obj:{name:'jisoo', age:21, hobby:['dance','sing']}
},
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.top{margin-top: 50px}
</style>
</head>
<body>
<div id="app">
<h1>循环对象</h1>
<ul>
<!-- k值在后，value值在前面-->
<li v-for="(value, key) in obj">
key值为：{{key}},value值为{{value}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
obj:{name:'jisoo', age:21, hobby:['dance','sing']}
},
})
</script>
</body>
</html>
li v-for="(i,a) in str", a为索引值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.top{margin-top: 50px}
</style>
</head>
<body>
<div id="app">
<h1>循环字符串</h1>
<ul>
<li v-for="(i,a) in str">
{{i}}----{{a}}
</li>
</ul>
<h1>循环对象</h1>
<ul>
<!-- k值在后，value值在前面-->
<li v-for="(value, key) in obj">
key值为：{{key}},value值为{{value}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
str:'jisoo is so beautiful哇哦！', // 循环字符串
obj:{name:'jisoo', age:21, hobby:['dance','sing']}
},
})
</script>
</body>
</html>
<h1>循环字数字</h1>
<ul>
<li v-for="(i,a) in num">
{{i}}----{{a}}
</li>
</ul>
<script>
var vm = new Vue({
el: '#app',
data: {
num: 4,
},
})
</script>
<h1>循环字数组</h1>
<ul>
<li v-for="(i,a) in girls">
{{i}}----{{a}}
</li>
</ul>
<script>
var vm = new Vue({
el: '#app',
data: {
girls:['迪丽热巴', '古力娜扎', '鞠婧祎', '杨幂']
},
})
</script>
key值解释和数组的检测与更新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.top{margin-top: 50px}
</style>
</head>
<body>
<div id="app">
<h1>数组的检测与更新</h1>
<button @click="handleClick">点我追加女生</button>
<button @click="handleClick1">点我追加一批女生</button>
<button @click="handleClick4">点我修改数组页面变化</button>
<p v-for="girl in girls">{{girl}}</p>
<h1>对象的检测与更新</h1>
<button @click="handleClick2">点我追加身高</button>
<button @click="handleClick3">点我追加身高--解决</button>
<p v-for="(value,key) in obj" type="">{{key}}---{{value}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
girls:['迪丽热巴', '古力娜扎', '鞠婧祎', '杨幂'],
obj: {'name':'zxr', age:18},
},
methods:{
handleClick(){
this.girls.push('美女小花')
},
handleClick1(){
var a = this.girls.concat(['美女99号', '美女88号', '美女77号'])
// 追加进去的结果需要有个结果去接受才能看到，也就是说它追加进去页面不会发生改变，它要返回一个值，就是有些对数组的操作它改变的的不是原数组
console.log(a)
},
handleClick2(){
this.obj.height = '167' // 监控不到变化
console.log(this.obj)
},
handleClick3() {
Vue.set(this.obj,'height',180) // 监控到变化了
},
handleClick4(){
Vue.set(this.girls,0,'新的迪丽热巴')
}
}
})
</script>
</body>
</html>
可以检测到变动的数组操作：
push：最后位置添加
pop：最后位置删除
shift：第一个位置删除
unshift：第一个位置添加
splice：切片
sort：排序
reverse：反转
检测不到变动的数组操作：
filter()：过滤
concat()：追加另一个数组
slice()：
map()：
原因：
作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）
数据的双向绑定
v-model的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.top{margin-top: 50px}
</style>
</head>
<body>
<div id="app">
<h1>数据的双向绑定</h1>
<p>text：<input type="text" v-model="name">您输入的内容是：{{name}}</p>>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: '',
},
})
</script>
</body>
</html>
事件处理
事件绑定 v-on:事件名='函数'---》@事件名='函数'
input事件处理
blur：失去焦点出发
change：发生变化触发
input：输入触发
事件处理之过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<h1>过滤案例</h1>
<p><input type="text" v-model="search" placeholder="请输入要搜索的内容" @input="handleSearch"></p>
<ul>
<li v-for="item in newdataList">{{item}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
search: '',
dataList: [
'a',
'abc',
'aaa',
'jdhei',
'hslaa',
'sjoqjd',
'sqqsnz',
'qwjwo',
],
newdataList:[
'a',
'abc',
'aaa',
'jdhei',
'hslaa',
'sjoqjd',
'sqqsnz',
'qwjwo',
]
},
methods:{
handleSearch(){
console.log('搜索的内容：', this.search)
this.newdataList = this.dataList.filter(item=>item.indexOf(this.search) >= 0)
}
}
})
</script>
</body>
</html>
复杂函数到简单函数的推导
handleSearch(){
console.log('搜索的内容：', this.search)
// var _this = this
this.newdataList=this.dataList.filter(function (item){
console.log(this)
if (item.indexOf(this.search)>=0){
return true
}else {
return false
}
})
}
handleSearch(){
console.log('搜索的内容：', this.search)
// this.newdataList = this.dataList.filter(item=>item.indexOf(this.search) >= 0)
}
"""推导流程 + 额外补充知识"""
1. 判断子字符串是否在字符串中(indexof)
var s = 'tttatom'
var a = 'a'
console.log(s.indexof(a)>=0)
2. es6 模板字符串 对象写法 箭头函数
var f = function(){
console.log('打印了')
}
2.1 不带参数的箭头函数
var f = () => {
console.log('打印了')
}
2.2 带一个参数，没有返回值得箭头函数
var f = name=>{
console.log('打印了', name)
}
2.3 带多个参数，没有返回值
var f = (name, age) =>{
console.log('打印了', name,age)
}
2.4 带一个参数，有返回值，函数体只有一行
var f = function(name){
return name + 'nb'
}
var f = name => name + 'nb'
"""有什么用？"""
1 简洁 2 箭头函数没有自己的this，会用上一层的this
var f = function(){
console.log('匿名函数的this', this)
}
var f1 = (){
console.log('箭头函数的this', this)
}
var obj ={
f: function(){
console.log('匿名函数的this', this)
}
f1: () =>{
console.log('匿名函数的this', this)
}
}
obj.f()
obj.f1()
事件处理之事件修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>事件修饰符</h1>
<h2>事件冒泡--通过 事件修饰符 stop ，加在子控件上，阻止事件冒泡</h2>
<ul @click="handleUl">
<li @click.stop="handleMn">美女</li>
<li @click="handleSg">帅哥</li>
</ul>
<h2>事件冒泡--通过 事件修饰符 self加在父控件上，只处理自己的事件</h2>
<ul @click.self="handleUl">
<li @click="handleMn">美女</li>
<li @click="handleSg">帅哥</li>
</ul>
<h3>阻止a标签跳转</h3>
<a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>
<h4>once只执行一次</h4>
<button @click.once="handleOnce">点我秒杀</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
handleUl() {
console.log('ul被点了')
},
handleMn() {
console.log('美女被点了')
},
handleSg() {
console.log('帅哥被点了')
},
handleA() {
console.log('a被点了')
},
handleOnce() {
console.log('恭喜你，秒到了')
}
}
})
</script>
</html>
事件处理之按键修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="search" placeholder="请输入搜索内容" @keyup.enter="handleUp">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
search: ''
},
methods: {
handleUp(event) {
console.log('火车被按了')
// if (event.code == 'Enter') {
// console.log('回车键被案例', event)
// }
}
}
})
</script>
</html>
浙公网安备 33010602011771号