vue.js笔记

1、 基础：

1. vue实例：

一个 Vue 应用由一个经过 new Vue 建立的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。当一个 Vue 实例被建立时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的全部的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

2. 模板语法：

Mustache 语法（即{{}}语法）不能做用在 HTML 特性上，遇到这种状况应该使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

3. 计算属性：

• 咱们能够将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是彻底相同的。然而，不一样的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会从新求值。这就意味着只要 message 尚未发生改变，屡次访问 reversedMessage 计算属性会当即返回以前的计算结果，而没必要再次执行函数。

reversedMessage: function () {
    return this.message.split('').reverse().join('')
}

• 当 v-bind:style 使用须要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

4. 条件渲染：

• 在 <template> 元素上使用 v-if 条件渲染分组，也可使用 v-for 列表渲染分组；
• 由于 v-if 是一个指令，因此必须将它添加到一个元素上。可是若是想切换多个元素呢？此时能够把一个 <template> 元素当作不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
• Vue 为你提供了一种方式来表达“这两个元素是彻底独立的，不要复用它们”。只需添加一个具备惟一值的 key 属性便可；
• 当 v-if 与 v-for 一块儿使用时，v-for 具备比 v-if 更高的优先级。
• 注意，v-show 不支持 <template> 元素，也不支持 v-else

5. 列表渲染： v-for

• v-for 能够把一个数组对应为一组元素，还支持一个可选的第二个参数为当前项的索引，也能够用 of 替代 in 做为分隔符，由于它是最接近 JavaScript 迭代器的语法；
• v-for 能够经过一个 Object 对象的属性来迭代，同时也能够提供第二个的参数为键名，第三个参数为索引；
• v-for & v-if：当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每一个 v-for 循环中；

6. 表单输入绑定 v-model：

可是有时咱们想绑定 value 到 Vue 实例的一个动态属性上，这时能够用 v-bind 实现，而且这个属性的值能够不是字符串。

如：复选框：

<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b"
>

// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b

如：单选按钮：

<input type="radio" v-model="pick" v-bind:value="a">

// 当选中时
vm.pick === vm.a

 修饰符： 

• .number

若是想自动将用户的输入值转为 Number 类型 (若是原值的转换结果为 NaN 则返回原值)，能够添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="age" type="number">

 这一般颇有用，由于在 type="number" 时 HTML 中输入的值也老是会返回字符串类型。

• .trim

若是要自动过滤用户输入的首尾空格，能够添加 trim 修饰符到 v-model 上过滤输入：

<input v-model.trim="msg">

 7. 组件：

• is 特性：像 <ul>、<ol>、<table>、<select> 这样的元素里容许包含的元素有限制，而另外一些像 <option> 这样的元素只能出如今某些特定元素的内部。在自定义组件中使用这些受限制的元素时会致使一些问题，例如：

  <table>
    <my-row>...</my-row>
  </table>

  自定义组件 <my-row> 会被看成无效的内容，所以会致使错误的渲染结果。变通的方案是使用特殊的 is 特性：

  <table>
    <tr is="my-row"></tr>
  </table>

  应当注意，若是使用来自如下来源之一的字符串模板，则没有这些限制：

  • <script type="text/x-template">
  • JavaScript 内联模板字符串
  • .vue 组件

  所以，请尽量使用字符串模板。

• data 属性必须是函数；

 8. prop：

• 若是想传递一个真正的 JavaScript 数值，则须要使用 v-bind，从而让它的值被看成 JavaScript 表达式计算，如：

  <!-- 传递了一个字符串 "1" -->
  <comp some-prop="1"></comp>
  
  <!-- 传递真正的数值 -->
  <comp v-bind:some-prop="1"></comp>

• 要指定验证规则，须要用对象的形式来定义 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
        }
      }
    }
  }) 

