HBuilder X 中Vue.js基础使用1（三）

一、 模板语法

     Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

 英文官网: Vue.js - The Progressive JavaScript Framework | Vue.js

 中文官网: https://cn.vuejs.org/

HTML中包含了一些 JS 语法代码，语法分为两种

1. 插值（双大括号{{ }}表达式）

2. 指令（以 v-开头）

二、响应式基础

1、ref()

   ref()  在组合式 API 中，推荐使用 ref() 函数来声明响应式状态

 ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回

<script setup>
 import { ref } from 'vue'
// “ref”是用来存储值的响应式数据源。
const count = ref(100)
const msg=ref('Hello Using Vue.js ref()')

function add() {
  count.value++   //ref包裹在一个带有 .value 属性
}

function updates(){
	msg.value=msg.value.split('').reverse().join('').concat('!');    //修改一个 ref 的值。
}
</script>

<style>
</style>


<template>
	<div>注册<p/>
		<h1>{{msg}}</h1>
		<button @click="add">{{count}}</button><br/><br/>
		<button @click="updates">{{msg}}</button>
	</div>
	
</template>

2、reactive()

    reactive 是在Vue3 中一个用于创建响应式数据的函数。它可以将普通 JavaScript 对象转换为响应式对象，使其能够在数据变化时自动更新视图。

reactive注意点

1. 有限的值类型：它只能用于对象类型 (对象、数组（json/arr）和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。

2. 不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失：

<script setup>

//reactive使用
import { reactive } from 'vue';
const numbers=reactive(1000) //定义一个基本数据类型
//定义对象
const data=reactive({
	name:'张三',
	age:18,
	gender:'男'
})

//修改数据，视图自动更新
data.name="interface"

</script>

<style>
</style>


<template>
	<div>注册<p/>
		<h1>{{msg}}</h1>
		<button @click="add">{{count}}</button><br/><br/>
		<button @click="updates">{{msg}}</button><br/><br/>
		<span>{{data.name}},{{data.age}},{{data.gender}} / {{numbers}}</span><br/>

	</div>
	
</template>

优点：

• 响应式视图：reactive 使得创建响应式视图变得容易，无需手动管理依赖关系。
• 性能优化：Vue.js 仅在数据更改时更新视图，从而提高性能。
• 易用性：reactive 函数简单易用，可简化应用程序开发。

三、属性Attribute绑定

   使用双大括号{{}}的写法，可以将数据解释为纯文本，但是是不能动态绑定HTML的attributes的，要想绑定attribute就需要用v-bind指令

v-bind:可以简写为冒号:，如v-bind:id="top"写成 :id="top"

<div :id="dynamicId"></div>

      因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定   

      Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。 

<script setup>
import {ref} from 'vue'

//颜色
const color=ref('blue')

const dynamicId=ref('titles')

function toggleColor(){
	color.value=color.value=='blue'?'red':'blue'
}
</script>


<template>
	<div :id="dynamicId">
	    <span>动态绑定</span><br/>
		 <!-- 样式绑定也支持对象和数组 -->
		<span :style='{color}' @click="toggleColor">
			改变字体颜色！！
		</span>
		
	</div>
	
</template>


<style>
	#titles{
		font-size: 32px;
		background: gray;
	}
	
	span{
		display: block;
		
	}
</style>