# 一、
## 1. 侦听器的基本使用
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侦听器的基本使用</title>
</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        <input type="text" v-model="question">
        
    </template>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    question: "Hello World"
                }
            },
            // 侦听器
            watch: {
                // question是侦听data中的属性名称
                // newValue变化后的新值
                // oldValue变化前的旧值
                question(newValue, oldValue) {
                    console.log("新值：", newValue, "旧值:", oldValue);
                // 调用methods方法
                    this.queryAnswer();
                }
            },
            methods: {
                queryAnswer() {
                    console.log(this.question);
                }
            },
            computed: {
             
            }
        }
        const app = Vue.createApp(App).mount("#app");
    </script>
</body>
</html>
```

## 2. 侦听器的选项
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侦听器的选项</title>
</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        <h2>{{ info.name }}</h2>
        <h2>{{ info.nba.name }}</h2>
        <button @click="changeInfo">修改info</button>
        <button @click="changeInfoName">修改info.name</button>
        <button @click="changeInfoNbaName">修改info.nba.name</button>
    </template>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    info: {name: "test", age: 18, nba: {name: "kobe"}}
                }
            },
            // 侦听器
            watch: {
                // 默认情况下侦听器只能侦听本身数据的改变(内部发生的改变是不能侦听的)
                // info(newInfo, oldInfo) {
                //     console.log(newInfo, oldInfo);
                // },
                
                // 深度侦听/立即执行(页面加载会直接执行一次)
                info: {
                    handler: function(newInfo, oldInfo) {
                        console.log(newInfo, oldInfo);
                    },
                    deep: true, // 设置深度侦听
                    immediate: true // 立即执行
                }
            },
            // 方法
            methods: {
                changeInfo() {
                    this.info = {name: "why"};
                },
                changeInfoName() {
                    this.info.name = "kobe";
                },
                changeInfoNbaName() {
                    this.info.nba.name = "test";
                }
            },
            // 计算属性
            computed: {
             
            }
        }
        const app = Vue.createApp(App).mount("#app");
    </script>
</body>
</html>
```

## 3. 侦听器的其他方式
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侦听器的其他方式</title>
</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        <h2>{{ info.name }}</h2>
        <button @click="changeInfo">修改info</button>
        <button @click="changeInfoName">修改info.name</button>
        <button @click="changeInfoNbaName">修改info.nba.name</button>
    </template>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    info: {name: "test", age: 18, nba: {name: "kobe"}}
                }
            },
            // 侦听器
            watch: {
            //     "info.name": function(newName, oldName) {
            //         console.log(newName, oldName);
            //    }
            },
            // 方法
            methods: {
                changeInfo() {
                    this.info = {name: "why"};
                },
                changeInfoName() {
                    this.info.name = "kobe";
                },
                changeInfoNbaName() {
                    this.info.nba.name = "test";
                }
            },
            // 计算属性
            computed: {
            
            },
            created() {
                this.$watch("info", function(newInfo, oldInfo) {
                    console.log(newInfo, oldInfo);
                }, {
                    deep: true,
                    immediate: true
                })
            }
        }
        const app = Vue.createApp(App).mount("#app");
    </script>
</body>
</html>
```

七、Vue3侦听器

# 一、Vue3的计算属性

## 1. 插值语法
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插值语法</title>
</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        
        <h2>{{firstName + " " + lastName}}</h2>
        <h2>{{score >= 60 ? '及格': '不及格'}}</h2>
        <h2>{{message.split(" ").reverse().join(" ")}}</h2>
    </template>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    firstName: "Kobe",
                    lastName: "Bryant",
                    score: 80,
                    message: "Hello world"
                }
            },
            methods: {
            }
        }
        const app = Vue.createApp(App).mount("#app");
    </script>
</body>
</html>
```

