vue初学笔记

  Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。(持续更新……)

引用

• unpkg（推荐）: https://unpkg.com/vue/dist/vue.js , 会保持和 npm 发布的最新的版本一致

• cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

• $ npm install vue

• 命令行工具
  vuejs提供了一个官方命令行工具vue-cli，可用于快速搭建大型单页应用

  # 全局安装 vue-cli
  $ npm install --global vue-cli
  # 创建一个基于 webpack 模板的新项目
  $ vue init webpack my-project
  # 跳转到项目根目录
  $ cd my-project
  # 安装依赖项
  $ npm install
  # 运行项目开发版本
  $ npm run dev

初始化根实例

new Vue会创建一个vue根实例，用el属性指定挂载的dom节点，data管理该实例的状态。

<div id="app">
  {{ message }}
</div>

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

展示结果：

Hello Vue!

v- 指令

• v-html用于插入html文本语句(不推荐使用，容易导致XSS攻击)

  <div v-html="text"></div>

  注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译

• v-bind用于属性修改

  <div v-bind:class="demo"></div>

  v-bind:可简写为:
  示例：

  <!-- 绑定一个属性 -->
  <img v-bind:src="imageSrc">
  <!-- 缩写 -->
  <img :src="imageSrc">
  <!-- with inline string concatenation -->
  <img :src="'/path/to/images/' + fileName">
  <!-- class 绑定 -->
  <div :class="{ red: isRed }"></div>
  <div :class="[classA, classB]"></div>
  <div :class="[classA, { classB: isB, classC: isC }]">
  <!-- style 绑定 -->
  <div :style="{ fontSize: size + 'px' }"></div>
  <div :style="[styleObjectA, styleObjectB]"></div>
  <!-- 绑定一个有属性的对象 -->
  <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
  <!-- 通过 prop 修饰符绑定 DOM 属性 -->
  <div v-bind:text-content.prop="text"></div>
  <!-- prop 绑定. “prop” 必须在 my-component 中声明。 -->
  <my-component :prop="someThing"></my-component>
  <!-- XLink -->
  <svg><a :xlink:special="foo"></a></svg>

• v-on用于监听事件

  <button v-on:click="addSomething"></button>

  v-on:可简写为@
  在监听原生 DOM 事件时，方法以事件为唯一的参数$event

  事件监听可以在event.target后加上修饰符:

  • .stop - 调用 event.stopPropagation()。
  • .prevent - 调用 event.preventDefault()。
  • .capture - 添加事件侦听器时使用 capture 模式。
  • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .native - 监听组件根元素的原生事件。

  示例：

  <!-- 方法处理器 -->
  <button v-on:click="doThis"></button>
  <!-- 内联语句 -->
  <button v-on:click="doThat('hello', $event)"></button>
  <!-- 缩写 -->
  <button @click="doThis"></button>
  <!-- 停止冒泡 -->
  <button @click.stop="doThis"></button>
  <!-- 阻止默认行为 -->
  <button @click.prevent="doThis"></button>
  <!-- 阻止默认行为，没有表达式 -->
  <form @submit.prevent></form>
  <!--  串联修饰符 -->
  <button @click.stop.prevent="doThis"></button>
  <!-- 键修饰符，键别名 -->
  <input @keyup.enter="onEnter">
  <!-- 键修饰符，键代码 -->
  <input @keyup.13="onEnter">

• v-if 根据表达式的值的真假条件渲染元素
  在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。

  <template v-if="boolean"></template>

• v-show 根据表达式之真假值，切换元素的 display CSS 属性
  带有 v-show 的元素始终会被渲染并保留在 DOM 中

  <ul>
    <li v-show="boolean1"></li>
    <li v-show="boolean2"></li>
  </ul>

  注意， v-show 不支持 <template> 语法，也不支持 v-else

• v-for 基于源数据循环迭代渲染元素或模板块
  v-for默认行为试着不改变整体，而是替换元素。迫使其重新排序的元素,您需要提供一个 key 的特殊属性:

  <div v-for="item in items" :key="item.id">
    {{ item.text }}
  </div>
  <div v-for="(item, index) in items"></div>
  <div v-for="(val, key) in object"></div>
  <div v-for="(val, key, index) in object"></div>

• v-model 在表单控件或者组件上创建双向绑定
  该指令的绑定元素有限制，只能在表单控件和组件上使用

  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>

  以上示例将input的输入与data管理的message绑定，当输入变化时，更新message的值

  v-model可以添加特殊的修饰符，实现某些功能：

  • .lazy - 取代 input 监听 change 事件
  • .number - 输入字符串转为数字
  • .trim - 输入首尾空格过滤

vue实例生命周期

  每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM ，在这个过程中，实例也会调用一些 生命周期钩子，如 mounted、 updated 、destroyed。
生命周期图示：

注释：

• beforeCreate // 该方法在组件尚未创建前触发，此时data数据和节点都尚未渲染，事件和watch监听事件暂未配置
• created // 该方法在组件实例已经创建，但是组件尚未挂载到页面中，data数据已产生，节点尚未被渲染出来，watch事件监听和mathods事件配置已挂载到vue中
• beforeMount // 该方法组件尚未被挂载到页面中，render函数首次调用
• mounted // 该方法在dom节点已经渲染完成后并且节点已经被替换成vue节点绑定，可以在该方法中获取到vue绑定节点
• beforeUpdate // 该方法是在数据更新时调用，发生在虚拟dom渲染到vue的html模板上之前触发事件
• updated // 该方法是在数据更改，虚拟dom重新渲染和打补丁之后触发该事件，
• activated // 该事件是在keep-alive组件被激活时调用
• deactivated // 该事件是在keep-alive组件停用时调用
• beforeDestroy // 该事件是在组件销毁前调用，用户离开组件时调用

• destroyed // 该事件是在组件完全销毁后，但是Vue 实例指示的所有东西都尚未解除绑定，该事件触发完成后，所有的事件监听器会被移除，所有的子实例也会被销毁。

  响应式

  组件

  自定义事件

  使用v-on绑定自定义事件

    每个Vue实例都实现了事件接口：

  • $on(eventName)监听事件
  • $emit(eventName,enentTarget)触发事件
    不能用$on侦听子组件抛出的事件，而必须在父组件的子组件模板里直接用v-on绑定

  <div id="counter-event-example">
    <p>{{ total }}</p>
    <button-counter v-on:increment="incrementTotal"></button-counter>
    <button-counter v-on:increment="incrementTotal"></button-counter>
  </div>

  Vue.component('button-counter', {
    template: '<button v-on:click="increment">{{ counter }}</button>',
    data: function () {
      return {
        counter: 0
      }
    },
    methods: {
      increment: function () {
        this.counter += 1
        this.$emit('increment')
      }
    },
  })
  new Vue({
    el: '#counter-event-example',
    data: {
      total: 0
    },
    methods: {
      incrementTotal: function () {
        this.total += 1
      }
    }
  });

  .native修饰v-on可在某个组件的根元素上监听一个原生事件

  <my-component v-on:click.native="doTheThing"></my-component>

使用自定义事件的表单绑定组件

自定义事件可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定

<input v-model="something">
// 相当于(语法糖)
<input v-bind:value="something" v-on:input="something = $event.target.value">
// 绑定组件简写为
<custom-input v-bind:value="something" v-on:input="something = arguments[0]"></custom-input>

非父子组件通信

两个组件也需要通信(非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线，示例如下：

var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

在复杂的情况下，我们应该考虑使用专门的状态管理模式,如Vuex.

过渡效果

插件

vue-router

vuex

参考

• Vuejs官方教程