【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状态的方法 toggleconst 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状态的方法 toggleconst 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.响应式数据添加一个元素 用户useruser: 500 // 初始为500})// 可以切换show状态的方法 toggleconst toggle = () => {web.show = !web.show // 将!show赋值给show 实现每次点击按钮都是之前状态的反状态}return {web,toggle}}}).mount("#app")</script>
</body>本文介绍vue3中的一些方法的操作。