## 2. 调用methods方法
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调用methods方法</title>
</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        
        <h2>{{firstName + " " + lastName}}</h2>
        <h2>{{score >= 60 ? '及格': '不及格'}}</h2>
        <h2>{{message.split(" ").reverse().join(" ")}}</h2>

        
        <h2>{{getFullName()}}</h2>
        <h2>{{getResult()}}</h2>
        <h2>{{getReverseMessage()}}</h2>
    </template>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    firstName: "Kobe",
                    lastName: "Bryant",
                    score: 80,
                    message: "Hello world"
                }
            },
            methods: {
                getFullName() {
                    return this.firstName + " " + this.lastName;
                },
                getResult() {
                    return this.score >= 60 ? '及格': '不及格';
                },
                getReverseMessage() {
                    return this.message.split(" ").reverse().join(" ")
                }
            }
        }
        const app = Vue.createApp(App).mount("#app");
    </script>
</body>
</html>
```

## 3. 调用computed方法
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调用computed方法</title>
</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        
        <h2>{{firstName + " " + lastName}}</h2>
        <h2>{{score >= 60 ? '及格': '不及格'}}</h2>
        <h2>{{message.split(" ").reverse().join(" ")}}</h2>

        <h2>{{fullName}}</h2>
        <h2>{{result}}</h2>
        <h2>{{reverseMessage}}</h2>
    </template>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    firstName: "Kobe",
                    lastName: "Bryant",
                    score: 80,
                    message: "Hello world"
                }
            },
            methods: {
                // methods无缓存，多次调用会执行多次
            },
            computed: {
                // 定义计算属性，计算属性有缓存，多次调用只会执行一次
                fullName() {
                    return this.firstName + " " + this.lastName;
                },
                result() {
                    return this.score >= 60 ? '及格': '不及格';
                },
                reverseMessage() {
                    return this.message.split(" ").reverse().join(" ");
                }
            }
        }
        const app = Vue.createApp(App).mount("#app");
    </script>
</body>
</html>
```

## 4. methods和computed的区别
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>methods和computed的区别</title>
</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        <button @click="ChengeFirstName">修改</button>

        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>

        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
    </template>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    firstName: "Kobe",
                    lastName: "Bryant",
                    score: 80,
                    message: "Hello world"
                }
            },
            methods: {
                // methods无缓存，多次调用会执行多次
                getFullName() {
                    console.log("methods")
                    return this.firstName + " " + this.lastName;
                },
                ChengeFirstName() {
                    this.firstName = 'test'
                }
            },
            computed: {
                // 定义计算属性，计算属性有缓存，多次调用只会执行一次
                // 数据发生改变的时候还是会再次执行一次
                fullName() {
                    console.log("computed")
                    return this.firstName + " " + this.lastName;
                }
            }
        }
        const app = Vue.createApp(App).mount("#app");
    </script>
</body>
</html>
```

## 5. computed的setter和getter
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>computed的setter和getter</title>
</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        <button @click="changeFulltName">修改数据</button>
        <h2>{{fullName}}</h2>
    </template>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    firstName: "Kobe",
                    lastName: "Bryant",
                    score: 80,
                    message: "Hello world"
                }
            },
            methods: {
                changeFulltName() {
                    this.fullName = 'kang rui';
                }
            },
            computed: {
                fullName: {
                    get: function() {
                        return this.firstName + " " + this.lastName;
                    },
                    set: function(newValue) {
                        console.log(newValue);
                        const names = newValue.split(" ").reverse();
                        this.firstName = names[0];
                        this.lastName = names[1];
                    }
                }
             
            }
        }
        const app = Vue.createApp(App).mount("#app");
    </script>
</body>
</html>
```

六、Vue3计算属性

# 一、Vue3列表渲染
## 1. v-for的基本使用
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for的基本使用</title>
</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        
        <h2>列表一</h2>
        <ul>
            
            <li v-for="(movie, index) in movies">{{index}}.{{movie}}</li>
        </ul>

        
        <h2>列表二</h2>
        <ul>
            
            <li v-for="(value, key, index) in info">{{index}}.{{key}}: {{value}}</li>
        </ul>

        
        <ul>
            
            <li v-for="(num, index) in 10">{{index}}-{{num}}</li>
        </ul>
    </template>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    message: "Hello World",
                    movies: ["test1", "test2", "test3"],
                    info: {
                        name: "zaker",
                        age: 18,
                        sex: "男"
                    }
                }
            },
            methods: {

            }
        }
        const app = Vue.createApp(App).mount("#app");
    </script>
