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秒
按钮
将限流的逻辑封装
（2）使用Lodash库进行函数限流：是一款高性能的JavaScript实用工具库。提供了大量的数组、对象、字符串等边界的操作方法，使开发者更简单的使用JavaScript。在Lodash库中提供了debounce函数
二、表单数据的双向绑定
1.单行文本框的绑定
2.多行文本框的绑定
3.复选框的绑定：多个复选框绑定的变量名要相同，并且是数组类型的
4.单选按钮的绑定
5.下拉列表框的绑定
6.常用的两个修饰符
（1）lazy：懒加载。当输入框失去焦点时再将输入框和变量进行绑定
（2）trim：去掉绑定的文本数据前后的空格
三、Vue组件的样式绑定
1.为HTML标签绑定class属性
v-bind，为class属性绑定一个对象，在对象中可以设置对象是否可用
（1）绑定class属性，由绑定变量来决定应用哪个样式
（2）可以将样式直接设置成Vue组件中的数据对象
注意：v-bind的缩写(:)
2.绑定内联样式
注意：内联的CSS样式属性与外部的CSS样式属性名有区别的
内联的CSS样式属性名：通常采用驼峰命名，如：fontSize
外部的CSS样式属性名：采用‘-’进行连接，如:font-size
3.示例：用户注册页面
四、Vue的事件监听和处理
1.事件监听：是通过v-on指令（用@符号代替）绑定事件处理程序
2.多事件的处理：对于同一个用户交互事件，需要调用多个方法进行处理
（1）获取事件类型：$event
（2）多事件处理的语法
3.事件修饰符
（1）DOM的事件原理：
首先会从父组件开始依次传递到子组件----事件捕获
其次当事件传递到最内层的子组件时，会逆向再进行一次传递，从子组件依次向上传递----事件冒泡
（2）Vue中使用v-on指令绑定事件时默认监听的是DOM事件的冒泡阶段
（3）如果需要监听捕获阶段的事件，在Vue中使用capture事件修饰符来实现
（4）stop：阻止事件的传递
（5）once：只触发一次事件
（6）prevent：禁止默认事件
五、Vue的事件类型
1.常用事件
| click | 单击 |
| dbclick | 双击 |
| focus | 获取焦点 |
| blur | 失去焦点 |
| change | 元素内容改变 |
| select | 元素内容被选中 |
| mousedown | 鼠标按键被按下 |
| mouseup | 鼠标按键抬起 |
| mousemove | 鼠标在组件内移动 |
| mouseout | 鼠标移出组件 |
| mouseover | 鼠标移入组件 |
| keydown | 键盘按键被按下 |
| keyup | 键盘按键抬起 |
2.Vue中的按键修饰符：对特殊键识别时需要使用按键修饰符
（1）监听用户是否按回车键（enter）
Keyup(event){
if(event.key == ‘Enter’)
{
}
}在Vue中的写法
enter、ctrl、alt、shift、left（鼠标左键）、right（鼠标右键）、middle（鼠标中间键）
六、Vue的组件
1.组件的创建
（1）创建组件的模板
const obj = {
data(){
return{
}
},
methods:{
}
template: 模板字符串 //组件的视图（2）注册组件
App.component(‘标识名’，组件对象)例如
App.component(‘my-obj’,obj);2.组件中数据和事件的传递
（1）给组件添加外部属性：在组件的对象模板中使用props来定义组件的外部属性
（2）处理组件事件：在子组件中调用外部组件的方法(使用$emit来实现)
a、在子组件中调用父组件方法时，可以传参