前言
接着之前的学习(详情之前的文章),今天我们要讲的是
v-bind
v-on
到此,常用的指令我们就要讲完了(在为大家讲解时,用的是选项式API,这样是为了方便大家理解),还有一些会在后续使用到的时候再给大家讲解。并且本篇文章还会穿插一些选项式API的知识点。
其他不常用指令
v-bind
v-bind
用于动态地将一个或多个 HTML 属性绑定到 Vue 实例中的数据。它是 Vue 的数据绑定系统的一部分,允许你在 HTML 中使用 Vue 实例中的数据,实现数据与视图的双向绑定。
在 Vue.js 中,v-bind
的一般用法是通过简化的缩写 :
来表示。
来看一个例子:
当我们要往页面引入一张图片,常规做法是这样
<img src="https://img1.baidu.com/it/u=3519458463,1887460190&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
而使用v-bind则会方便许多,或者使用简化版,前面加个 :
就行。
<img width = "200" v-bind:src="imgUrl" alt="">
<img width = "200" :src="imgUrl" alt="">
在数据源中写好 imgUrl
(bind绑定的属性)地址 。
data() {
return{
imgUrl:'https://img1.baidu.com/it/u=3519458463,1887460190&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
}
},
v-on
v-on
用于监听 DOM 事件,并在事件触发时执行相应的事件处理函数。通过 v-on
,你可以在 Vue 实例中定义事件处理逻辑,实现用户与应用程序的交互。
v-on
的一般语法是通过简化的缩写 @
来表示。
实现一个按钮,每点一次数据加1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<h2>{{ count }}</h2>
<button @click="handleAdd">+</button>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
<script>
Vue.createApp({
template: '#my-app',
data() {
return{
count: 1
}
},
methods : {
handleAdd(){
this.count += 1
}
}
}).mount('#app')
</script>
</body>
</html>
在template中给button按钮一个监听事件,在method中写好该事件执行的加1操作
选项式API——computed
computed
是 Vue.js 框架中的一个属性,用于在 Vue 实例中声明计算属性。计算属性是基于 Vue 实例的数据属性计算而来的属性,它的值会根据相关的数据属性的变化而自动更新。
通过 computed
,你可以在 Vue 实例中定义一些衍生出来的属性,而这些属性的值是通过对其他属性进行计算而得到的。这有助于将模板中的逻辑保持简单,而把复杂的计算过程放在计算属性中。
实现如下效果:根据当前温度建议你穿衣。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<h2>当前温度:{{temp}}</h2>
<h3>建议穿:{{cloth}}</h3>
<button @click="minus">-5</button>
<button @click="add">+5</button>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
<script>
Vue.createApp({
template: '#my-app',
data() {
return {
temp: 20,
// cloth: '夹克' //不能与computed中的属性同名,或者说computed中的属性不需要写进数据源中
}
},
computed: { // 计算属性是响应式执行的
cloth() { // 函数会在所依赖的变量值发生改变时自动重新执行
if (this.temp <= 10) {
return '棉袄'
} else if (this.temp <= 20) {
return '夹克'
} else {
return '短袖'
}
}
},
methods: {
minus() {
this.temp -= 5
},
add() {
this.temp += 5
}
}
}).mount('#app')
</script>
</body>
</html>
注意computed
也是写在vue.createApp下,和data同级,上下顺序没有规定。
效果如下:(自己也可以体验一下)
选项式API——watch
在Vue.js中,watch
是一个用于观察 Vue 实例数据变化的选项。通过使用 watch
,你可以在数据变化时执行自定义的函数,从而执行一些操作,如异步请求、复杂计算等。
watch
选项可以接收一个对象,对象的属性是要观察的数据属性,而属性值是一个回调函数,用于处理数据变化的逻辑。
还是实现如上效果,我们注意观察代码区别:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<h2>当前温度:{{temp}}</h2>
<h3>建议穿:{{cloth}}</h3>
<button @click="minus">-5</button>
<button @click="add">+5</button>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
<script>
Vue.createApp({
template: '#my-app',
data() {
return {
temp: 30,
cloth: '夹克'
}
},
watch: {
temp: {
handler: function (newVal, oldVal) {
if (newVal <= 10) {
this.cloth = '棉袄'
} else if (newVal <= 20) {
this.cloth = '夹克'
} else {
this.cloth = '短袖'
}
},
immediate: true // 立即执行
}
},
methods: {
minus() {
this.temp -= 5
},
add() {
this.temp += 5
}
}
}).mount('#app')
</script>
</body>
</html>
computed 和 watch的区别
- 如果你需要计算一个新的属性值,并希望该值是基于其他数据属性的动态计算得出的,而且希望有缓存机制,那么应该使用
computed
。 - 如果你需要在某个数据变化时执行异步或复杂的操作,或者需要监听某个数据的变化做出相应的响应,那么应该使用
watch
。 - 通常情况下,如果你只是简单地获取或设置数据,并且希望有一些自动的处理,使用
computed
更直观。如果需要执行一些特定逻辑,使用watch
更灵活。
原文链接:https://juejin.cn/post/7312722825139847207 作者:skyfker