vue基础笔记整理

2017-11-09

一、基本概念

vue核心思想：数据驱动，组件化。
vue特点：轻量，数据绑定，指令，模块化。
传统视图驱动：js操作dom
数据驱动：当数据发生变化时，用户界面发生相应的变化，不需要手动修改dom

1、数据绑定方式：

<!-- 插值 -->
{{ message }}
{{{ htmlSegment }}}
<img src="{{ photoURL }}" />
<!-- 表达式 -->
{{true ? 1 : 0}}
<!-- 指令 -->
<div v-if="upgradable">升级指南：...</div>
<span v-text="anotherMessage"></span>
<div v-html="anotherHTMLSegment"></div>
<li v-bind:class="{'current': thisIsTheCurrentItem}">Item</li>
<a v-bind:href.literal="javascript:void(0)" v-on:click.stop="doSomething">Click Me</a>

2、计算属性：

计算属性就是当其依赖属性的值发生变化时，这个属性值会自动更新，与之相关的dom部分也会自动更新。
Vue.js 提供了一个 $watch 方法用于观察 Vue 实例上的数据变动，这与 AngularJS 的做法类似。不过，通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。
模板：

<div id="app">
  <div>
    长：{{ a }}m、宽：{{ b }}m
  </div>
  <input type="range" v-model="a">
  <input type="range" v-model="b">
  <div>
    长方形面积：{{ s }}m<sup>2</sup>
  </div>
</div>

Vue 实例：

var vm = new Vue({
  el: '#app',
  data: {
    a: 6,
    b: 5,
    s: 30
  }
})
vm.$watch('a', function (val) {
  this.s = val * this.b
})
vm.$watch('b', function (val) {
  this.s = this.a * val
})

如果使用计算属性，我们只需要编写一次计算逻辑，Vue.js 会自动建立该计算属性与 Vue 实例数据 a、b 的依赖关系并追踪变化：

var vm = new Vue({
  el: '#app',
  data: {
    a: 6,
    b: 5
  },
  computed: {
    s: function () {
      return this.a * this.b
    }
  }
})

我们可以设置计算属性的getter和setter。
计算属性getter不执行场景：当计算属性的节点被移除并且模板其他地方没有引用该属性时，那么对应的计算属性getter方法不会执行。

一般情况下，使用计算属性比 $watch 实现简洁、维护方便，对于需要观察 Vue 实例数据变动的需求，如无特殊情况均应优先使用计算属性。

根据 Vue.js 的 $watch API 文档，当调用 Vue 实例的 $watch 方法创建 $watch 时，返回一个 unwatch 函数，用于取消观察，因此在需要取消观察的场合，使用 $watch 为佳。

3、条件渲染的注意事项：

多于一个元素的 v-if 需要使用 <template>
v-show 不支持 <template>
v-else 必须紧跟在 v-if/v-show 指令后面
组件条件下不能使用 <v-else>
将v-show用在组件上时，因为指令的优先级v-else会出现问题，所以我们可以使用另一个v-show来替换v-else

4、数据变化检测：

包装了观察数组变异的方法：push(),pop(),shift(),unshift(),splice(),sort(),reverse()。
观测变化的两个方法：$set,$remove.
track-by特殊属性。

5、v-bind绑定类与样式：

使用数组语法时，绑定表达式可以直接是 Vue 实例的 Data 属性中的一个数组，根据在列表渲染中所学到的关于数据变化检测的原理及对数组方法的包装和扩充知识，可以知道，Vue.js 支持使用 push 和 $remove 方法实现元素数量的变化，从而实现了 addClass 和 removeClass 的功能。

6、表单控件绑定：

使用v-model指令同步用户输入的数据到vue实例data属性中。
v-model修饰指令：lazy，debounce，number

7、事件绑定与处理：

使用 v-on 指令来监听DOM事件，当click事件与某个方法绑定的时候，定义的方法放在methods属性下。
methods中定义的方法内的this始终指向创建的Vue实例；与事件绑定的方法支持参数event即原生DOM事件的传入。

v-on还可以使用内联语句处理，但是限制为一个语句，这个时候如果要访问原生的DOM事件，要用$event.

事件修饰符：.prevent .stop .capture .self
事件处理器中，event.preventDefault()用来阻止事件的默认行为，event.stopPropagation()用来阻止事件冒泡。
.prevent相当于event.preventDefault()，.stop相当于event.stopPropagation()，.capture捕获方式侦听事件，事件以与冒泡方式相反的方式在 DOM 树上传递，.self限制只接受自身触发的事件。

按键修饰符：（可以简化键盘的keycode处理）enter，tap，delete，esc，space，up，down，left，right

8、watch的使用：

watch:一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

我们对计算属性和 $watch 进行了简单的比较，对于有多个依赖需要追踪的情形，优先使用计算属性。
对于由一个数据变化引发多个数据、状态变化的情况，我们推荐使用 watcher；数据变化触发组件间或前后端交互的情况，使用 watcher 也更简明。

关于 watcher 的应用场合，试举例如下：
1.某元素通过 v-show 显示后延时隐藏，可以观察 v-show 所绑定的数据，当数据为真时，启动定时器延时重新设置 v-show 所绑定的数据隐藏元素；
2.日历控件中，日期数值发生变化，获取年、月，计算并重绘日历面板；
3.分页控件用户点击页码触发 pageIndex 数据变化，观察到 pageIndex 变化时触发向后端发起 AJAX 请求，获取该页码中的数据记录，并在获取数据记录后更新分页控件中的页码及状态；
4.用户输入地址，数据变化触发向高德地图发起 AJAX 请求，获取相类似的地址列表并实现 auto-complete；

　由于 watcher 通过函数回调响应数据变化，而在回调函数中还有可能触发其他数据变化引发其他 watcher 回调，因此需要避免滥用造成回调结构过于复杂，影响性能。

二、组件开发

组件的核心目标是为了提高可复用性。一般我们把组件按照template，style，script的拆分方式，放到.vue文件中。

1、注册与使用:全局注册，局部注册

2、数据传递：

props:
子组件需要用props选项来获取父组件的数据。
使用v-bind将动态的props绑定到父组件的数据。
默认绑定是单向的，但是可以使用绑定修饰符改变：.sync双向绑定，.once单向绑定。
可以给props指定验证要求，指定type，当验证失败时，Vue.js将拒绝在子组件上设置此值。

slot:
slot 混合父组件的内容与子组件的内容，slot在bind回调函数中，根据name获取将要替换插槽的元素，具名slot将匹配内容片断钟有对应的slot特性元素。不过任然可以有一个匿名的slot，作为找不到匹配元素的内容片断的回退槽，它是默认slot。如果没有默认的slot，这些找不到匹配元素的内容片断将会被抛弃。
例如：有个multi-insertion 组件 ,

<div>
  <slot name = "one"></slot>
  <slot></slot>
  <slot name = "two"></slot>
</div>
父组件
<multi-insertion>
  <p slot = "one">one</p>
  <p slot = "two">one</p>
  <p>default A</p>
</multi-insertion>
结果为
<div>
  <p slot = "one">one</p>
  <p>default A</p>
  <p slot = "two">one</p>
</div>

动态组件：
动态组件使用同一挂载点，然后动态的在它们之间切换。将组件名绑定到Vue.js特殊的is属性上。

1
2
3

<component :is = "currentView" keep-alive>
<!--组件在vm.currentView 变化时改变-->  
</component>

如果挂载组件发生变化，旧组件会被切换出去，切换出去的组件会被卸载。在挂载点上添加 keep-alive 属性。则组件被切换出去后还会保留在内存中，避免重新渲染。