vue 基本知识整理

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1 每个Vue.js应用都是通过构造函数Vue创建一个Vue的根实例

2 可以扩展Vue构造器，从而使用预定义选项创建可复用的组件构造器

所有的Vue.js组件其实都是被扩展的Vue实例

每一个VUE实例都会代理其 data 对象里所有的属性：注意只有这些被代理的属性是响应的，也就是说值的任何改变都会触发视图的重新渲染。如果在实例创建之后添加的属性到实例上，它不会触发视图

的更新。

vue-resource 在ie9及以下浏览器中，post请求参数无法发送到服务器。。。。。。bug。。。。

在我们的模板中，可以使用javascript表达式，这些表达式会在所属Vue实例的数据作用域下作为javascript被解析。 但是每个绑订都只能包含单个表达式，多个表达式是无法解析的

最初过滤器是使用场景是用于文本转换，所以vue2.0+过滤器只能用于双花括号插件和v-bind表达式中，对于负责数据转换，应该使用计算属性

过滤器函数总接收表达式的值作为第一个参数；

过滤器可以串联；

过滤器是javascript函数，因此可以接收参数；

当v-bind:style 使用需要 特定前缀 的css属性时，Vue.js会自动检测并添加相应的前缀。

从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

<div :style="{ display: [\'-webkit-box\', \'-ms-flexbox\', \'flex\'] }">

这会渲染数组中最后一个被浏览器支持的值。在这个例子中，如果浏览器支持不带浏览器前缀的 flexbox，那么渲染结果会是 display: flex。

template

v-if是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素，我们可以把一个<template>元素当做包装元素，并在上面使用v-if。最终的渲染结果不会包含<template>元素。

v-else-if 

充当v-if的\'else-if块\'，可以链式地使用多次

类似于 v-else，v-else-if 必须紧跟在 v-if 或者 v-else-if 元素之后。

v-show 

v-show的元素始终会被渲染并保留在DOM中。v-show是简单地切换元素的css属性display

v-if vs v-show

v-if 是真正的条件渲染，以为它会确保在切换过程中条件块内的事件监听和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做--直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show就简单的多----不管初始条件是什么，元素总是会被渲染，并且只是简单地基于css进行切换。

一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销，因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件不太可能改变，则使用v-if较好。

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

数组更新检测

Vue 包含一组观察数组的变异方法，所以它们也将触发视图更新，这些方法如下：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

由于javascript的限制，Vue不呢鞥检测以下变动的数组：

1 当你利用索引直接设置一个项时 vm.items[index1]=\'aa\'; 2 直接修改数组的长度 vm.items.length=3;

解决第一类问题：

vm.set(vm.items,index1,\'aa\');

vm.items.splice(index1,1,\'aa\');//splice(index,howmany,item1...itemX)   index:从数组的指定索引开始（必须）,截取的长度（howmany），新插入的值item1.。。。itemX

解决第二种问题：

vm.items.splice(newLength) //截取的长度 从0开始

v-for循环中可以使用方法来处理数据

demo：

<li v-for="n in even(numbers)">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

 <input type="number" name=\'name\' 
onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" 
v-model.number="adgroup.name" required class="form-control"
placeholder="请输入1-30个字符" maxlength="30"/>

　　input type=\'number\' 禁止输入e的验证

以上是 vue 基本知识整理 的全部内容， 来源链接： utcz.com/z/375757.html

回到顶部