Vue——响应式数据，v-on，v-bind，v-if，v-for(内含项目实战)

<div id="app">   
        <p>个人信息：</p>
        <p>性别：{
  
  { gender }}</p>
        <p>年龄：{
  
  { age }}</p>
        <button @click="genderChange">点击更改性别</button>
        <br>
        <button @click="ageChange">点击年龄加1</button>
    </div>
    <script type="module">
        // 导入响应数据类型 ref
        import {createApp,ref} from"./vue.esm-browser.js"
        createApp({
            setup(){
                
                let gender = "女";
                let age = ref(25);

                const genderChange=()=> {
                gender.value = "男";
                console.log("成功修改性别")
                
                }

                const ageChange=()=> {
                age.value += 1;
                 console.log("成功加1")
                }
                return{
                    gender,
                    age,
                    genderChange,
                    ageChange
                }


            }
        }).mount("#app");

    </script>

reactive

定义对象类型数据

<div id="app">   
        <p>个人信息：</p>
        <p>年龄：{
  
  { test_1.age }}</p>
        <p>性别：{
  
  { test.gender }}</p>
        <button @click="ageChange">点击年龄加1</button>
        <br>
        <button @click="genderChange">点击更改性别</button>
      
    </div>
    <script type="module">
        // 导入响应数据类型 reactive
        import {createApp,reactive} from"./vue.esm-browser.js"
        createApp({
            setup(){

                const test={
                    gender:"女"
                };

                const genderChange=()=> {
                test.gender = "男";
                console.log("成功修改性别")
                }

                const test_1=reactive({
                    age:18
                });

                const ageChange=()=> {
                test_1.age +=1;
                console.log("成功加1")

                }
                return{
                    test,
                    test_1,
                    genderChange,
                    ageChange
                }


            }
        }).mount("#app");

    </script>

事件绑定指令 v-on

用于监听DOM事件并触发对应的方法，和JS中的监听器一样，可以在HTML元素上添加事件监听器，当这个事件被触发时，会执行指定的方法。

格式：v-on : click（监听的事件如：键盘或鼠标事件）="test_2"（监听的节点）

v-on 鼠标监听事件

v-on : click（鼠标事件）="test_2"（监听的节点）

    <div id="app">     

    <h2>{
  
  {test_1.name}}</h2>
    <button v-on:click="test_2">单击修改名字！</button>

    </div>
    <script type="module">



        import {createApp,ref,reactive} from"./vue.esm-browser.js"
        createApp({
            setup(){

初始值
                const test_1=reactive({
                    name:"木木",
                });

修改的值
            const test_2=()=>{
                test_1.name="花花"
                console.log("鼠标单击成功！");
            }

返回的值
            return{
                test_1,
                test_2,
            }

            }
        }).mount("#app");

    </script>

单击按钮后

v-on 键盘监听事件

v-on : keyup . v（监听键盘“ v ”）="test_2" （监听的节点）

enter space tab 按键修饰符

keyup是在用户松开按键时才触发

keydown是在用户按下按键时立即触发

    <div id="app">     
    
    <h2>{
  
  {test_1.name}}</h2>
    <button v-on:keyup.v="test_2">按下键盘v即可修改名字!</button>

    </div>


    <script type="module">
        import {createApp,ref,reactive} from"./vue.esm-browser.js"
        createApp({
            setup(){
初始值            
            const test_1 = reactive({
                    name: "花花",
                });
修改值    
                const test_2 = () => {
                    test_1.name ="木木",

最低0.47元/天解锁文章