Vue学习笔记
0、Vue对象属性：data存数据，methods定义方法、watch监听Vue对象变化。
html指令：数据渲染：v-text、v-html、{{}}。 控制模块隐藏：v-if、v-show。列表渲染：v-for。事件绑定：v-on。v-bind：属性绑定。
1、Computed 属性 vs Methods vs Watch 属性
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
只要发生重新渲染，method 调用总会执行该函数。
watch 选项允许我们执行异步操作（访问一个 API），当你想要在数据变化响应时，执行异步操作或开销较大的操作时使用。
2、v-if vs v-show
v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用
v-if 较好。
3、v-for
1、为了跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。建议尽可能使用 v-for 来提供 key ，除非迭代、DOM 内容足够简 单，或者你是故意要依赖于默认行为来获得性能提升。
2、有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。或者，在计算属性不适用的情 况下 (例如，在嵌套 v-for 循环中) 使用 method 方法。
4、v-on事件修饰符
-
.stop：<!--阻止事件冒泡--> -
.prevent：<!--阻止事件默认行为--> .capture: <!-- 添加事件侦听器时使用事件捕获模式 -->-
.self：<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> .once：<!-- 点击事件将只会触发一次 --> 2.14新增
5、v-on按键修饰符
.enter .tab .delete(捕获 “删除” 和 “退格” 键).esc .space.up .down .left .right.ctrl .alt .shift .meta 2.10新增
6、v-model表单控件绑定
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。负责监听用户的输入事件以更新数据。
对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）：
7、v-model修饰符
.lazy 在默认情况下， v-model 在 input 事件中同步输入框的值与数据 但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
.number 将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
.trim 过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入
8、组件
1、Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素 <ul> ， <ol>， <table> ， <select> 限制了能被它包裹的元素，变通的方案是使用特殊的 is 属性。<table><tr is="my-row"></tr></table>
2、在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。
3、修改prop中数据：
A、定义一个局部变量，并用 prop 的值初始化它
B、定义一个计算属性，处理 prop 的值并返回。
4、每个 Vue 实例都实现了事件接口(Events interface)，即：
A、使用 $on(eventName) 监听事件
B、使用 $emit(eventName) 触发事件
