滚动条总结

发表于 | 分类于

Vue.js基础

Vue生命周期

beforeCreate

在实例初始化之后，数据观测(data observer)和event/watcher事件配置之前调用。

created

在实例创建完成后被立即调用。在这一步，实例完成了一下配置，数据观测，属性和方法的计算，watch/event事件的回调。然而，挂载阶段还没开始，$el属性目前不可见。

beforeMount

在挂载之前被调用：相关的render函数首次被调用。（该钩子在服务端渲染期间不被调用)

mounted

el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载一个文档内元素，当mounted被调用时vm.$el也在文档内。

注意:mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted。

（该钩子在服务端渲染期间不被调用)

beforeUpdate.

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。

（该钩子在服务端渲染期间不被调用)

updated

避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated。

（该钩子在服务端渲染期间不被调用)

activated

keep-alive 组件使用时调用。

（该钩子在服务端渲染期间不被调用)

deactivated

keep-alive 组件停用时调用。

（该钩子在服务端渲染期间不被调用)

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

该钩子在服务器端渲染期间不被调用。

destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

该钩子在服务器端渲染期间不被调用。

模板语法

双大括号写法

v-once指令，一次性插值，插值内容不会改变。

v-html插入html。

v-bind指令:值是 null、undefined 或 false，特性不渲染。

使用js表达式。

v-if指令：是否真值判断是否渲染元素。

v-on指令：监听DOM事件。

修饰符.prevent阻止默认事件

计算属性和监听器

计算属性是基于它们的响应式依赖进行缓存的。只有在相关的响应式依赖发生改变时它们才会重新求值。
方法是重新渲染时，调用方法总会再次执行函数。

watch

Class与style的绑定

绑定class。

绑定内联样式。

条件渲染

v-if v-else v-else-if

使用key管理可复用元素

v-show就是简单切换display

v-if和v-for不推荐同时使用。

列表渲染

v-for把一个数组对应一组元素

数组更新检测，变异方法和非变异方法（替换数组）

Vue检测：
1.通过索引改变数组的值
vm.$set
2.改变数组的长度，用splice

对象变更属性的添加或删除
Vue.set(object,propertyName,value)

显示过滤/排序后的结果：
使用计算属性

事件处理

v-on

修饰符

.stop

.prevent

.capture

.self

.once

.passive

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

exact 修饰符

表单输入绑定

v-model双向数据绑定

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；

checkbox 和 radio 使用 checked 属性和 change 事件；

select 字段将 value 作为 prop 并将 change 作为事件。

组件基础

data必须是个函数

全局注册和局部注册

通过Prop向子组件传递数据

与父元素通信

动态组件

v-bind:is

本文结束啦感谢您的阅读
undefined