Vue知识点总结

一.vue.js开发基础
1.文本插值
        理解：在Vue中,插值手机一种常见操作，用于将数据动态的渲染到HTML模板中。

        语法：{{xxx}}

        作用：指定标签体内容

        代码示例：

        

2.绑定stule属性
        理解：在Vue中，绑定style属性可以帮助我们动态地设置元素的样式。通过使用Vue的计算属性或侦听器，我们可以根据组件的状态动态地改变元素的样式。

        代码示例：

3.属性绑定
        理解：将Vue实例中的数据和DOM元素的属性或者内容进行关联，当数据发生变化时，DOM元素也会随之更新

        语法：在Vue中，属性绑定可以通过v-bind指令来实现，也可以使用简写的形式“:”来表示

        用法：属性绑定可以绑定单一JavaScript表达式、Object对象和方法，其中如果绑定为Object对象的话，会绑定对象的toString()方法的返回值，如果绑定为方法的话，会绑定方法的返回值。在Class和Style绑定中，可以使用v-bind:class和v-bind:style指令来绑定class和style属性，也可以使用简写的形式“:class”和“:style”来表示。

        代码示例（class属性）：

4.定时器案例

        内容：使用methods和data属性创建的一个简单的定时器案例

        代码示例：

5.v-model指令
        理解：用于在表单元素和组件之间创建双向数据绑定，表单可以拿到vue中的数据，表单中的数据也可以传给vue

        语法：<input v-model="value">

        用法：v-model 指令可以与多种表单元素结合使用，如文本输入框、复选框、单选按钮、选择框等。

        代码示例（输入框，下拉框以及复选框）：

二.计算属性与侦听器
1.计算属性
计算属性的缓存特性：

        计算属性是基于它们的依赖进行缓存的。只有在它的依赖属性发生改变时，才会重新计算计算属性。

计算属性的基本使用：

        首先需要在Vue实例中定义一个计算属性，然后在模板中通过访问器函数来使用它

计算属性的完整结构：

        1.每一个计算属性都包含一个getter函数与setter函数

        2.计算属性会默认使用getter函数,setter函数并不常见，所以一般计算属性getter和setter都不写。

        3;getter防数是状认用法,setter图数不是默认用法，如果要使用setter函数，必须手动写出setter南数

        4.setter医数内的形参是你要修改的值

        代码示例：

事件代码示例

侦听器的结构：

        watch: {  
                  // 参数一：改变后的值。  
                  // 参数二：改变前的值。  
                    }

对数组进行侦听：

        在Vue中，可以使用侦听器（watch）来监听数组的变化。当数组中的元素发生变化时，侦听器会自动触发相应的处理函数。

代码示例：

键盘事件

输入法事件

鼠标事件