• 对于多数特性来讲，父组件传递给组件的值会覆盖组件自己设定的值。即例如传递 type="large"将会覆盖 type="date" 且有可能破坏该组件！所幸咱们对待 class 和 style 特性会更聪明一些，这两个特性的值都会作合并 (merge) 操做；
• 自定义事件：自定义事件有：$on 和 $emit；有时候，你可能想在某个组件的根元素上监听一个原生事件。可使用 v-on 的修饰符 .native；
• .sync 操做符：让子组件改变父组件状态的代码更容易被区分；它只是做为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器：

  <comp :foo.sync="bar"></comp>

  当子组件须要更新 foo 的值时，它须要显式地触发一个更新事件：

  this.$emit('update:foo', newValue)

9. 动态组件：

经过使用保留的 <component> 元素，动态地绑定到它的 is 特性，咱们让多个组件可使用同一个挂载点，并动态切换：

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

<component v-bind:is="currentView">
  <!-- 组件在 vm.currentview 变化时改变！ -->
</component>

也能够直接绑定到组件对象上：

var Home = {
  template: '<p>Welcome home!</p>'
}

var vm = new Vue({
  el: '#example',
  data: {
    currentView: Home
  }
})

•  若是把切换出去的组件保留在内存中，能够保留它的状态或避免从新渲染。为此能够添加一个 keep-alive 指令参数

10 . 其余：

• $refs 只在组件渲染完成后才填充，而且它是非响应式的。它仅仅是一个直接操做子组件的应急方案——应当避免在模板或计算属性中使用 $refs；
• 对低开销的静态组件使用 v-once：当组件中包含大量静态内容时，能够考虑使用 v-once将渲染结果缓存起来，如：

  Vue.component('terms-of-service', {
    template: '\
      <div v-once>\
        <h1>Terms of Service</h1>\
        ...不少静态内容...\
      </div>\
    '
  })

 11. 过渡/列表过渡：

• 使用 <transition name="my-transition"> 能够重置前缀，好比 v-enter 替换为 my-transition-enter。v-enter-active 和 v-leave-active 能够控制 进入/离开 过渡的不一样阶段；

• 当有相同标签名的元素切换时，须要经过 key 特性设置惟一的值来标记以让 Vue 区分它们，不然 Vue 为了效率只会替换相同标签内部的内容。即便在技术上没有必要，给在 <transition> 组件中的多个元素设置 key 是一个更好的实践；

• 同时生效的进入和离开的过渡不能知足全部要求，因此 Vue 提供了 过渡模式：

  • in-out：新元素先进行过渡，完成以后当前元素过渡离开；

  • out-in：当前元素先进行过渡，完成以后新元素过渡进入；

• 列表的排序过渡：<transition-group> 组件还有一个特殊之处。不只能够进入和离开动画，还能够改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程当中应用。像以前的类名同样，能够经过 name 属性来自定义前缀，也能够经过 move-class 属性手动设置；

2、 可复用性 & 组合： 

1. 混合 (mixins) 是一种分发 Vue 组件中可复用功能的很是灵活的方式。混合对象能够包含任意组件选项。当组件使用混合对象时，全部混合对象的选项将被混入该组件自己的选项。

// 定义一个混合对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混合对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"

2. 选项合并： 

• 当组件和混合对象含有同名选项时，这些选项将以恰当的方式混合。好比，同名钩子函数将混合为一个数组，所以都将被调用。另外，混合对象的钩子将在组件自身钩子以前调用；值为对象的选项，例如 methods, components 和 directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。注意：Vue.extend() 也使用一样的策略进行合并。
• 谨慎使用全局混合对象，由于会影响到每一个单首创建的 Vue 实例 (包括第三方模板)。大多数状况下，只应当应用于自定义选项，就像上面示例同样。也能够将其用做 Plugins 以免产生重复应用

 三. 插槽：

slot：

// 父组件
<navigation-link url="/profile">
  Your Profile
</navigation-link>

或

<navigation-link url="/profile">
  <!-- 添加一个 Font Awesome 图标 -->
  <span class="fa fa-user"></span>
  Your Profile
</navigation-link>

或

<navigation-link url="/profile">
  <!-- 添加一个图标的组件 -->
  <font-awesome-icon name="user"></font-awesome-icon>
  Your Profile
</navigation-link>

// 子组件
<a v-bind:href="url" class="nav-link" > 
　　<slot></slot>
</a>

以上为不具名 slot。

若是 <navigation-link> 没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。