</body>
</html>
```

## 2. v-for和templat
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for和template</title>
</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        
        <ul>
            <div v-for="(value, key) in info">
                <li>{{value}}</li>
                <li>{{key}}</li>
                <hr>
            </div>
        </ul>

        <ul>
            <template v-for="(value, key) in info">
                <li>{{value}}</li>
                <li>{{key}}</li>
                <hr>
            </template>
        </ul>
    </template>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    info: {
                        name: "ruiwiki",
                        age: 18,
                        height: 1.88
                    }
                }
            },
            methods: {

            }
        }
        const app = Vue.createApp(App).mount("#app");
    </script>
</body>
</html>
```

## 3. 数组的修改方法
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组的修改方法</title>
</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        <h2>列表</h2>
        <ul>
            <li v-for="(movie, index) in movies">{{index}}.{{movie}}</li>
        </ul>
        <input type="text" v-model="newMovie">
        <button @click="addMovie">添加</button>
    </template>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    newMovie: "",
                    movies: [
                        "test1",
                        "test2",
                        "test3"
                    ]
                }
            },
            methods: {
                addMovie() {
                    this.movies.push(this.newMovie);
                    console.log(this.newMovie);
                    this.newMovie = "";
                    console.log(this.newMovie);
                }
            }
        }
        const app = Vue.createApp(App).mount("#app");
    </script>
</body>
</html>
```

## 4. key案例-插入元素
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>key案例-插入f元素</title>
</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        <ul>
            <li v-for="letter in letters">{{letter}}</li>
        </ul>
        <button @click="insertF">插入</button>
    </template>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    newMovie: "",
                    letters: ['a', 'b', 'c', 'd']
                }
            },
            methods: {
                insertF() {
                    // splice('那个位置前面', '需不需要删除0不删除，1删除', '插入数据')
                    this.letters.splice(2, 0, 'f');
                }
            }
        }
        const app = Vue.createApp(App).mount("#app");
    </script>
</body>
</html>
```

五、Vue3列表渲染

# 一、Vue3条件渲染

## 1. 条件渲染的基本使用
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染的基本使用</title>
</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        <h2 v-if="isShow">{{message}}</h2>
        <button @click="btnCleck">切换</button>
    </template>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    message: "Hello World",
                    isShow: true
                }
            },
            methods: {
                btnCleck() {
                    this.isShow = !this.isShow;
                }
            }
        }
        const app = Vue.createApp(App).mount("#app");
    </script>
</body>
</html>
```

## 2. 多个条件渲染
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多个条件渲染</title>
</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        <input type="text" v-model="score">
        <h2 v-if="score > 90">优秀</h2>
        <h2 v-else-if="score > 60">及格</h2>
        <h2 v-else>不及格</h2>
    </template>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    message: "Hello World",
                    score: 95
                }
            },
            methods: {

            }
        }
        const app = Vue.createApp(App).mount("#app");
    </script>
</body>
</html>
```

## 3temolate和v-if一起使用
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>temolate和v-if一起使用</title>
</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        <template v-if="isShow">
            <h2>test1</h2>
            <h2>test1</h2>
            <h2>test1</h2>
        </template>
        <template v-else>
            <h2>test2</h2>
            <h2>test2</h2>
            <h2>test2</h2>
        </template>
    </template>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    message: "Hello World",
                    isShow: true
                }
            },
            methods: {

            }
        }
        const app = Vue.createApp(App).mount("#app");
    </script>
</body>
</html>
```

## 4. v-show和v-if的区别
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show和v-if的区别</title>
</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        
        <h2 v-if="isShow">test1</h2>
        
        <h2 v-show="isShow">test2</h2>
    </template>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    message: "Hello World",
                    isShow: true
                }
            },
            methods: {

            }
        }
        const app = Vue.createApp(App).mount("#app");
    </script>
</body>
</html>
```

