vue知识点

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>   <component :is="currentView">     <!-- 非活动组件将被缓存！ -->   </component> </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
    }
  }
})