被迫走上前端之路第一课之vue的声明与响应

本文主要是介绍被迫走上前端之路第一课之vue的声明与响应，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

我们老说vue的核心功能是声明式渲染，那到底什么是声明式渲染呢？

声明式渲染

所谓声明式渲染，就是我们可以根据 JavaScript 中定义的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。

响应

能在改变时触发状态的更新被称作是响应式的。

举个例子

这里，我们在模板中写了一个按钮组件，并绑定了一个点击动作
在script中声明了一个变量num，按钮的值随num的变化而变化，这就是声明式渲染，同时，num的值随按钮点击状态而变化，这就是响应
方法一：

<template><button @click="num++">{{num}}</button>
</template><script setup>
import { ref } from 'vue'
// 组件逻辑
// 此处声明一些响应式状态const num=ref(0);
</script>

方法二：

<template><button @click="increment">{{ num }}</button>
</template><script setup>
import { ref } from 'vue'const num = ref(0)function increment() {num.value++
}
</script>

注：

• 上述代码我们可以看作一个 Vue 单文件组件 (Single-File Component，缩写为 SFC)。SFC 是一种可复用的代码组织形式，它将从属于同一个组件的 HTML、CSS 和 JavaScript 封装在使用 .vue 后缀的文件中。
• ref是组合式 API 中一种声明响应式状态方式。ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回。在模板中使用 ref 时，不需要附加 .value，ref 会自动解包

这篇关于被迫走上前端之路第一课之vue的声明与响应的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---