四、Vue3条件渲染

# 一.v-bind
## 1 .v-bind的基本使用
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind的基本使用</title>

</head>
<body>
    <div id="app"></div>

    
    
    <template id="my-app">
        
        <img v-bind:src="imgUrl" alt="">
        <a v-bind:href="link">ruiwiki.cn</a>

        
         <img :src="imgUrl" alt="">
    </template>
    <script src="../vue3_init/vue.global.js"></script>
    
    <script>
        Vue.createApp({
            template: '#my-app',
            // 存储数据，声明数据
            data: function() {
                return {
                    message: "Hello Word",
                    imgUrl: "https://img.foreverblog.cn/wormhole_4_tp.gif",
                    link: "https://ruiwiki.cn"
                }
            },
            // 声明方法
            methods: { 
                
            }
        }).mount("#app");
    </script>
</body>
</html>
```

## 2. v-bind绑定class-对象语法
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind绑定class</title>

    <style >
        .active {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        
        <div :class="{'active': isActive}">test</div>
        <button @click="toggle">切换</button>
        
        <div :class="{active: isActive, title: true}">测试</div>
        <div :class="{active: isActive, title: true}">测试</div>

        
        <div class="abc cba" :class="{active: isActive, title: true}">测试</div>

        
        <div class="abc cba" :class="classObj">测试</div>

        
        <div class="abc cba" :class="getClassObj()">测试</div>

    </template>
    <script src="../vue3_init/vue.global.js"></script>

    <script>
        Vue.createApp({
            template: '#my-app',
            // 存储数据，声明数据
            data: function() {
                return {
                    message: "Hello Word",
                    isActive: true,
                    title: "abc",
                    classObj: {
                        active: true,
                        title: true
                    }
                }
            },
            // 声明方法
            methods: {
                toggle() {
                    this.isActive = !this.isActive;
                },
                getClassObj() {
                    return {
                        active: true,
                        title: true
                    }
                }

            }
        }).mount("#app");
    </script>
</body>
</html>
```

