Vue入门之reactive、ref、v-bind

天行健，君子以自强不息；地势坤，君子以厚德载物。

每个人都有惰性，但不断学习是好好生活的根本，共勉！

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

两水夹明镜，双桥落彩虹。
人烟寒橘柚，秋色老梧桐。
------《秋登宣城谢脁北楼》

文章目录

Vue入门之reactive、ref、v-bind

Node.js的下载、安装和配置
 node的下载、安装、配置和使用（node.js下载安装和配置、npm命令汇总、cnpm的使用）
Vue3入门之创建vue3的单页应用(vite+vue)
Vue入门第一篇（环境配置、脚手架安装、项目创建、项目运行访问、项目结构详解等）
Vue入门第二篇（基本语法、实例演示）
Vue专栏

文末附本文所有示例代码的下载地址以及基于vite构建vue3的项目demo地址

1. Vue语法简介

本篇基于Vue官网最新版3.4.31对应教程编写，官网教程地址：Vue官网互动教程
本篇基于Vite创建的Vue3项目进行实例演示（基于Vue CLI创建的Vue3和Vue2也可参考）
参考：Vue3入门之创建vue3的单页应用(vite+vue)
在Vue项目中，主页代码主要在App.vue主组件中编写
在App.vue文件中，文件内容结构可分为三部分：
script标签、template标签、style标签

单文件组件SFC（Single-File Component），是一种可复用的代码组织形式。
单文件组件是将HTML、CSS、JavaScript封装在.vue文件中。

1.1 `script setup`标签

在App.vue文件中，script标签变成了以script setup开头、以script结尾的标签
该部分主要还是JavaScript代码的编写，不过包含了一些模块、组件、函数的引入

1.2 `template`标签

在App.vue文件中，template标签用于主要视图模块代码的编写，可以把它当做之前在html中的body标签，用于按钮、div块、文本、列表等的代码编写位置

1.3 `style scoped`标签

在App.vue文件中，style标签变成了以style scoped开头、以style结尾的标签
该部分内容就是页面样式的编写，与原来html中style标签一样

接下来开始是基础语法的演示部分

以下实例的演示都在App.vue主组件中进行，分别在各标签中实现代码即可

2. `reactive()`和`ref()`

声明式渲染（对象和变量的声明）
能在改变时触发更新的状态被称为响应式的，Vue中使用reactive() API来声明响应式状态
reactive()只适用于对象（包括数组和内置类型）
ref()则可以接受任何值类型，ref会返回一个包裹对象，并在.value属性下暴露内部值
在script setup标签中生命的响应式状态，在template模板标签中可直接使用。
双层花括号{
{}}中的ref变量无需使用.value，会自动解包。
双层花括号{
{}}中不仅可以使用变量，还可以使用js语法代码。

2.1 script setup

script setup标签内的代码

// 1. 声明式渲染，对象和变量的声明（reactive()和ref()）
import {
    ref,reactive,computed, onMounted, watch } from 'vue'

// reactive() 对象声明API，创建对象
const counter = reactive({
   
  count:0
})
console.log(counter.count)

counter.count++

// ref() 变量声明API， 可接受任何类型，会返回一个包裹对象，在.value属性下暴露内部值
const message = ref('hello')
console.log(message.value)
message.value = 'Changed libai sssss'

// 在组件<script setup>块中声明的，可在模板<template>中直接使用

2.2 template

template标签内的代码

  <!-- 1.  -->
  <div id="d-count">
    <h2>1. 声明式渲染，对象和变量的声明（reactive()和ref()）</h2>
    <button id="btn-count" @click='counter.count++'>{
  { counter.count }}</button>
    <br>
    {
  {counter.count}}

    <p>{
  {counter.count}}</p>

    <!-- 在花括号中的内容可以是js的表达式 -->
    <button type="text" id="btn-js">{
  {message.split(" ").reverse().join("")}}</button>
  </div>
  <br>
  <br>
  <br>

2.3 style scoped

style scoped标签内的代码

/* 1.  */
#btn-count{
  height: 50px;
  width: 400px;
  text-align: center;
  background-color: aqua;
  font-size: 30px;
}

#btn-js{
  height: 50px;
  width: 400px;
  text-align: center;
  background-color: salmon;
  font-size: 30px;
}

2.4 页面效果

控制台npm run dev启动项目，访问服务页面http://localhost:5173/
查看页面效果

3. `v-bind`

Attribute（属性）绑定动态值
Vue中，mustache语法（双大括号）只能用于文本插值，如何插入动态值
可使用v-bind为attribute绑定一个动态值，如v-bind:id="v1"
v-bind简写方式使用冒号加绑定的属性名和属性值，如:id="v1"

3.1 script setup

script setup标签内的代码

// 2. Attribute绑定，attribute绑定一个动态值 使用v-bind:属性="值"，还有一个简写用法，就是将v-bind省略，以:开头
const titleClass = ref('title')

3.2 template

template标签内的代码

  <!-- 2.  -->
  <div id="d-vbind">
    <h2>2. Attribute绑定</h2>
    <h1 id="h-class" v-bind:class="titleClass">make me green</h1>
    <!-- <h1 :class="titleClass">make me green</h1> -->
  </div>
  <br>
  <br>
  <br>

3.3 style scoped

style scoped标签内的代码

/* 2.  */
#h-class{
  height: 50px;
  width: 400px;
  text-align: center;
  background-color: darkmagenta;
  font-size: 25px;
}

3.4 页面效果

控制台npm run dev启动项目，访问服务页面http://localhost:5173/
查看页面效果

4. 代码示例

以上示例的代码已打包上传到CSDN资源库，可自行下载获取示例代码
下载地址：Vue reactive ref v-bind 语法示例演示代码

5. 项目demo

本文示例代码都是基于vite构建的vue3项目编写，项目demo也已上传CSDN资源库
下载地址：Vue 基于vite构建vue3项目以及基础语法演示
下载后如想正常运行项目，需先有node环境，可根据文章开始的链接进行下载安装node环境，以及配置node环境变量

感谢阅读，祝君暴富！

原文链接: https://hanshan.blog.csdn.net//article/details/140498209

Vue入门之reactive、ref、v-bind

文章目录