响应式数据（v-on、v-if、v-show、v-for、v-bind、v-model、computed、watch）

一、事件绑定指令v-on

二、条件渲染指令v-if

三、v-show

四、遍历指令v-for

1、遍历对象的值

2、遍历对象的值和键（先值后键）

3、遍历对象的值、键和索引

4、遍历数组的值和索引

五、属性动态化指令v-bind(单向)

【CSS样式的绑定，有以下两种常用方式】

六、双向数据绑定指令v-model

七、计算属性computed

八、侦听器watch

一、事件绑定指令v-on

使用v-on指令（简写为@）来监听DOM事件，并在事件触发时执行对应的JavaScript。

格式用法：

v-on:click="handler" 或 @click="handler"

实例演示：

javascript"><div id="app"><h3>{{ msg }}</h3><h3>{{ start.title }}</h3><button v-on:click="end">修改</button></div><script type="module">import { createApp, reactive, ref } from './vue.esm-browser.js'createApp({setup() {let msg = "成功启动!!!";const start=reactive({title:"你好吗",})const end=()=>{msg="出发！"    // msg不是响应式数据，无法更改数据，所以没有改变，但是从控制台可以看出改变了start.title="我很好"console.log(msg);}return {msg, //普通变量, 非响应式数据, 在模板中普通变量不会自动更新start,end}}}).mount("#app")</script>

二、条件渲染指令v-if

v-if、v-else-if、v-else是条件渲染指令。v-if指令用于绑定一个表达式，当表达式为真时，对应的元素会被渲染到DOM中，如果为假，元素则不会被渲染。

注：一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。

