Vue基本使用与文本指令
1Style 和 Class
数据的绑定
语法
-
:属性名=js变量/js语法
-
:class=’js变量、字符串、js数组’
class：三目运算符、数组、对象 -
:style=’js变量、字符串、js数组’
style：三目运算符、数组[{backgreound: ‘red’},]、对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
.red {
background-color: red;
}
.size {
font-size: 40px;
}
</style>
</head>
<body>
<div id="app">
<h1>class的使用</h1>
<div :class="classObj">
我是class，的div
</div>
<h1>style的使用</h1>
<!-- <div style="background-color: aquamarine;font-size: 50px">-->
<div :style="styleObj">
我是style，的div
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
// class的字符串用法
classStr: 'red',
// class的数组写法,因为类本身可以放多个，用数组最合适
classList: ['red'],
// class的对象
classObj: {red: true, size: false},
// style 的字符串写法，以后改不好改
styleStr: 'background-color: aquamarine;font-size: 50px',
// style的数组写法
// styleList: [{'background-color': 'green'}, {'font-size': '80px'}]
//样式如果是多个单词用- 链接的形式可以写成驼峰
styleList: [{backgroundColor: 'green'}, {fontSize: '80px'}],
// style的对象写法
styleObj: {backgroundColor: 'blue', fontSize: '40px'}
}
})
</script>
</html>
2 条件渲染
写在标签上，控制标签的显示与不显示
- v-if='布尔值/运算完是布尔值'
- v-else-if='布尔值/运算完是布尔值'
- v-else
<!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>
<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>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
score: 98
}
})
</script>
</html>
3列表渲染
- v-for：放在标签上，可以循环显示多个此标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></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-danger">加载购物车</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>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
goodList: []
},
methods: {
handleClick() {
// 假设去后端加载的数据
this.goodList = [{id: 1, name: '小汽车', price: '29999元', count: 1},
{id: 2, name: '钢笔', price: '9元', count: 2},
{id: 3, name: '铅笔', price: '4元', count: 10},
{id: 4, name: '苹果', price: '2元', count: 3},]
}
}
})
</script>
</html>
3.1v-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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for遍历数组(列表)、对象(字典)</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<style>
table, td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<div id="box">
<h2>数组（列表）for循环遍历</h2>
<ul>
<li v-for="(value,index) in list_test">{{index}} —— {{value}}</li>
</ul>
<h2>对象（字典）for循环遍历</h2>
<ul>
<li v-for="(value,key) in dic_test">{{key}} —— {{value}}</li>
</ul>
<h2>数组（列表）套对象（字典）for循环遍历</h2>
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>国籍</td>
</tr>
<tr v-for="info in summary_test">
<td>{{info.name}}</td>
<td>{{info.age}}</td>
<td>{{info.gender}}</td>
<td>{{info.country}}</td>
</tr>
</table>
</div>
</body>
<script>
let vm = new Vue({
el: '#box',
data: {
list_test: ['First', 'second', 'Third', 'Forth', 'Fifth'],
dic_test:{name: 'Darker', age: 18, gender: 'male'},
summary_test: [
{name: 'Alan', age: 23, gender: 'male', country: 'America'},
{name: 'Ben', age: 15, gender: 'male', country: 'Australia'},
{name: 'Cindy', age: 12, gender: 'female', country: 'Japan'},
{name: 'Darker', age: 18, gender: 'male', country: 'China'},
{name: 'Elisa', age: 26, gender: 'female', country: 'Mexico'},
]
}
})
</script>
</html>
每次循环的标签上，一般都会带一个属性： :key='值必须唯一'
vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）
在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一
页面更新之后，会加速DOM的替换（渲染）
:key="变量"
数组的检测与更新
可以检测到变动的数组操作：
push：最后位置添加
pop：最后位置删除
shift：第一个位置删除
unshift：第一个位置添加
splice：切片
sort：排序
reverse：反转
检测不到变动的数组操作：
filter()：过滤
concat()：追加另一个数组
slice()：
map()：
原因：
作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）
解决方法：
// 方法1：通过 索引值 更新数组（数据会更新，但是页面不会发生改变）
vm.arrayList[0]
"Alan"
vm.arrayList[0]='Darker'
"Darker"
// 方法2：通过 Vue.set(对象, index/key, value) 更新数组（数据会更新，页面也会发生
改变）
Vue.set(vm.arrayList, 0, 'Darker')
4事件处理
-
change 和 blur 最本质的区别：
如果输入框为空，失去焦点后，change不会触发，但是blur会触发
-
过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p><input type="text" v-model="search" placeholder="请输入要搜索的内容" @input="handelInput"></p>
<ul>
<li v-for="item in newdataList">{{item}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
search: '',
dataList: [
'a',
'at',
'atom',
'be',
'beyond',
'cs',
'csrf',
'd',
'dddd',
],
newdataList:[
'a',
'at',
'atom',
'be',
'beyond',
'cs',
'csrf',
'd',
'dddd',
] //定义两个列表存储同样的值 input事件将新的列表等于旧列表过滤后的数据展示的是新的列表中的数据
//这样便于数据回退
},
methods: {
handelInput() {
this.newdataList = this.dataList.filter(
(item)=> {
console.log(item)
console.log(item.indexOf(this.search))
if (item.indexOf(this.search) >= 0) {
// 判断search在不在item中如果不在则返回false返回false则不展示 保留则继续展示
return true
} else {
return false
}
}
)
}
}
//简写形式
// methods:({
// handelInput() {
// this.newdataList = this.dataList.filter(
// (item)=> item.indexOf(this.search) >= 0)
// }//直接返回判定的结果 true或者false来决定保留还是过滤掉
// })
})
</script>
</body>
</html>
- 数组的过滤和箭头函数补充
<html>
<body>
<script>
// 1 补充：数组过滤方法，内置的
// var l = ['a', 'at', 'atom', 'be', 'beyond', 'cs',
// 'csrf',
// 'd',
// 'dddd',
// ]
// // filter数组内置的，需要传一个匿名函数，接受一个参数，会循环的从数组中取出值，传入匿名函数，执行
// // 匿名函数返回true或false，如果返回true，该值保留，如果返回false该值丢弃
// l = l.filter(function (item) {
// console.log('进来一个值：',item)
// return false
// })
// console.log(l)
//2 判断子字符串是否在字符串中
// var s='tttatom'
// var a ='a'
// console.log(s.indexOf(a)>=0)
// 3 es6 模板字符串 `` 对象写法 箭头函数
// var f=function (){
// console.log('打印了')
// }
//3.1 不带参数的箭头函数
// var f = () => {
// console.log('打印了')
// }
// 3.2 带一个参数，没有返回值得箭头函数
// var f = name=>{
// console.log('打印了', name)
// }
// 3.3 多个参数，没有返回值
// var f = (name,age) => {
// console.log('打印了', name,age)
// }
// 3.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()
</script>
</body>
</html>
4.1事件修饰符
.stop 只处理自己的事件，不向父控件冒泡
.self 只处理自己的事件，子控件冒泡的事件不处理
.prevent 阻止a链接的跳转
.once 事件只会触发一次（适用于抽奖页面）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<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() {
alert('ul被点了')
},
handleMn() {
alert('美女被点了')
},
handleSg() {
alert('帅哥被点了')
},
handleA() {
alert('a被点了')
},
handleOnce() {
alert('恭喜你，秒到了')
}
}
})
</script>
</html>
4.2按键修饰符
<!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('回车按键被按了')
alert('你被按了')
// if (event.code == 'Enter') {
// console.log('回车键被案例', event)
// }
}
}
})
</script>
</html>
浙公网安备 33010602011771号