Vue初体验——了解属性和指令

Vue

• Vue.js 是一个用于构建用户界面的渐进式框架。它提供了多种属性和指令，以帮助开发者更高效地管理和渲染数据。下面我们将深入探讨一些核心的Vue指令和属性的用法。

以下是Vue中常用的指令和属性

1. v-model - 双向数据绑定

v-model 是Vue中的一个非常重要的指令，用于在表单控件（如<input>、<textarea>和<select>）上创建双向数据绑定。这意味着当数据变化时，DOM会被更新；同时，当DOM变化时，数据也会被同步更新。

<input type="text" v-model="msg">

在这个例子中，msg数据属性会随着输入框内容的变化而实时更新。

2. @click - 事件监听器

@click（或等价的v-on:click）是一个用于监听点击事件的指令。你可以将它绑定到任何HTML元素上，并在触发点击事件时执行指定的方法。

<h2 @click="handle">{{msg}}</h2>

这里的handle方法将在<h2>标签被点击时调用。

3. ref - 访问子组件实例

ref是一个特殊的属性，可以用来获取组件实例或DOM元素的引用。在组合API中，ref通常与reactive或ref函数一起使用。

const msg = ref('hello');

4. v-if vs v-show

• v-if 和 v-show 都可以控制元素的显示和隐藏，但它们的工作方式不同。
• v-if 是条件渲染，它会根据表达式的真假来判断是否将DOM插入到真实DOM树中。
• v-show 则始终保留DOM元素，并通过CSS属性（如display: none）来控制元素的可见性。

<!-- 使用v-if -->
<h3 v-if="count<30">happy</h3>

<!-- 使用v-show -->
<h4 v-show="count<30">我很开心</h4>

5. v-for - 列表渲染

v-for指令用于基于数据集合来渲染列表。它可以遍历数组、对象或计算属性的结果。

<li v-for="(item, index) in list" :key="item.id">{{ index + 1 }}-{{ item.name }}</li>

这里，list是一个包含多个项目的数组，每个项目都有一个id和name属性。

6. v-text 和 v-html

• v-text 将数据插入到DOM中，但会确保插入的内容被转义，防止XSS攻击。
• v-html 则将数据作为HTML插入，不会进行转义，这可以用于动态生成HTML，但需要小心处理，以防安全问题。

<div v-text="msg2"></div>
<div v-html="msg3"></div>

@click的实例

• 下面是对@click的实际用法

template>
    <h2>{{ tem }}</h2>
    <h5>{{ suggest }}</h5>
    <button @click="add">+1</button>
    <button @click="minus">-1</button>
</template>

<script setup>
import { ref,watch,computed } from 'vue'

let tem = ref(20)

const add = () => {
    tem.value+=5
}
const minus = () => {
    tem.value-=5
}

const suggest = computed(()=>{
    if(tem.value>=30){
        return'短袖'
    }else if(tem.value>=20){
        return'夹克'
    }else if(tem.value>=10) {
        return'棉袄'
    }else {
        return '棉袄'
    }
})
</script>

<style lang="css" scoped>

</style>

代码解读

<template>
    <h2>{{ tem }}</h2>
    <h5>{{ suggest }}</h5>
    <button @click="add">+1</button>
    <button @click="minus">-1</button>
</template>

• <h2>{{ tem }}</h2> 显示当前温度。
• <h5>{{ suggest }}</h5> 根据温度显示推荐的穿着。
• <button @click="add">+1</button> 和 <button @click="minus">-1</button> 分别用于增加和减少温度值。

import { ref, watch, computed } from 'vue'

let tem = ref(20)

const add = () => {
    tem.value += 5
}
const minus = () => {
    tem.value -= 5
}

const suggest = computed(() => {
    if (tem.value >= 30) {
        return '短袖'
    } else if (tem.value >= 20) {
        return '夹克'
    } else if (tem.value >= 10) {
        return '棉袄'
    } else {
        return '棉袄'
    }
})

• tem 是一个使用ref创建的响应式变量，初始化为20。
• add 和 minus 方法用于修改tem的值，分别增加或减少5度。
• suggest 是一个computed属性，根据tem的值返回不同的着装建议。由于computed属性具有缓存机制，所以当tem改变时，suggest会自动重新计算并更新。
• computed 默认会主动执行一次,当回调中任意变量值变更时,computed都会重新执行

应用逻辑

当用户点击"+1"按钮时，温度增加5度；点击"-1"按钮时，温度降低5度。suggest计算属性则会根据当前温度的范围，返回相应的着装建议。

• 10度
• 25度

• 50度

结语

这个实例展示了Vue.js如何通过组合API（基于Composition API）进行状态管理和逻辑处理。使用ref和computed，我们可以创建响应式的数据模型和基于状态的动态内容，同时利用事件处理方法实现用户交互。这种模式使代码更加清晰和模块化，易于理解和维护。