Vue基础---官网


1、所有的vue组件都是vue实例,并且接受相同的选项对象(一些根实例特有的选项除外 el)
2、vue挂载元素 el $mounted 手动挂载的方式可以运用在vue实例中没有el属性时
3、vue实例上的属性区别于用户自己定义的属性用 带$
4、动态参数 v-on 指令,它用于监听 DOM 事件
同样地,你可以使用动态参数为一个动态的事件名绑定处理函数:
<a v-on:[eventName]="doSomething"> ... </a>
在这个示例中,当 eventName 的值为 "focus" 时,v-on:[eventName] 将等价于 v-on:focus
5、修饰符 .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
<form v-on:submit.prevent="onSubmit">...</form>
6、模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。
在模板中放入太多的逻辑会让模板过重且难以维护
对于任何复杂逻辑,你都应当使用计算属性

7、计算属性有缓存
计算属性是基于它们的响应式依赖进行缓存的
只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,
多次访问 reversedMessage 计算属性会立即返回之前的计算结果
注意:什么时候用watch 什么时候用计算属性 记住不要滥用watch
8、class
数组
对象
定义在data中 对象
计算属性
用在组件上
9、v-if v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
!!!如果想切换多个元素 在template上使用v-if
v-else 紧跟在v-if之后或者是 v-else-if之后
!!!v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级
如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或 <template>) 上
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
10、key 管理可复用的元素!!!
因为Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染
Vue 为你提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”。
只需添加一个具有唯一值的 key attribute 即可
11、v-show
只是简单地切换元素的 CSS property display
!!!v-show 不支持 <template> 元素,也不支持 v-else
12、v-for
v-for="item in items" :key="item.message"
v-for="item of items"
v-for="(value, name) in object"
???在组件上使用v-for

13、数组更新检测
14、在template上使用v-for
15、事件 v-on @
特殊变量 $event
v-on:click="warn('Form cannot be submitted yet.', $event)"

16、事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
17、插槽
我们经常需要向一个组件传递内容
我们只需要在需要加入的地方加入插槽就行了
<slot></slot>
插槽内可以包含任何模板代码,包括html 甚至是其他的组件
后备内容
具名插槽----当我们需要多个插槽时 slot的name属性
v-slot 只能添加在 <template> 上 (只有一种例外情况),独占默认插槽的情况
只要出现多个插槽,请始终为所有的插槽使用完整的基于 <template> 的语法:
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
作用域插槽
动态插槽名
具名插槽的缩写
v-slot 替换成 字符 #

18、动态组件 和异步组件 只在需要的时候才从服务器加载一个模块
:is
<component v-bind:is="currentTabComponent"></component>
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
'my-component': () => import('./my-async-component')
19、组件注册
组件名---字母全小写,且包含一个连字符
全局注册
局部注册
自动化全局注册
20、prop
传入一个对象的所有属性
v-bind=“post”
等价于:<blog-post
v-bind:id="post.id"
v-bind:title="post.title"
></blog-post>

21、自定义事件
@=“” $emit

22、使用 Vuex 来管理应用的状态
23、vue中的依赖注入---耦合度高 不推荐用
provide 选项允许我们指定我们想要提供给后代组件的数据/方法
inject: ['getMap']
24、
当有相同标签名的元素切换时,需要通过 key attribute 设置唯一的值来标记以让 Vue 区分它们,
否则 Vue 为了效率只会替换相同标签内部的内容。
即使在技术上没有必要,给在 <transition> 组件中的多个元素设置 key 是一个更好的实践
25、混入
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。
一个混入对象可以包含任意组件选项。当组件使用混入对象时,
所有混入对象的选项将被“混合”进入该组件本身的选项。
26、自定义指令
27、断言异步更新
由于 Vue 进行异步更新 DOM 的情况,
一些依赖 DOM 更新结果的断言必须在 vm.$nextTick() resolve 之后进行:
28、
数据视图更新的注意事项
Vue 无法检测 property 的添加或移除。
由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,
所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的
但是,可以使用 this.$set(this.someObject,'b',2)方法向嵌套对象添加响应式 property
或者自己给创建一个新对象 this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
vm.$set(vm.items, indexOfItem, newValue) ---数组也是一样
29、异步更新队列
Vue 在更新 DOM 时是异步执行的
this.$nextTick(function () {
console.log(this.$el.textContent) // => '已更新'
})

原文地址:https://www.cnblogs.com/yangyutian/p/13188035.html