Vue学习之路04----响应式基础

响应式基础

ref() (基本类型的响应式数据)

​ 在组合式 API 中,推荐使用 ref() 函数来声明响应式状态,ref能定义基本类型的,也能定义对象类型的:

import { ref } from 'vue'

let count=ref(0)

ref() 接收参数,并将其包裹在一个带有 .value 属性的 ref 对象中返回,在模版中则不需要:

<template>
  <div>
    <h3>{{ count }}h3>
    <button @click="count++">按钮1button>
    <button @click="add">按钮2button>
  div>
template>
<script name="App">
import { ref } from "vue";
export default{
  setup(){
    let count=ref(0)
    function add() {
      count.value++;
    }
    return{
      count,add
    }
  }
}
script>
<style scoped>style>

点击按钮1或按钮2都可实现count的递增:

Vue学习之路04----响应式基础_第1张图片

你可能感兴趣的:(#,Vue基础,vue.js,前端)