一、绑定事件监听
接上集,如果想看vue基础请移步主页
1、默认事件形参event:
即在对象触发事件的函数的默认参数,即使在标签内触发函数位置没写event参数也可以在script函数中直接写:函数名(event){函数体},函数体内可以直接使用event参数
例如:
const {createApp}=Vue
createApp({
methods:{
getText(event){
console.log(event.target.innerHTML)
}
}
}).mount('#app')
说明:event.target.innerHTML是获得当前元素内的内容,例如以下代码
<button type="button" @click="getText">查看</button>
那么event.target.innerHTML的内容会获得:查看
target可以获得当前对象的属性列表,不仅是innerHTML还有:childNodes(子节点),className(类名),disabled(是否禁用),innerText(元素内文本)等。
- 小tips:innerHTML与innerText的区别:前者会识别标签内容,按照标签的特点显示,后者只是字符串,不会识别标签,如:
<div id="app">
<p v-text="link1"></p>
<p v-html="link2"></p>
</div>
<script>
const {createApp}=Vue
createApp({
data(){
return{
link1:'<a href="https://www.163.com">网易</a>',
link2:'<a href="https://www.163.com">网易</a>'
}
},
methods:{
}
}).mount('#app')
</script>
那么页面上第一个段落内容为<a href="https://www.163.com">网易</a>,第二个段落内容为:网易,单击即可跳转至https://www.163.com
2、事件修饰符
(1)阻止默认事件修饰符(prevent)
如在button标签内type设置为submit,单击按钮时,他将触发表单的action属性,默认进行跳转,如果想要阻止这类行为,将用到组织默认事件修饰符,ps:@click为事件绑定写法,click为单击事件
a.在标签内实现阻止默认事件:
<div id="app">
<form action="https://www.163.com">
<button type="submit" @click.prevent="go">提交</button>
</form></div>
<script>
const {createApp}=Vue
createApp({
methods:{
go(){
}
}
}).mount('#app')
b.在函数内实现阻止默认事件 :
<div>
<form action="https://www.163.com">
<button type="submit" @click="go">提交</button>
</form></div>
<script>
const {createApp}=Vue
createApp({
methods:{
go(event){
event.preventDefault()//阻止默认事件
}
}
}).mount('#app')</script>
这样就实现了阻止跳转的默认事件
(2)阻止冒泡事件(stopPropagation)
<div id="app">
<div id="red" @click="goRed">
<div id="green" @click="goGreen">
</div>
</div>
</div>
<script>
const {createApp}=Vue
createApp({
methods:{
goRed(event){
alert("Red")
},
goGreen(event){
alert("Green")
//阻止冒泡行为
event.stopPropagation()
}
}
}).mount('#app')
</script>
如上代码,当你有多个嵌套的元素,当单机内层元素时,将会依次触发外部元素的事件,例如上方代码,当你单击id值为green的div元素,浏览器将先弹出警告框内容为(Green),然后再弹出警告框内容为(Red),使用了stopPropagation后,单击id值为green的div元素后,不会在弹出其他警告框
(3)按键修饰符
a.写法:@事件名.案件名="函数名"
<div id="app">
<input type="button" value="" @keyup.enter="test">
</div>
<script>
const {createApp}=Vue
createApp({
data(){
return{
}
},
methods:{
test(){
alert("您按了回车键")
}
}
}).mount('#app')
</script>
b.写法:@事件名="函数名"
<div id="app">
<input type="button" value="" @keyup="test">
</div>
<script>
const {createApp}=Vue
createApp({
data(){
return{
}
},
methods:{
test(){
if(event.keyCode==13){
alert("您按了回车键")
}
}
}
}).mount('#app')
</script>
说明:在上方代码,没使用事件名.按键名的方式,而是在函数中判断了当前按键的编号是多少,从而实现
二、双向数据绑定
双向数据绑定(v-model),页面数据发生变化,脚本中的数据同时发生变化脚本中的数据发生变化,页面数据同时变化,类似于数据联动
<div id="app">
<h1>双向数据绑定</h1>
<p>
用户姓名:<input type="text" v-model="user.username">
</p>
<p>
用户密码:<input type="text" v-model="user.password">
</p>
<p>
性别:<input type="radio" v-model="user.sex" value="male">男
<input type="radio" v-model="user.sex" value="female">女
</p>
<p>
爱好:<input type="checkbox" name="hobby" v-model="user.hobby" value="sport">运动
<input type="checkbox" name="hobby" v-model="user.hobby" value="read">读书
</p>
<p>
学历:
<select v-model="user.education">
<option value="专科">专科</option>
<option value="本科">本科</option>
<option value="研究生">研究生</option>
</select>
</p>
<p>
用户描述:<textarea v-model="user.desc"></textarea>
</p>
<p>
<button type="button" @click="show">显示绑定数据</button>
</p>
</div>
<script>
const {createApp}=Vue
createApp({
data(){
return{
user:{
username:'',
password:'',
sex:'male',
hobby:['sport','read'],
education:'专科',
desc:''
}
}
},
methods:{
show(){
alert(JSON.stringify(this.user))
this.user.username='admin'
this.user.password='admin123'
this.user.sex='female'
}
}
}).mount('#app')
</script>
页面效果:
说明:因为sex的初始值为male,所以会显示value值为male对应的元素为选中状态,(ps:传统input控件不用写成v-model:value="值"的方式,默认绑定在value上),因为hobby的初始值包括sport和read,所以默认是选中状态,学历同上。
当单击显示绑定数据按钮时,根据事件触发show函数,使user对象中的username,password,sex重新赋值,页面上值也会发生相应的改变,这就是数据的双向绑定,单击按钮后:
三、class 与 Style 绑定
v-model用于数据的动态绑定,那么:class和:style是用来动态绑定样式的
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
.btn1{
width:100px;
height:30px;
font-size:16px;
color:red;
}
.btn2{
background-color: #0aed30;
border-left:solid 1px #ccc;
border-top:solid 1px #ccc;
border-right:solid 2px #666;
border-bottom:solid 2px #666;
}
</style>
</head>
<body>
<div id="app">
<button type="button" :class="className1">绑定样式</button>
<button type="button" :class="{btn1:btn1_choose,btn2:btn2_choose}">绑定对象样式</button>
<button type="button" :class="[className1,className2]">绑定数组样式</button>
<button type="button" :class="[btn1_choose?'btn1':'',btn2_choose?'btn2':'']">绑定数组样式中含数组运算</button>
<hr>
style绑定样式
<br>
<button type="button" :style="style1">按钮1</button>
</div>
<script>
const {createApp}=Vue
createApp({
data(){
return{
className1:'btn1',
className2:'btn2',
btn1_choose:false,
btn2_choose:true,
style1:{
width:'100px',
height:'30px',
fontSize:'16px',
color:'green'
}
}
}
}).mount('#app')
</script>
</body>
说明:上述代码,定义了类选择器.btn1和.btn2分别设置了样式以便区分调试,在元素内部属性class和style前加上':'就实现了动态绑定样式,例如第二个按钮,动态绑定了一个对象样式,也就是当btn1_choose值为true时,那么btn1的值就为true,这个元素就会有btn1的样式,btn2同理,若想改变样式可以通过设置btn1_choose、btn2_choose的真假值即可。第三个按钮动态绑定了一个数组样式,那么两个样式他都会有,如果想改变,只需改变data中的className1/className2的值即可。第四个按钮同理,只是增加了一个三元运算符。以此实现样式的动态绑定
四、条件渲染
1、v-if,v-else
<a href="#" v-if="user.username=='admin'">编辑</a>
<a href="#" v-else>详情</a>
这个很容易理解,v-if后的表达式为真,就会显示当前元素内容,若为假,则会显示v-else的内容
那么上述代码的意思为:如果(v-if)user对象的username值为admin就显示编辑,否则显示详情
2、v-show
也是用于控制元素的显示与隐藏当v-show后的表达式为真,就会显示当前元素内容,例子:
<a href="#" v-show="user.username=='admin'">编辑</a>
<a href="#" v-show="user.username!='admin'">详情</a>
五、列表渲染
1、v-for
也就是循环遍历一个数组,将里边的元素都显示到页面上
<div id="app">
<ul>
<li v-for="(u,index) in user">{{index}}_{{u.id}}_{{u.name}}_{{u.age}}</li>
</ul>
</div>
<script>
const {createApp}=Vue
createApp({
data(){
return{
user:
[{id:1,
name:'张三',
age:20},
{
id:2,
name:'李四',
age:21
}
]
}
},
methods:{
}
}).mount('#app')
</script>
上述代码说明:主要功能是循环遍历数组user将每一个元素独立显示在一个li标签中,v-for=(u,index),u代表user中的一条数据,index是该条数据的下标值,这个结果会显示两条li。这样减少了代码量,方便修改数据
六、计算属性(computed)
<div id="app">
姓:<input type="text" v-model="firstName1">
名:<input type="text" v-model="lastName1">
姓名:<input type="text" v-model="username1"><br><br>
姓:<input type="text" v-model="firstName2">
名:<input type="text" v-model="lastName2">
姓名:<input type="text" v-model="username2"><br><br>
</div>
<script>
const {createApp}=Vue
createApp({
data(){
return{
firstName1:'',
firstName2:'',
lastName1:'',
lastName2:'',
}
},
//计算属性
computed:{
username1(){
return this.firstName1+''+this.lastName1;
},
username2:{
get(){
return this.firstName2+''+this.lastName2
},
set(val){
let strArr= val.split("")
this.firstName2=strArr[0]
this.lastName2=strArr[1]
}
}
}
}).mount('#app')
</script>
上述代码将实现firstName和lastName的拼接,当firstName与lastName变化时,username也会跟着发生变化,例如firstName的值输入为:张,lastName输入为:三,那么username的值就是张三,而username2在这基础上也可以实现当username2值变化时,firstName与lastName也会发生变化。
七、监听属性(watch)
使用案例:
<div id="app">
姓:<input type="text" v-model="firstName">
名:<input type="text" v-model="lastName">
姓名:<input type="text" v-model="username"><br><br>
</div>
<script>
const {createApp}=Vue
createApp({
data(){
return{
firstName:'',
lastName:'',
username:''
}
},
watch:{
username(newVal,oldVal){//参数一:新数据,参数二:老数据
if(newVal){
let strArr = newVal.split('')
this.firstName = strArr[0]
this.lastName=strArr[1]
}
else{
this.firstName = ''
this.lastName=''
}
}
}
}).mount('#app')
</script>
上述代码实现了对username属性的监听,他会监听username值的变化,当他的值变化时,会检测到新数据,那么就会将firstName和lastName重新赋值,let strArr = newVal.split('')表示将新值分隔成一个数组,将第一个元素给到firstName,第二个元素给到lastName。比如username值更改为张三,那么lastName的值为:三,fistName值为:张