【vue3】03-vue的基础语法
vue的基础语法
- vue的事件绑定
-
- v-on
- vue的条件渲染
-
- v-if、v-else和v-else-if
- v-if和v-show
- template元素
- vue的列表渲染
-
- v-for
vue的事件绑定
v-on
如果我们需要给元素绑定一个事件，就使用v-on指令
基本使用:
在元素标签中v-on:事件类型 = “事件名”，下面以给div绑定点击事件和鼠标移入事件为例：
<div class="box" v-on:click="divClick">div>
<div class="box" v-on:mousemove="mouseMove">div>
语法糖写法：
可以将v-on: 简写为@，同样以点击事件和鼠标移入事件为例：
<div class="box" @click="divClick">div>
<div class="box" @mousemove="mouseMove">div>
同时绑定多个事件：
元素是可以同时绑定多个事件的，写在一行内即可：
<div class="box" @mousemove="mouseMove" @click="divClick">多个事件绑定div>
如果同时绑定的事件特别多，建议直接绑定一个对象：
<div class="box" v-on="{ click: divClick, mousemove: divMove }">div>
v-on的参数传递：
使用@事件类型监听事件传递参数及在methods中定义方法接收参数时，需要注意参数问题，此处以@click点击事件为例：
- 在不需要传递参数时，即只有默认传入的event对象时，后面的( )可以不写
- 当明确写入传递参数时，将参数写入( )内
- 如果既有自己的参数，又需要使用event对象，可以使用
$event传入
代码演示：
<body>
<div id="app">
<button @click="btn1Click">按钮1button>
<button @click="btn2Click('sevgilid',18)">按钮2button>
<button @click="btn3Click('sevgilid',18,$event)">按钮3button>
div>
<script src="../js/vue.js">script>
<script>
const app = Vue.createApp({
data() {
return {
message: 'hello vue'
}
},
methods:{
// 1.默认参数：event对象
// 总结：如果在绑定事件的时候，没有传递任何的参数，那么event对象会被默认传递进来
btn1Click(event){
console.log("btn1click",event);
},
// 2.明确参数
btn2Click(name,age){
console.log("btn2click",name,age);
},
// 3.明确参数+event参数
btn3Click(name,age,event){
console.log("btn2click",name,age,event);
}
}
})
app.mount('#app')
script>
body>
vue的条件渲染
v-if、v-else和v-else-if
基本使用：
- 用法和原生JS语句的if，else，else if通过条件判断为ture时执行相似
- v-if，v-else和v-else-if是
条件判断为true时渲染
用法示例：
<body>
<div id="app">
<div class="info" v-if="Object.keys(info).length">
<h2>个人信息h2>
<ul>
<li>
姓名：{{info.name}}li>
<li>年龄:{{info.age}}li>
ul>
div>
<h2 v-else>info里没有数据，无法正确展示信息h2>
div>
<script src="../js/vue.js">script>
<script>
const app = Vue.createApp({
data() {
return {
info:{name:"sevgilid",age:18}
}
}
})
app.mount('#app')
script>
body>
代码演示2：
<body>
<div id="app">
<h1 v-if="socre>90">优秀h1>
<h2 v-else-if="score>80">良好h2>
<h3 v-else-if="score>60">及格h3>
<h4 v-else>不及格的fwh4>
div>
<script src="../js/vue.js">script>
<script>
const app = Vue.createApp({
data() {
return {
score: 30
}
}
})
app.mount('#app')
script>
body>
v-if和v-show
共同点：
- v-show和v-if都是根据一个条件决定是否显示元素或者组件
- 当条件为true时，才会展示对应的元素或组件，false时则不予展示
不同点：
用法上不同：
v-show不能和v-else或v-else-if一起使用；v-show是不支持template；
本质上的不同：
v-show来的展示或隐藏是通过CSS的display属性来进行切换的，也就是说其DOM无论如何都是存在的；- 而当
v-if的条件为false时，其对应的原生压根不会被渲染到DOM中；
v-if和v-show的选择：
- 如果元素需要
频繁在显示和隐藏之间进行切换，使用v-show； - 如果
不会频繁的发生切换，使用v-if；
template元素
上述v-if和v-show区别时提到了，v-show是不支持template的，此处的template元素需要单独提出来说一下：
- 这个元素时
Vue3新出的用来包裹的元素, 目的是解决Vue2只能用div包裹，页面也会出现过多的html结构的缺点 template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上
案例体验template：
- 需求：希望同时切换多个元素，通常情况下我们会包裹一个div，但如果并不希望多出一个html结构被渲染；
- 这个时候就可以使用template
<div id="app">
<template v-if="isShow">
<h2>{{ message }}h2>
<h2>{{ message }}h2>
<h2>{{ message }}h2>
<h2>{{ message }}h2>
template>
<template v-else>
<h2>嘎嘎嘎嘎h2>
<h2>嘎嘎嘎嘎h2>
<h2>嘎嘎嘎嘎h2>
<h2>嘎嘎嘎嘎h2>
<h2>嘎嘎嘎嘎h2>
template>
<button @click="buttonClick">点击切换button>
div>
vue的列表渲染
v-for
- v-for的基本格式是
item in 数组： - 数组通常是来自data或者props，也可以是其他方式；
item是我们给每项元素起的常用名称，这个名字可以自定义；
v-for遍历数组
代码演示：
<body>
<div id="app">
<ul>
<li v-for="item in movies">{{item}}li>
ul>
div>
<script>
const app = Vue.createApp({
data() {
return {
movies: ["大话西游","盗梦空间","少年的奇幻漂流","一路向西"]
}
}
})
app.mount('#app')
script>
