• 欢迎来到本博客,希望可以y一起学习与分享

vue使用快速浏览

未分类 benz 2年前 (2019-02-27) 119次浏览 0个评论 扫描二维码
文章目录[隐藏]

vue的属性

vue的方法

vue的生命周期

服务器渲染只有beforeCreate和created被调用

vue render渲染与异常的处理

computed

每当data里的firstName或者lastName有变化,computed就会执行对应的方法,返回方法执行后的结果,要记得方法名与template里的引用名称要一致。
computed会自动缓存数据,如果监听的数据没变化,那么对应的方法不执行,只会读取之前生成好的缓存。

watch

watch默认最初绑定的时候不会自动执行的,如果要自动执行,需要在方法里重写handle()方法和定义一个属性:

watch一般用于监听某个数据的变化,去执行某个指令的操作。

watch的deep属性,以及带来的性能问题

watch有个属性deep,可以对数据进行深度监听,比如:obj:{a:1},deep为false时,obj的a变化了是监听不到的,obj的变化却可以监听得到;deep为true时,obj的a变化了就可以监听了。
这样使用deep会引发性能的问题,因为会深度遍历每个属性,并且都加上监听,这样会使性能变差。那如何解决?答案是使用字符串,定位到需要监听的那一个属性:
以obj为例:

‘obj.a’–>这就是使用字符串,定位到需要监听的那一个属性,同时也再不需要deep属性了。

computed与watch

不管computed还是watch尽量不要修改原来的值,只负责生成新的值就好了,否则会陷入无限循环。

vue内置标签

v-for

这个:key最好赋值,值是唯一的,循环的时候,看缓存有没有同样的key,有就从缓存取出来覆盖,没有就重新生成,有利于优化。
不推荐使用index,即:key=”index”,因为数组每个item每次的索引不一样的,所以更推荐推荐使用item

v-html:禁止把特殊字符转义,把“< span>123< /span>”,当做HTML代码,就要用到v-html,否则原样输出
v-style:样式的动态绑定
v-if:节点的代码是否生成,控制节点存在与否,可以实现隐藏与显示的效果,但是耗性能,因为每次隐藏与显示都要重新渲染
v-show:节点的隐藏与显示,代码是存在的,只是加了display来控制隐藏与显示
v-else-if
v-on:事件监听绑定
v-bind:映射vue的data里的数据
v-model:数据双向绑定
v-model.number:限定数据类型为数字
v-model.trim:把数去掉首尾空格
v-model.lazy:延时加载数据,不为lazy时,数据实时更新,加了lazy后,所有数据操作完成后才更新
v-pre:里面的表达式不会解释,直接输出,< div v-pre>{{text}}< /div>输出“{{text}}”
v-once:数据绑定的内容只执行一次,下次数据变化不会再渲染

组件

其实new Vue(),就是一个组件,习惯称它为根(root)组件,根组件里还可以使用更多组件,称为子组件或者二级组件。

props

组件有个重要的内容,就是props,在组件被外部使用的时候它的可变的行为。
组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。
也就是props是子组件访问父组件数据的唯一接口。

详细一点解释就是:

一个组件可以直接在模板里面渲染data里面的数据(双大括号)。

子组件不能直接在模板里面渲染父元素的数据。

如果子组件想要引用父元素的数据,那么就在prop里面声明一个变量(比如a),这个变量就可以引用父元素的数据。然后在模板里渲染这个变量(前面的a),这时候渲染出来的就是父元素里面的数据。

1. 基本用法


2.命名约定

对于props声明的属性来说,在父级HTML模板中,属性名需要使用中划线写法

子级props属性声明时,使用小驼峰或者中划线写法都可以;而子级模板使用从父级传来的变量时,需要使用对应的小驼峰写法

3.单向数据流: props是单向绑定的

当父组件的属性变化时,将传导给子组件,但是反过来不会。

每次父组件更新时,子组件的所有 prop 都会更新为最新值。

不要在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。

在两种情况下,我们很容易忍不住想去修改 prop 中数据:

  1. Prop 作为初始值传入后,子组件想把它当作局部数据来用;
  2. Prop 作为原始数据传入,由子组件处理成其它数据输出。

对这两种情况,正确的应对方式是:
定义一个局部变量,并用 prop 的值初始化它:

定义一个计算属性,处理 prop 的值并返回:

注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

举个例子:

改变childObject.name,object.name也改变

4. props验证

可以为组件的 props 指定验证规格。如果传入的数据不符合规格,Vue会发出警告。当组件给其他人使用时,这很有用
要指定验证规格,需要用对象的形式,而不能用字符串数组

type 可以是下面原生构造器

type 也可以是一个自定义构造器函数,使用 instanceof 检测。

当 prop 验证失败,Vue 会在抛出警告 (如果使用的是开发版本)。props会在组件实例创建之前进行校验,所以在 default 或 validator 函数里,诸如 data、computed 或 methods 等实例属性还无法使用

下面是一个简单例子,如果传入子组件的message不是数字,则抛出警告

传入数字123时,则无警告提示。传入字符串’123’时,会报错。
将上面代码中,子组件的内容修改如下,可自定义验证函数,当函数返回为false时,则输出警告提示

在父组件中传入msg值为1,由于小于10,则输出警告提示

5. $parent

$parent 也可以用来访问父组件的数据。

而且子组件可以通过$parent 来直接修改父组件的数据,不会报错!

可以使用props的时候,尽量使用props显式地传递数据(可以很清楚很快速地看出子组件引用了父组件的哪些数据)。

另外在一方面,直接在子组件中修改父组件的数据是很糟糕的做法,props单向数据流就没有这种顾虑了。

Vue.extend构造器

Vue 2.0学习笔记:Vue.extend构造器的延伸

Vue 中 extend / component / mixins / extends 的区别

https://segmentfault.com/a/1190000010095089

其它问题

vue 为什么组件的data要写成返回对象的函数

转载:https://blog.csdn.net/qq_33576343/article/details/82793894
原因:对象为引用类型,当重用组件时,由于数据对象都指向同一个data对象,当在一个组件中修改data时,其他重用的组件中的data会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对象(Object的实例),引用地址不同,则不会出现这个问题

注意: 函数方式中data都指向同一个函数,但这个函数每次的返回值都是一个新的对象,可以尝试如下(效果相同)


文章 vue使用快速浏览 转载需要注明出处
喜欢 (0)

您必须 登录 才能发表评论!