Vue实例及组件

目录

一、Vue实例的属性和方法

1.什么是vue实例：又称为Vue组件

（1）Vue2.0创建Vue组件方法

 （2）Vue3.0创建Vue组件的方法

2.Vue组件的属性

3.Vue组件中的函数

  （1）限流函数

二、表单数据的双向绑定

三、Vue组件的样式绑定

1.为HTML标签绑定class属性

  （1）绑定class属性，由绑定变量来决定应用哪个样式

  （2）可以将样式直接设置成Vue组件中的数据对象

2.绑定内联样式

四、Vue的事件监听和处理

1.事件监听：是通过v-on指令（用@符号代替）绑定事件处理程序

2.多事件的处理：对于同一个用户交互事件，需要调用多个方法进行处理

3.事件修饰符

五、Vue的事件类型

1.常用事件

2.Vue中的按键修饰符：对特殊键识别时需要使用按键修饰符

六、Vue的组件

1.组件的创建

 （1）创建组件的模板

（2）注册组件

---

一、Vue实例的属性和方法

1.什么是vue实例：又称为Vue组件

（1）Vue2.0创建Vue组件方法

new Vue({…})

 （2）Vue3.0创建Vue组件的方法

Vue.createApp({…})

2.Vue组件的属性

 （1）data：是一个函数，在组件创建时会调用此函数来构建响应性的数据系统。是组件的存储属性获取该属性值的方式：

• Vue组件名.变量名
• Vue组件名.$data.变量名
• 本质是访问的同一个数据块

（2）计算属性（computed）：通常可以将存储属性的值直接渲染到html的元素上，在有些场景下存储属性的值不适合直接渲染，需要处理之后再进行渲染。在Vue中使用计算属性对数据进行再处理

注意：v-on绑定事件，若使用v-on绑定单个事件可以简写为‘@事件名’

注意：

a.存储属性主要用于数据的存取，我们可以通过赋值运算来修改它的属性值。通常，计算属性只用来取值，不会用来存值，因此计算属性默认提供的是取值方法（get方法）；计算属性也可以通过赋值进行存储数据，但是存数据的方法需要手动实现（set方法）

b.当使用计算属性时，默认调用get方法（该方法不能显式调用）

当给计算属性赋值时，调用的是set方法（该方法不能显式调用）

（3）侦听属性（属性侦听器）：可以方便的监听某个属性的变化，以完成复杂的业务逻辑。在Vue中的属性侦听器是watch

（4）定义方法的属性（methods）：在该属性下定义Vue组件的函数

3.Vue组件中的函数

  （1）限流函数

a.限流：

场景1：点击按钮向服务器发起数据请求，在请求的数据回来之前多次单击按钮是无效的且会消   耗资源

场景2：页面中某个按钮会导致页面的刷新，我们需要限制用户对该按钮进行频繁的操作

b.限流函数：在指定的时间间隔内不允许重复执行同一个函数

示例：页面中有一个按钮，单击按钮后在控制台输出当前的时间，要求这个按钮的两次事件触发间隔不能小于2秒

    <div id="app">
        <button @click="myClick">按钮</button>
    </div>
    <script>
        const obj = {
            data(){
                return {
                    throttle: false
                }
            },
            methods:{
                myClick(){
                    if(!this.throttle){
                        console.log(Date());
                    }else{
                        return
                    }
                    this.throttle = true
                    setTimeout(()=>{
                        this.throttle = false //2秒后throttle变为false
                    },2000)
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    </script>

将限流的逻辑封装

    <script>
        var throttle = false
        function throttleTool(ca