vue.js 笔记（一）

安装

1	npm install vue

使用

在html文件中引入vue.js

1	<script src="https://unpkg.com/vue/dist/vue.js"></script>

vue 实例

实例化vue，传人一个选项对象，可以包含数据、模版、挂载元素、方法、生命周期钩子等，详见API文档。

var app = new Vue({
  el: '#app',
  data: data
});

每个vue实例都会代理起data对象里所有的属性，这些被代理的属性都是响应的，也只有这些。
以$为前缀的属性和方法都试vue自带暴露的。

实例生命周期

插值

文本插值（”Mustache”语法，双大括号），将数据解释为纯文本。
v-html将插入的内容当作html，数据绑定会被忽略。（危险的用法，xss攻击）

指令

带有-v前缀的特殊属性，🌰！
v-bind:title可以将元素节点的title属性和vue实例的某个属性保持一致。
vue可以绑定DOM文本到数据，利用v-if指令也可以绑定DOM节点到数据。
v-for指令可以绑定数组的数据来渲染一个项目列表。
v-on指令可以绑定一个事件监听器。
v-model指令可以实现表单输入和应用状态之间的双向绑定。
v-once一次性地插值，当数据改变时，插值处的内容不会更新。
v-on:click.prevent会对触发的事件调用event.preventDefault()。
v-bind:title可以缩写为:title，v-on:click可以缩写为@click。

过滤器

vue 2.x中，过滤器只能在文本插值绑定（双大括号）和v-bind表达式中使用，可以串联，可以接受传参。

计算属性

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。当依赖的属性值没有发生改变时，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。
如果不希望有缓存，可以用method替代。只要发生重新渲染，method调用总会执行该函数。

v-if & v-show

v-if条件渲染，在切换过程中，条件快内的事件监听器和子组件适当地被销毁和重建，同时也是惰性的，只有在条件为真时，才开始渲染。支持<template>语法。
v-show元素总会被渲染，只是简单的基于css进行切换。不支持<template>语法。
前者有更高的切换开销，后者有更高的初始渲染开销。因此，如果需要频繁的切换，选择v-show较好；如果在运行时条件不太可能改变，则用v-if比较好。

组件

注册一个组件，确保在初始化根实例之前注册组件。

// 全局注册
Vue.component('my-component', {
  props: [],
  template: '',
  data: function() {}
});

data必须是一个函数。
组件之间的相互通信，父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息。props down, events up.
动态地绑定父组件的数据到子模板的props，用v-bind。
使用$on(eventName)监听事件，使用$emit(eventName)触发事件。
父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件，而不能用$on侦听子组件抛出的事件。
组件v-model生效，进行数据双向绑定，需要接受一个value属性，在有新的value时触发input事件。
组件作用域简单地说是：父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。