Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery完美协作,并和$.animate()有相同的 API,但它不依赖 jQuery,可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能,还拥有:颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。
表单输入和应用状态之间的双向绑定
<input v-model="message">
//修饰符:
.lazy - 取代 input 监听 change 事件
.number - 输入字符串转为数字
.trim - 输入首尾空格过滤
Vue.component(tagName, options)全局注册组件(小写,并且包含一个短杠)
创建一个 Vue 实例
new Vue({ el: '#some-element', // 选项
data: function () { return { counter: 0 } }
})
局部注册
var Child = {
props: ['todo'] template: '<div>{{ todo.text }} </div>' }
new Vue({ // ... components: { // <my-component> 将只在父组件模板中可用 'my-component': Chidl } })
HTML 特性是不区分大小写的。所以,当使用的不是字符串模板时,camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名):
<!-- 在 HTML 中使用 kebab-case --> <childmy-message="hello!"></child>
Vue.component('child', { // 在 JavaScript 中使用 camelCase props: ['myMessage'], template: '<span>{{ myMessage }}</span>' })
我们可以用 v-bind
来动态地将 prop 绑定到父组件的数据。每当父组件的数据变化时,该变化也会传导给子组件:
<div> <inputv-model="parentMsg"> <br> <childv-bind:my-message="parentMsg"></child> </div>
把一个对象的所有属性作为 prop 进行传递,可以使用不带任何参数的 v-bind
(即用 v-bind
而不是 v-bind:prop-name
)。例如,已知一个 todo
对象:
todo: { text: 'Learn Vue', isComplete: false }
<todo-itemv-bind="todo"></todo-item>
等价于:<todo-item v-bind:text="todo.text" v-bind:is-complete="todo.isComplete" ></todo-item>
单向数据流:Prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会。这意味着你不应该在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。可以通过重新定义一个data和computed属性不进行重新生成数据修改
注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。
我们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求,Vue 会发出警告,需要用对象的形式来定义 prop
Vue.component('example', { props: { // 基础类型检测 (`null` 指允许任何类型) propA: Number, // 可能是多种类型 propB: [String, Number], // 必传且是字符串 propC: { type: String, required: true }, // 数值且有默认值 propD: { type: Number, default: 100 }, // 数组/对象的默认值应当由一个工厂函数返回 propE: { type: Object, default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function (value) { return value > 10 } } } })
替换/合并现有的特性:对待 class
和 style
特性会做合并 (merge) 操作,对于多数特性来说,传递给组件的值会覆盖组件本身设定的值
每个 Vue 实例都实现了事件接口,即:
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
实例方法 / 事件:vm.$on(event, callback );
vm.$once(event, callback )
vm.$off([event, callback] )
vm.$emit(event, […args] )
实例方法 / 生命周期
vm.$mount([elementOrSelector] ) 如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
var MyComponent = Vue.extend({ template: '<div>Hello!</div>' }) // 创建并挂载到 #app (会替换 #app) new MyComponent().$mount('#app') // 同上 new MyComponent({ el: '#app' })
vm.$forceUpdate():迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
vm.$nextTick( [callback] )将回调延迟到下次 DOM 更新循环之后执行
new Vue({ // ... methods: { // ... example: function () { // 修改数据 this.message = 'changed' // DOM 还没有更新 this.$nextTick(function () { // DOM 现在更新了 // `this` 绑定到当前实例 this.doSomethingElse() }) } } })
vm.$destroy():触发 beforeDestroy
和 destroyed
的钩子。
当子组件模板只有一个没有属性的插槽时,父组件传入的整个内容片段将插入到插槽所在的 DOM 位置,并替换掉插槽标签本身。最初在 <slot>
标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译,并且只有在宿主元素为空,且没有要插入的内容时才显示备用内容。
slot>
元素可以用一个特殊的特性 name
来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot
特性的元素。
仍然可以有一个匿名插槽,它是默认插槽,作为找不到匹配的内容片段的备用插槽。如果没有默认插槽,这些找不到匹配的内容片段将被抛弃。
<slot>
元素可以用一个特殊的特性 name
来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot
特性的元素。
在父级中,具有特殊特性 slot-scope
的 <template>
元素必须存在,表示它是作用域插槽的模板。slot-scope
的值将被用作一个临时变量名,此变量接收从子组件传递过来的 prop 对象:
通过使用保留的 <component>
元素,并对其 is
特性进行动态绑定,你可以在同一个挂载点动态切换多个组件:
如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数:
<keep-alive> |
同名钩子函数将混合为一个数组,因此都将被调用。另外,混合对象的钩子将在组件自身钩子 之前 调用
值为对象的选项,例如 methods
, components
和 directives
,将被混合为同一个对象。两个对象键名冲突时,取组件对象的键值对。
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器
Vue.component('anchored-heading', { render: function (createElement) { return createElement( 'h' + this.level, // tag name 标签名称 this.$slots.default // 子组件中的阵列 ) }, props: { level: { type: Number, required: true } } })