Vue基础知识点总结

一.vue.js开发基础

1.文本插值

        理解：在Vue中,插值手机一种常见操作，用于将数据动态的渲染到HTML模板中。

        语法：{{xxx}}

        作用：指定标签体内容

        代码示例：

        

2.方法属性

        理解：Vue中的方法和属性是指在Vue实例中定义的函数和变量。

        常用的方法属性：

• data属性：用于定义Vue实例的数据对象。
• methods属性：用于定义Vue实例的方法。
• computed属性：用于定义计算属性，这些属性的值是根据其他数据属性计算得出的。
• watch属性：用于监听数据属性的变化并执行相应的操作。
• v-bind指令：用于将Vue实例的数据绑定到HTML元素的属性上。
• v-on指令：用于绑定事件处理函数到HTML元素上。
• v-if指令：用于根据条件动态地渲染HTML元素。
• v-for指令：用于循环渲染HTML元素。

        代码示例（data属性与methods属性）：

        

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医数内的形参是你要修改的值

        代码示例：

2.侦听器

侦听器的基本使用：

侦听器的结构：

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

对数组进行侦听：

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

代码示例：

三.结构渲染

1.条件结构渲染指令：v-if

        理解：用于根据表达式的真假条件来决定是否渲染元素。当表达式的值为真时，v-if 渲染元素；当表达式的值为假时，v-if 不会渲染元素。

        语法：<div v-if="条件"></div>

        v-if和v-show的区别：

     [v-show]

    1.本质就是标签display设置为none,控制隐藏。只是基于CSS进行切换

    2.v-show有更高的初始渲染消耗。

    3.v-show适合频繁切换的情况。

    [v-if]

    1.动态的向DOM树内添加或者删除DOM元素

    2.v-if有更高的切换消耗。

    3.v-if适合运行条件很少改变的情况。

        代码示例：

2.结构渲染指令：v-for

        理解：用于根据一个数组或对象的内容循环渲染元素。通过v-for指令，我们可以轻松地将一组数据渲染到页面上，实现数据的展示、列表、分页等功能。

        基本语法：<div v-for="(item,index) in items" :key="index">  
                                  {{ item }}  
                          </div>

        代码案例（遍历数组，数字，对象）：

 遍历数组

遍历数字

遍历对象

        

四.样式绑定

1.绑定class属性

01对象内联绑定

        理解：通过使用Vue.js，我们可以将数据对象与HTML元素进行绑定，从而实现在页面上动态更新数据的目的。

        代码示例：

02对象非内联绑定

        理解：在Vue中，对象非内联绑定指的是通过在JavaScript代码中创建DOM元素，并将JavaScript对象与DOM元素进行绑定

        代码示例：

03数组绑定

        理解：通过数组绑定，我们可以将数组中的数据动态地渲染到页面上，并实现数据的双向绑定。

        代码示例：

04数组条件运算符绑定

        理解：用于判断数组中是否存在满足特定条件的元素，并根据条件的结果来决定是否渲染DOM元素。

        代码示例：

05数组对象绑定

        理解：

        代码示例：

2.绑定stule属性

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

        代码示例：

五.事件处理

在以下链接中有详细解释：

        掌握Vue代码中的事件处理：从焦点事件到输入法事件-CSDN博客

六.表单绑定

1.表单绑定

        理解：表单绑定是指将表单元素的值与Vue实例中的数据进行绑定。通过表单绑定，我们可以将表单元素的值动态地更新到Vue实例中的数据，并在数据变化时自动更新表单元素的值。

        代码示例：

2.表单修饰符

        理解：通过使用表单修饰符，我们可以更方便地处理表单元素的值和状态，而无需编写繁琐的逻辑。

        常见的表单修饰符：

               v-model

               v-if和v-else-if