前端知识整理VIP免费

1Vue.js知识整理1.1基础知识1.1.1Vue实例创建一个实例所有的Vue组件都是Vue实例，并且接受相同的选项对象(一些根实例特有的选项除外)。//就是指构造函数初始化对象时需要接收的参数每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的：数据与方法当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。除了数据属性，Vue实例还暴露了一些有用的实例属性与方法。它们都有前缀$，以便与用户定义的属性区分开来。实例生命周期钩子1.1.2模板语法指令指令(Directives)是带有v-前缀的特殊attribute。指令attribute的值预期是单个JavaScript表达式(v-for是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。参数一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind2指令可以用于响应式地更新HTMLattribute：在这里href是参数，告知v-bind指令将该元素的hrefattribute与表达式url的值绑定。另一个例子是v-on指令，它用于监听DOM事件：在这里参数是监听的事件名（click）。我们也会更详细地讨论事件处理。动态参数这里的attributeName会被作为一个JavaScript表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的Vue实例有一个data属性attributeName，其值为"href"，那么这个绑定将等价于v-bind:href。同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：在这个示例中，当eventName的值为"focus"时，v-on:[eventName]将等价于v-on:focus。对动态参数值的约束动态参数预期会求出一个字符串，异常情况下值为null。这个特殊的null值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。对动态参数表达式的约束动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在HTMLattribute名里是无效的。变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。在DOM中使用模板时(直接在一个HTML文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把3attribute名全部强制转为小写。修饰符修饰符(modifier)是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。缩写1.1.3计算属性和侦听器计算属性基础例子计算属性缓存与方法我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。4我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于A。如果没有缓存，我们将不可避免的多次执行A的getter！如果你不希望有缓存，请用方法来替代。计算属性和侦听属性计算属性的setter侦听器虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么Vue通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步操作(访问一个API)或开销较大的操作时，这个方式是最有用的。1.1.4Class和Style绑定绑定HTMLClass对象语法我们可以传给v-bind:class一个对象，以动态地切换class：数组语法我们可以把一个数组传给v-bind:class，以应用一个class列表（这里也可以用三元表达式）：用在组件上绑定内联样式对象语法v-bind:style的对象语法十分直观——看着非常像CSS，但其实是一个JavaScript对象。CSS属性名可以用驼峰式(camelCase)或短横线分隔(kebab-5case，记得用引号括起来)来命名：数组语法v-bind:style的数组语法可以将多个样式对象应用到同一个元素上：1.1.5条件渲染v-ifv-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染。在