vue官方文档学习

概述

vue是用于构建用户界面的渐进式框架，自底而上的应用，是一套用户救恩面的框架

声明式渲染

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

通过简洁的模板语法来让数据渲染至dom，数据和dom的关联是响应式的。dom会随数据的变化而变化

条件与循环

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ],
    seen:false
  }
})

处理用户输入

v-on 添加事件监听器
v-model 数据和dom绑定

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>
<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

组件化构建应用

组件：在vue中，组件其实是一个带有自定义选项的vue实例
组件注册

Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

vue实例

vue实例的创建，选项中可以包含包括路由等一系列东西

var vm = new Vue({
  // 选项
})

vue实例被创建后，将data所有选项的属性加到vue的响应系统中，视图将会根据data值的不同而变化，新增的属性和object.freeze将阻止现有的响应变化。
vue实例的生命周期

模板语法

基于html的模板语法，将dom绑定vue底层实例数据，vue实例是将dom编译成虚拟的dom函数，响应系统根据函数进行实时渲染。
文本
双大括号 v-once一次性加载

<span>Message: {{ msg }}</span>
<span v-once>这个将不会改变: {{ msg }}</span>

特性

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

指令
v-if 条件式渲染
v-on 事件绑定
参数

<a v-bind:href="url">...</a>

动态参数

<a v-bind:[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>

动态参数是用方括号括起来的js表达式
动态参数会预期求出一个字符串的值异常为null，null会移除绑定
修饰符

<form v-on:submit.prevent="onSubmit">...</form>

指令用特殊的方式绑定
.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

计算属性和监听器

对于模板里面的复杂处理逻辑，使用计算属性（computed）
计算属性是基于响应式依赖进行缓存的，即只有数据发生变化，才进行计算，否则不会变化
监听属性：数据发生变化的时候，要执行异步或者开销比较大的操作的时候（watch）

class和style绑定

<div v-bind:class="{ active: isActive }"></div>

根据data选项中isActive的值进行切换

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

数组语法

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

绑定内联样式

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
<div v-bind:style="[baseStyles, overridingStyles]"></div>

条件渲染

v-if，可以用key管理可重复的元素

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

v-show，简单切换css的display属性

<h1 v-show="ok">Hello!</h1>

列表渲染

遍历对象

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

遍历对象属性

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

需要给每个遍历的项目，增加key值来区分

事件处理

v-on监听dom事件

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

访问原始dom事件传￥event进去

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

表单输入绑定

你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

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

值绑定
修饰符：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
<input v-model.number="age" type="number">
<input v-model.trim="msg">

组件

组件注册的时候组件名首字母大写或者连字符连起来
全局注册

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
<!--组件的使用--!>
<div id="components-demo">
  <button-counter></button-counter>
</div>

局部注册

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

模块系统中局部注册

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}

一个组件的data必须是函数

1. prop向子组件传递数据
   prop是在组件上自定义属性，父组件里将值传递给子组件的时候，这个值会变成子组件的一个实例属性
   HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名
   prop是单向数据流，都是从父组件到子组件进行值传递，这个过程不可逆

2. 监听子组件的事件
   通过this.$emit来实现

<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>

3. 组件使用v-model

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

4. 通过插槽分发内容
   内容分发api，作为入口

<navigation-link url="/profile">
  Your Profile
</navigation-link>
navigation组件内容
<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

slot里面如果有内容的话，父组件没有，会渲染slot的默认内容，父组件有的话，就会渲染父组件的内容
slot有name属性

5. 动态组件

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

用keep-alive来缓存失活的组件的状态

<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

include 有条件的缓存
6. 异步组件

Vue.component(
  'async-webpack-example',
  // 这个 `import` 函数会返回一个 `Promise` 对象。
  () => import('./my-async-component')
)

7. 访问子组件的实例或者子元素
   通过ref特性

<base-input ref="usernameInput"></base-input>
this.$refs.usernameInput

8. 依赖注入
   provide 选项允许我们指定我们想要提供给后代组件的数据/方法
   然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性

混入

分发vue中可复用的功能，包含任意组件选项

var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”，冲突时以组件数据优先
全局混入

自定义指令

全局注册

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

局部注册

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

component的directive