Vue3基础学习(中)
目录
情景回顾
1. 其他常见事件
代码:
2. 常用语句
2.1 v-show , v-if , v-for
2.2 v-model
情景回顾
书说上回 , 我们讲到了Vue3的创建 , 模块化开发 , reactive , ref , 鼠标点击事件 等标签
今天我们来说说其他常见事件 , 组合键事件 v-xxx常用语句
1. 其他常见事件
如空格, 回车 , tab键 , 组合按键等等
在浏览器按F12 控制台里能看到
代码:
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>其他常见事件</title>
</head>
<div id="app"><!-- keyup是指键盘按下抬起才会触发的事件 --><!-- keydown是指键盘按下才会触发的事件 --><input type="text" @keyup.enter="show('按下回车键了')">点击enter键触发<br><input type="text" @keyup.ctrl.enter="show('按下ctrl+enter键了')">点击ctrl+enter键触发<br><input type="text" @keyup.space="show('按下space键了')">点击space键触发</div><body><script type="module">import { createApp } from './vue.esm-browser.js'createApp({setup() {const show = (msg) => {console.log(msg)}return {show}}}).mount('#app')</script>
</body></html>2. 常用语句
2.1 v-show , v-if , v-for
v-show 只是简单的CSS隐藏和显示
v-if 是真正的条件渲染指令
v-for 可以将一个数据进行循环输出
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>常用语句</title>
</head>
<div id="app"><!-- v-show指令用于控制元素的显示与隐藏 --><p v-show="show">这是一首简单的小情歌</p><button @click="show =!show">点我隐藏或显示</button><br><!-- v-if指令中可以进行if语句判断，当条件为true时，渲染元素，否则不渲染 --><p v-if="obj.age == 1">1</p><p v-else-if="obj.age == 2">2</p><p v-else-if="obj.age == 3">3</p><p v-else>其他</p><button @click="change">点我加一</button><br><!-- v-for指令用于循环遍历数组或对象 --><ul><li v-for="(item, index) in items">{{ item }}</li></ul>
</div><body><script type="module">import { ref, reactive, computed, createApp } from './vue.esm-browser.js'createApp({setup() {const show = ref(false)const obj = reactive({age: 1})const change = () => {obj.age++}const items = ['apple', 'banana', 'orange']return {show,obj,change,items}}}).mount('#app')</script>
</body></html>2.2 v-model
v-model : 双向的动态绑定 , 当我们在页面上的输入框中输入时 , 下方的输出字符串也会发生改变
v-model 还有一些特殊用法 , 例如 v-model.lazy : 当鼠标光标移开输入框时 , 数据才会开始改变
当使用 v-model.trim时 , 无论输入了多少空格都只会留下一个空格
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>双向绑定</title>
</head>
<!-- 单向绑定 -->
<div id="app">输入框:<input type="text" :value="msg"><p> 结果:{{msg}}</p><!-- 双向绑定 --><br>输入框:<input type="text" v-model="msg"><p>结果:{{msg}}</p><br><!-- 失去光标后才更新 -->输入框:<input type="text" v-model.lazy="msg"><p>结果:{{msg}}</p><!-- 去除前后空格 -->输入框:<input type="text" v-model.trim="msg"><p>结果:{{msg}}</p><br>html: <p v-html="data.url"></p>text: <p v-text="data.url"> </p></div><body><script type="module">import { createApp, ref } from './vue.esm-browser.js'createApp({setup() {const msg = ref('hello world')const data = ref({name: '张三',url: "<i>www.baidiu.com</i>"})return {msg,data}}}).mount('#app')</script>
</body></html>