【Vue】 基础知识

vue学习顺序:尤雨溪建议

计算属性和监听器

1.监听器(watch)在表单输入时比较有用，可以根据输入不同(监视值变化)触发不同提示 (开销比较大的操作更适合)

2.计算属性主要是用在属性之间存在关联的情况，因为会使用属性依赖缓存(适合开销操作小操作)，如果你不希望有缓存，请用方法来替代。

class和style绑定

1.直接绑定到一个样式对象通常更好，这会让模板更清晰

2.数组语法可以将多个样式对象应用到同一个元素上

条件渲染

1.在 <template> 元素上使用 v-if 条件渲染分组， 此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最 终的渲染结果将不包含 <template> 元素。

2. v-show 只是简单地切换元素css属性display。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

列表渲染

1. 渲染列表时的"就地复用"策略；

2.替换数组，采用的是非变异的方法，这些方法不会改变原来的数组，总是返回一个新的数组,可以用新数组替换旧数组。渲染时，vue不会丢弃现有 DOM 并重新渲染整个列表,所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

3.有些方法并不是响应式的，比如：

       vm.items[1] = 'x' // 不是响应性的              vm.items.length = 2 // 不是响应性的

4. 显示过滤和排序结果可以用计算属性

5.v-for Vs v-if ,当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中;

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

事件处理

1. v-on 接受js代码，或者调用方法的名称;

2.自动匹配修饰符，你也可直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符

<input @keyup.page-down="onPageDown">

3. 为什么在html中监听事件

你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：

1.扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

2.因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。

3.当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

表单输入绑定

组件基础

1.组件复用，当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

2.Prop，prop是组件上一些自定义特性，一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop，这个属性用处还是蛮大的。

3.每个组件只能有一个根元素；

4. $emit 可以在模板中抛出一个事件到父级组件，并且也可以绑定一个值;

5.在组件上使用v-model，为了让

<custom-input v-model="searchText"></custom-input>

运作起来，必须遵守下面规则：

将其 value 特性绑定到一个名叫 value 的 prop 上
在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

6.组件可以通过is属性来进行切换

• 已注册组件的名字，或
• 一个组件的选项对象