【Vue3入门1】02- vue3的基本操作(上)
本文介绍vue3中的一些方法的操作。
目录
1. 绑定事件 v-on
2. 按键修饰符
3. 显示和隐藏 v-show
4. 条件渲染 v-if
5. 条件渲染if-else
1. 绑定事件 v-on
点击事件 v-on:click=" 发生事件 "
<body>
<div id="app">
{{ msg }}
<h2>{{ web.url }}</h2>
<h2>{{ web.user }}</h2>
<!-- 3.v-on 为button按钮绑定点击事件 -->
<!-- 4.当点击页面的按钮时，原网址就会进行修改并显示在页面上 -->
<button v-on:click="eidt">修改</button>
<br>
<!-- 5.v-on:的简写为 @ -->
<button @click="eidt">修改简写版</button>
</div>
<script type="module">
// 以模块化开发为例
import { createApp,reactive } from './vue.esm-browser.js'
createApp({
setup(){
// 设置响应的数据和方法
const web = reactive({
url:'baidu.com',
user: 0
})
// 1.定义一个web的方法来修改网站的网址
const eidt = () => {
web.url = 'www.baidu.com';
}
return {
msg:'success', // 响应成功
web, // 响应式数据
// 2.方法添加至return语句来返回
eidt
}
}
}).mount("#app") // 将其挂载到 div#app 元素中
</script>
</body>2. 按键修饰符
以按键 enter 为例
按下按键时 user 自动添加响应数量
<body>
<div id="app">
{{ msg }}
<h2>{{ web.url }}</h2>
<h2>{{ web.user }}</h2>
<button v-on:click="eidt">修改</button>
<br>
<button @click="eidt">修改简写版</button>
<hr>
<!-- 3.给add方法设置一个事件 当按下enter键并松开(keyup)时 调用add方法 通过return返回结果 -->
<input type="text" @keyup.enter = "add(40,60)">
<!-- 4.按下文本框时 有焦点 有光标闪烁，此时再按下enter并松开才有效，不点击文本框无效 -->
</div>
<script type="module">
// 以模块化开发为例
import { createApp,reactive } from './vue.esm-browser.js'
createApp({
setup(){
// 设置响应的数据和方法
const web = reactive({
url:'baidu.com',
user: 0
})
// 1.设置一个add方法，来计算a,b两个网站新增的用户数
const add = (a,b) => {
web.user = a+b;
}
const eidt = () => {
web.url = 'www.baidu.com';
}
return {
msg:'success', // 响应成功
web, // 响应式数据
eidt,
// 2.返回add方法
add
}
}
}).mount("#app") // 将其挂载到 div#app 元素中
</script>
</body>此时按下按键enter，页面显示100，但是反复点击并松开enter一直是100不变
怎么样才能每松开一次enter就+100
可以直接在add方法中设置，每按一次在原先基础上 +100
const add = (a,b) => {
web.user += a+b;
}除了回车外，还可以设置其他 比如：空格、Tab键、任意键、组合键
空格： <input type="text" @keyup.space="add(20, 30)"> <br>
Tab： <input type="text" @keydown.tab="add(10, 20)"> <br>
keydown原因：按下Tab后，光标会下移而不在本文本框内
任意键w： <input type="text" @keyup.w="add(5, 10)"> <br>
组合键：@keyup.X.Y=" 事件 "
Ctrl + Enter <input type="text" @keyup.ctrl.enter="add(40, 60)"> <br>
Ctrl + A <input type="text" @keyup.ctrl.a="add(20, 30)">
3. 显示和隐藏 v-show
<body>
<div id="app">
<!-- 当前显示状态是true / false -->
<h3>{{ web.show }}</h3>
<!-- 当前显示状态 -->
<!-- 6.标签p设置了v-show 来控制一段文字的显示状态 -->
<!-- 7.web.show代表布尔值 决定是否显示 -->
<p v-show="web.show">baidu.com</p>
<!-- 4.设置一个button来切换show，每次点击按钮后调用toggle方法 并将结果通过return返回给标签p -->
<!-- 5.可以打开控制台观察,点击按钮后给p标签添加了一个CSS属性 style="display:none;" 且同时web.show修改为flase -->
<button @click="toggle">点击切换显示状态</button>
</div>
<script type="module">
// 模块化开发为例
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
// 定义一个reactive类型的响应数据
const web = reactive({
show: true // 布尔类型的show 初始为true
})
// 1.定义一个可以切换show状态的方法 toggle
const toggle = () => {
web.show = !web.show
// 2.将!show赋值给show 实现每次点击按钮都是之前状态的反状态
}
return {
web,
toggle // 3.返回toggle方法
}
}
}).mount("#app")
</script>
</body>4. 条件渲染 v-if
<body>
<div id="app">
<!-- 当前显示状态是true / false -->
<h3>{{ web.show }}</h3>
<p v-show="web.show">baidu.com</p>
<!-- 1.新增一个p标签 并添加 v-if-->
<!-- v-if是渲染条件,条件为true时渲染 false时不渲染 -->
<!-- 虽然v-if也可以切换显示状态 但是不适合频繁切换 -->
<!-- 可以F12发现,每次切换状态,会在DOM中添加或删除元素 -->
<p v-if="web.show">www.baidu.com</p>
<button @click="toggle">点击切换显示状态</button>
</div>
<script type="module">
// 模块化开发为例
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
// 定义一个reactive类型的响应数据
const web = reactive({
show: true // 布尔类型的show 初始为true
})
// 可以切换show状态的方法 toggle
const toggle = () => {
web.show = !web.show
// 将!show赋值给show 实现每次点击按钮都是之前状态的反状态
}
return {
web,
toggle
}
}
}).mount("#app")
</script>
</body>5. 条件渲染if-else
其实就是各种条件判断来实现显示不同状态
<body>
<div id="app">
<!-- 当前显示状态是true / false -->
<h3>{{ web.show }}</h3>
<p v-show="web.show">baidu.com</p>
<p v-if="web.show">www.baidu.com</p>
<button @click="toggle">点击切换显示状态</button>
<!-- 下面是 if else 的应用 -->
<!-- 2.在页面定义一个新标签:新网站,并为其添加 v-if -->
<p v-if="web.user < 1000">新网站</p>
<!-- 当用户数小于1000时显示新网站 -->
<!-- 3.再定义一个新网站:优秀网站,条件为用户 [1000,10000) -->
<p v-else-if="web.user >= 1000 && web.user < 10000">优秀网站</p>
<!-- 4.资深网站标签,条件为除了上述所有条件的其他条件 -->
<p v-else=></p>
</div>
<script type="module">
// 模块化开发为例
import { createApp, reactive } from './vue.esm-browser.js'
createApp({
setup() {
// 定义一个reactive类型的响应数据
const web = reactive({
show: true, // 布尔类型的show 初始为true
// 1.响应式数据添加一个元素 用户user
user: 500 // 初始为500
})
// 可以切换show状态的方法 toggle
const toggle = () => {
web.show = !web.show
// 将!show赋值给show 实现每次点击按钮都是之前状态的反状态
}
return {
web,
toggle
}
}
}).mount("#app")
</script>
</body>本文介绍vue3中的一些方法的操作。