响应式数据（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"

实例演示：

<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。

 <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