模板网站演示站点怎么做,担路网提供网站建设,钟表网站模板,如何做产品网站的推广响应式基础
API 参考
本页和后面很多页面中都分别包含了选项式 API 和组合式 API 的示例代码。现在你选择的是 组合式 API。你可以使用左侧侧边栏顶部的“API 风格偏好”开关在 API 风格之间切换。
声明响应式状态
ref()
在组合式 API 中，推荐使用 ref() 函数来声明…响应式基础
API 参考
本页和后面很多页面中都分别包含了选项式 API 和组合式 API 的示例代码。现在你选择的是组合式 API。你可以使用左侧侧边栏顶部的“API 风格偏好”开关在 API 风格之间切换。
声明响应式状态
ref()
在组合式 API 中，推荐使用ref()函数来声明响应式状态：
js
import { ref } from 'vue'const count = ref(0)
ref()接收参数，并将其包裹在一个带有.value属性的 ref 对象中返回：
js
const count = ref(0)console.log(count) // { value: 0 }
console.log(count.value) // 0count.value++
console.log(count.value) // 1 参考：为 refs 标注类型 要在组件模板中访问 ref，请从组件的setup()函数中声明并返回它们：
js
import { ref } from 'vue'export default {// `setup` 是一个特殊的钩子，专门用于组合式 API。setup() {const count = ref(0)// 将 ref 暴露给模板return {count}}
}
template
div{{ count }}/div
注意，在模板中使用 ref 时，我们不需要附加.value。为了方便起见，当在模板中使用时，ref 会自动解包 (有一些注意事项)。
你也可以直接在事件监听器中改变一个 ref：
template
button @click="count++"{{ count }}
/button
对于更复杂的逻辑，我们可以在同一作用域内声明更改 ref 的函数，并将它们作为方法与状态一起公开：
js
import { ref } from 'vue'export default {setup() {const count = ref(0)function increment() {// 在 JavaScript 中需要 .valuecount.value++}// 不要忘记同时暴露 increment 函数return {count,increment}}
}
然后，暴露的方法可以被用作事件监听器：
template
button @click="increment"{{ count }}
/button
这里是Codepen上的例子，没有使用任何构建工具。
script setu