## 3. v-bind绑定class-数组语法
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind绑定class</title>

    <style >
        .active {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        <div :class="['abc', title]">测试</div>
    </template>
    <script src="../vue3_init/vue.global.js"></script>
            
    <script>
        Vue.createApp({
            template: '#my-app',
            // 存储数据，声明数据
            data: function() {
                return {
                    message: "Hello World",
                    title: "cba"
                }
            },
            // 声明方法
            methods: {

            }
        }).mount("#app");
    </script>
</body>
</html>
```
## 4. v-bind绑定sytle-对象语法
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind绑定sytle-对象语法</title>

</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        
        <div :style="{color: finalColor, 'font-size': '30px'}">test</div>
        <div :style="{color: finalColor, fontSize: '30px'}">test</div>
        <div :style="{color: finalColor, fontSize: finalFontSize + 'px'}">test</div>
        <div :style="finalStyleObj">zaker</div>
        <div :style="getFinalStyleObj()">zaker</div>
    </template>
    <script src="../vue3_init/vue.global.js"></script>
    
    <script>
        Vue.createApp({
            template: '#my-app',
            // 存储数据，声明数据
            data: function() {
                return {
                    message: "Hello Word",
                    finalColor: "red",
                    finalFontSize: "50",
                    finalStyleObj: {
                        'font-size': '50px',
                        fontWeight: 700,
                        backgroundColor: 'red'
                    }
                }
            },
            // 声明方法
            methods: { 
                getFinalStyleObj() {
                    return {
                        'font-size': '50px',
                        fontWeight: 700,
                        backgroundColor: 'red'
                    }
                }
                
            }
        }).mount("#app");
    </script>
</body>
</html>
```

## 5. v-bind绑定sytle-数组语法
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind绑定sytle-数组语法</title>

</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        <div :style="[style1Obj, style2Obj]">test</div>
    </template>
    <script src="../vue3_init/vue.global.js"></script>

    <script>
        Vue.createApp({
            template: '#my-app',
            // 存储数据，声明数据
            data: function() {
                return {
                    message: "Hello Word",
                    style1Obj: {
                        color: 'red',
                        fontSize: '30px'
                    },
                    style2Obj: {
                        textDecoration: "underline"
                    }
                }
            },
            // 声明方法
            methods: {

            }
        }).mount("#app");
    </script>
</body>
</html>
```

## 6. v-bind动态绑定属性
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind动态绑定属性</title>

</head>
<body>
    <div id="app"></div>

    <template id="my-app">
        <div :[name]="value">zaker</div>
    </template>
    <script src="../vue3_init/vue.global.js"></script>

    <script>
        Vue.createApp({
            template: '#my-app',
            // 存储数据，声明数据
            data: function() {
                return {
                    message: "Hello Word",
                    name: "cba",
                    value: "kobe"
                }
            },
            // 声明方法
            methods: {

            }
        }).mount("#app");
    </script>
</body>
</html>
```

## 7. v-bind属性绑定对象
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind属性绑定对象</title>

</head>
<body>
    <div id="app"></div>
    <template id="my-app">
        <div v-bind="info">test</div>
    </template>

    <script src="../vue3_init/vue.global.js"></script>

    <script>
        Vue.createApp({
            template: '#my-app',
            // 存储数据，声明数据
            data: function() {
                return {
                    message: "Hello Word",
                    info: {
                        name: "why",
                        age: 18,
                        height: 1.88
                    }
                }
            },
            // 声明方法
            methods: {

            }
        }).mount("#app");
    </script>
</body>
</html>
```

## 8. v-no的基本使用
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-no的基本使用</title>

    <style>
        .cleck {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
        
        <button v-on:click="btnClick">登录</button>
        <div class="cleck" v-on:mousemove="mouseMove"></div>

        
        <button @click="btnClick">登录</button>

        
        <button @click="counter++">{{counter}}</button>

        
        <div class="cleck" v-on="{click: btnClick, mousemove: mouseMove}"></div>

    </template>

    <script src="../vue3_init/vue.global.js"></script>

    <script>
        Vue.createApp({
            template: '#my-app',
            // 存储数据，声明数据
            data: function() {
                return {
                    message: "Hello Word",
                    counter: 100
                }
            },
            // 声明方法
            methods: {
                btnClick() {
                    console.log("点击事件");
                },
                mouseMove() {
                    console.log("鼠标移动事件");
                }
            }
        }).mount("#app");
    </script>
</body>
</html>
```

## 9. v-no的参数传递
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-no的参数传递</title>
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
        
        <button @click="btn1Click">按钮</button>
        
        <button @click="btn2Click($event, 'coderwhy', '18')">按钮</button>
    </template>

    <script src="../vue3_init/vue.global.js"></script>

    <script>
        Vue.createApp({
            template: '#my-app',
            // 存储数据，声明数据
            data: function() {
                return {
                    message: "Hello Word"
                }
            },
            // 声明方法
            methods: {
                btn1Click(event) {
                    console.log(event);
                },
                btn2Click(event, name, age) {
                    console.log(event, name, age);
                }
            }
        }).mount("#app");
    </script>
</body>
</html>
```

## 10. v-on的修饰符
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on的参数传递</title>
</head>
<body>
    <div id="app"></div>
    <template id="my-app">
        <div @click="divClick">
            
            <button @click.stop="btnClick">按钮</button>
        </div>
        <input type="text" @keyup.enter="enterKeyup">
    </template>

    <script src="../vue3_init/vue.global.js"></script>

    <script>
        Vue.createApp({
            template: '#my-app',
            // 存储数据，声明数据
            data: function() {
                return {
                    message: "Hello Word"
                }
            },
            // 声明方法
            methods: {
                divClick() {
                    console.log("divClick")
                },
                btnClick() {
                    console.log("btnClick")
                },
                enterKeyup(event) {
                    console.log("keyup", event.target.value)
                }
            }
        }).mount("#app");
    </script>
</body>
</html>
```