获得徽章 14
- #每天一个知识点#
Vue3 事件处理
我们可以使用 v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码。v-on 指令可以缩写为 @ 符号。语法格式：
v-on:click="methodName"或@click="methodName"
事件处理程序中可以有多个方法，这些方法由逗号运算符分隔：
<button @click="one($event), two($event)">
事件修饰符，Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。Vue.js 通过由点 . 表示的指令后缀来调用修饰符。
.stop - 阻止冒泡
.prevent - 阻止默认事件
.capture - 阻止捕获
.self - 只监听触发该元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件展开赞过
评论1 - #每天一个知识点#
Vue3 计算属性
计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。可以看下以下反转字符串的例子：
<div id="app">
{{ message.split('').reverse().join('') }}
</div>
接下来我们看看使用了计算属性的实例：
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
const app = {
data() {
return {
message: 'RUNOOB!!'
}
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
}
Vue.createApp(app).mount('#app')
</script>
computed setter
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
const app = {
data() {
return {
name: 'Google',
url: '
www.google.com'
}
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
// todo
}
}
}
}
vm = Vue.createApp(app).mount('#app')展开评论点赞 - Vue.js 循环语句
循环使用 v-for 指令。v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。v-for 可以绑定数据到数组来渲染一个列表，v-for 实例
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.text }}
</li>
</ol>
</div>
<script>
const app = {
data() {
return {
sites: [
{ text: 'Google' },
{ text: 'Runoob' },
{ text: 'Taobao' }
]
}
}
}
Vue.createApp(app).mount('#app')
</script>
#每天一个知识点#展开评论点赞 - Vue3 条件语句
条件判断
v-if条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示：
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
const app = {
data() {
return {
seen: true /* 改为false，信息就无法显示 */
}
}
}
Vue.createApp(app).mount('#app')
</script>
(v-if-else、v-else)
v-show
我们也可以使用 v-show 指令来根据条件展示元素：
v-show 指令
<h1 v-show="ok">Hello!</h1>
v-show相当于display:none; #每天一个知识点#展开评论点赞 - #每天一个知识点# Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：<div id="app">
<p>{{ message }}</p>
</div>
如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。<span v-once>这个将不会改变: {{ message }}</span>展开赞过 11
![[熊吉]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_101.dec591d.png)
www.google.com