实例演示：

 <div id="app"><h3>{{ web.user }}</h3><p v-if="web.user < 100">新网站</p><p v-else-if="web.user >= 100 && web.user < 1000">优秀网站</p><p v-else-if="web.user >= 1000 && web.user < 10000">资深网站</p><p v-else>超级网站</p><button @click="add_user">增加用户</button></div><script type="module">import { createApp, reactive, ref } from './vue.esm-browser.js'createApp({setup() {const web = reactive({   // 响应式数据user: 50});const add_user = () => {web.user += 1000;}return {web,add_user}}}).mount("#app");</script>

在上述代码中，v-if首先判断user是否小于100，如果是就显示"新网站"。若不满足这个条件，就会执行v-else-if指令进行下一个判断，即判断user大于等于100并且小于1000，依此类推。如果所有v-if和v-else-if条件都不满足，就会执行v-else中的内容。

三、v-show

v - show 是Vue.js中的一个指令。它用于根据条件来控制元素的显示和隐藏。当绑定的表达式的值为true 时，元素会显示;当表达式的值为false时，元素会隐藏。Vue处理v-show变化时，是用display:none实现隐藏的（可以通过F12检查源代码，当点击时，源码会加入display:none）。

实例演示：

代码先设置一个响应式数据web，状态show为true，使用v-on绑定toggle，点击按钮后引用toggle函数，切换显示状态。web.show取反，v-show捕获不到web.show。

javascript"> <div id="app"><h3>显示状态: {{ web.show }}</h3><!-- Vue处理v-show变化时，是用display:none实现隐藏的（可以通过F12检查源代码，当点击时，源码会加入display:none） --><p v-show="web.show">使用v-show</p>   <button @click="toggle">切换显示状态</button></div><script type="module">import { createApp, reactive, ref } from './vue.esm-browser.js'createApp({setup() {const web = reactive({   // 响应式数据show: true,user: 500});const toggle = () => {web.show = !web.show;   // 这个布尔变量被切换后，模板中用到的地方会自动更新，进而被v-show捕获}return {web,toggle,}}}).mount("#app");</script>

四、遍历指令v-for

v-for会遍历对象或数组的每一个元素，将当前元素赋值给变量，然后通过插值运算符显示每个元素的属性。

1、遍历对象的值

实例演示：

<div id="app"><!-- 遍历对象的值 --><h4>遍历对象的值</h4><ul><li v-for="value in data.user">{{ value }}</li></ul></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({//对象user: { name: "李雷",   gender: "男" ,class:"2班"}});return {data}}}).mount("#app")</script>

2、遍历对象的值和键（先值后键）

实例演示：

    <div id="app">
<!-- 遍历对象的值和键。 注意：写指令时，先值后键 --><h4>遍历对象的值和键</h4><ul><li v-for="(value, key) in data.user">{{ key }} : {{ value }}</li></ul></div>
<script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({//对象user: { name: "李雷",   gender: "女" }});return {data}}}).mount("#app")</script>

3、遍历对象的值、键和索引

实例演示：

    <div id="app"><!-- 遍历对象的值，键和索引。 注意：写指令时，先值再键后索引 --><h4>遍历对象的值，键和索引</h4><ul><li v-for="(value, key, index) in data.user">{{ index }} : {{ key }} : {{ value }}</li></ul></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({//对象user: { name: "李雷",   gender: "女" }});return {data}}}).mount("#app")</script>

4、遍历数组的值和索引

实例演示：

    <div id="app">
<!-- 遍历数组的值和索引。 注意：写指令时，先值后索引 --><h4>遍历数组的值和索引</h4><ul><li v-for="(value, index) in data.number">{{ index }} : {{ value }}</li>
<!-- 获取相对应索引的值 -->{{data.number[2]}}</ul></div>
<script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({//数组number: ["十",  "十一",  "十二"], });return {data}}}).mount("#app")</script>

<template>标签的内容不会自动显示。 <template> 标签可以用来包装多个元素或者多行代码, 不会在页面中渲染。
 <div>
注： <template> 标签可以用来包装多个元素或者多行代码, 不会在页面中渲染 </div>

五、属性动态化指令v-bind(单向)

v-bind指令(可以简写成“ : ”) 用于将组件的属性和数据进行动态绑定。

实例演示：

<div id="app"><h3>  iuput标签动态属性绑定    v-bind:value </h3><input type="text" v-bind:value="web.str"><h3>  iuput标签动态属性绑定(简写形式)   :str </h3><input type="text" :value="web.str"><h3>  img标签动态属性绑定(简写形式)    :src </h3><img :src="web.img"><br><button @click="change">修改</button></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({str: "w",img: "./img_src/logo0.png",})const change = () => {web.str += "w";web.img=`./img_src/logo1.png`;}return {web,change}}}).mount("#app")</script>

        在上述代码中，先设置一个响应式数据，设置好输入框，通过v-bind将其绑定在一起，再定义一个函数change，在button引用v-on指令，在点击button时，多输出一个“w”，图片发生改变。

【CSS样式的绑定，有以下两种常用方式】

方案1：通过布尔值控制某个类名是否存在，进而控制对应的CSS样式是否被选中生效。v-bind指令虽然可以直接对class属性进行数据绑定，但如果将绑定的值设置为一个对象，其就会产生一种新的语法规则，设置的对象中可以指定对应的class样式是否被选用。

<style>.textColor{color: red;}</style>
</head><body><div id="app"><!-- 【方案一】 --><h5 :class="{textColor:web.fontStatus}">我爱你中国</h5><button @click="change_color">修改颜色</button></div>
<script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({fontStatus: false})const change_color = () => {web.fontStatus = !web.fontStatus;}return {web,change_color}}}).mount("#app")</script>

        在上述代码中，通过web.fontStatus取反改变字体的颜色。

方案2：直接将标签的style属性和响应式对象绑定起来（较常用）。

    <div id="app"><h5 :style="b_style">我爱你中国，字号{{b_style.fontSize}}</h5><button @click="add_fontsize">加大字号</button></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const b_style = reactive({color: "green",fontSize: "10px"})let p = 10;const add_fontsize = () => {p += 5;b_style.fontSize = `${p}px`;}return {b_style,add_fontsize}}}).mount("#app")</script>

六、双向数据绑定指令v-model

v - model 就是双向数据绑定指令，作用于像 <input> 、 <select> 和组件上。在表单中，它能够让数据在视图（用户看到的界面）和模型（JavaScript中的数据对象）之间自动同步。比如有一个简单的输入框，当用户在输入框中输入内容时，数据对象中的对应属性会自动更新；反过来，当这个数据对象的属性被程序修改，输入框显示的内容也会自动改变。

文本输入框的双向数据绑定

    <div id="app"><h3>文本框: {{ data.text }} </h3>输入您要更改的昵称: <input type="text" v-model="data.text"><hr></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {// 定义了一个响应式对象const data = reactive({text: "www.baidu.com", //文本框})return {data}}}).mount("#app")</script>

单选框的双向数据绑定

    <div id="app"><h3>您单选了: {{ data.radio }} </h3><input type="radio" value="唱歌"  name="ra" v-model="data.radio">唱歌<input type="radio" value="跳舞"  name="ra" v-model="data.radio">跳舞</div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {// 定义了一个响应式对象const data = reactive({radio: "",             //单选框})return {data}}}).mount("#app")</script>

多选框的双向数据绑定

    <div id="app"><h3>您多选了: {{ data.checkbox }} </h3><input type="checkbox" value="唱歌"  v-model="data.checkbox">唱歌<input type="checkbox" value="跳舞"   v-model="data.checkbox">跳舞<input type="checkbox" value="打游戏" v-model="data.checkbox">打游戏 </div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {// 定义了一个响应式对象const data = reactive({checkbox: [],          //复选框（数组）})return {data}}}).mount("#app")</script>

下拉菜单的双向数据绑定

    <div id="app"><h3>请问您的专业是： {{ data.select }} </h3><select v-model="data.select"><option value="">请选择</option><option value="计算机应用技术">计算机应用技术</option><option value="数字媒体技术">数字媒体技术</option><option value="物联网工程">物联网工程</option><option value="电子工程">电子工程</option></select></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {// 定义了一个响应式对象const data = reactive({select: ""             //下拉框})return {data}}}).mount("#app")</script>

七、计算属性computed

计算属性computed主要用于根据已有的响应式数据(例如 data选项中的数据)来计算得出新的值。计算属性会基于它的依赖项进行缓存，只有在依赖项的值发生改变时才会重新计算。

拥有属性特点的函数（方法）：

1.为普通方法施加了计算属性后，调用该函数不需要加括弧

2. 为普通方法施加了计算属性后，该函数只要被调用过就会在浏览器中产生缓存, 下次再被调用时将直接从缓存调用。

实例演示： 对比两种调用方法，第一种调用方法调用后再次使用需要再调用，而第二种方法在第一次调用时会缓存，第二次调用时只需从缓存中调用。

    <div id="app"><h3>调用add方法: {{ add() }}</h3><h3>调用add方法: {{ add() }}</h3><h3>调用add方法: {{ add() }}</h3><h3>第1次调用带有计算属性的sub方法: {{ sub }}</h3><h3>第2次调用带有计算属性的sub方法: {{ sub }}</h3></div><script type="module">import { createApp, ref, reactive, computed } from './vue.esm-browser.js'createApp({setup() {// 数据（属性）： 响应式对象const data = reactive({x: 10,y: 20})// 普通函数（方法）： const add = () => {console.log("调用普通的方法add,不做缓存") return data.x + data.y}// 拥有属性特点的函数（方法）：// 1.为普通方法施加了计算属性后，调用该函数不需要加括弧// 2. 为普通方法施加了计算属性后，该函数只要被调用过一次，//    就会在浏览器中产生缓存, 下次再被调用时将直接从缓存调用。const sub = computed(() => {console.log("调用计算属性的方法sub, 有缓存") return data.x - data.y})return {data,add,sub}}}).mount("#app")</script>

注意红圈

八、侦听器watch

watch 是一个用于观察和响应数据变化的特性。它主要用于监听数据(如data 选项中的属性、计算属性等)的变化。当被监听的数据发生变化时，可以执行一些特定的操作，例如发起异步请求、更新其他数据等。

实例演示1：侦听响应式字符串 hobby 的数据变动

    <div id="app">      爱好：<select v-model="hobby"><option value="请选择">请选择</option><option value="写作">写作</option><option value="画画">画画</option><option value="运动">运动</option></select></div><script type="module">import { createApp, ref, watch } from './vue.esm-browser.js'createApp({setup() {const hobby = ref("请选择")    //爱好// 作用：1.监听数据变动  2.拿到变动的值watch(hobby, function(newValue, oldValue){console.log("hobby的旧值:", oldValue, "--> hobby的新值:", newValue)if (newValue == "画画") {console.log("您的爱好选中了：画画")}})return { hobby,  }}}).mount("#app")</script>

实例演示2：侦听响应式对象 date 的数据变动

    <div id="app">      出生年月：<select v-model="date.year"><option value="">请选择</option><option value="2023">2023</option><option value="2024">2024</option><option value="2025">2025</option></select> 年<select v-model="date.month"><option value="">请选择</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select> 月</div><script type="module">import { createApp, reactive, watch } from './vue.esm-browser.js'createApp({setup() {const date = reactive({       //日期year: "2023",month: "10"})watch(date, function(newValue, oldValue){// oldValue newValue是一样的console.log(        "date的旧值：", oldValue," \n--> date的新值：",   newValue)if (newValue.year == "2025") {console.log("您选中的年份是：2025年")}if (newValue.month == "11") {console.log("您选中的月份是：11月")}})return { date,  }}}).mount("#app")</script>

实例演示3：侦听 date 中 year 的数据变动

    <div id="app">      出生年月：<select v-model="date.year"><option value="">请选择</option><option value="2023">2023</option><option value="2024">2024</option><option value="2025">2025</option></select> 年</div><script type="module">import { createApp, reactive, watch } from './vue.esm-browser.js'createApp({setup() {const date = reactive({       //日期year: "2023",})watch( () => date.year,     (newValue, oldValue) => {console.log("date.year的旧值：", oldValue, " --> date.year的新值：",                             newValue)if (date.year == "2024") {console.log("您选中的年份是：2024年")}})})return { date,  }}}).mount("#app")</script>

注：watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组。注意，你不能直接侦听响应式对象的属性值, 比如数据源date.year 这里需要用一个返回该属性的 getter 函数： () => date.year