new Vue({
  el: "#example-3",
  data: {
    checkedNames: []
  }
})
//Checked names: [ "Jack", "John", "Mike" ]

单选按钮

  
  One
  

  
  Two
  

  Picked: {{ picked }}

new Vue({
  el: "#example-4",
  data: {
    picked: ""
  }
})
//Picked: Two

选择框

  
    请选择
    A
    B
    C
  
  Selected: {{ selected }}

new Vue({
  el: "...",
  data: {
    selected: ""
  }
})
//Selected: B

为多选时则返回一个数组Selected: [ "A", "B" ]

复选框

单选按钮

选择框的选项

    
  123

.lazy，默认input事件触发，使用此修饰则改为change事件触发

.number将输入的值转换为数值

.trim过滤掉输入内容的首尾空白字符

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件是具有特殊功能的自定义元素。

所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

  

//注意确保在初始化根实例之前注册组件
// 注册
Vue.component("my-component", {
  template: "
A custom component!
"
})

var Child = {
  template: "
A custom component!
"
}

new Vue({
  // ...
  components: {
    //  将只在父组件模板中可用
    "my-component": Child
  }
})

webpack 的 vue cli3+

import Vue from "vue"
import upperFirst from "lodash/upperFirst"
import camelCase from "lodash/camelCase"

const requireComponent = require.context(
  // 其组件目录的相对路径
  "./components",
  // 是否查询其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /Base[A-Z]w+.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName)

  // 获取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 剥去文件名开头的 `"./` 和结尾的扩展名
      fileName.replace(/^./(.*).w+$/, "$1")
    )
  )

  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  )
})

注意

data必须是带return的函数

如果将组件用于像

、
、、 这样的元素里面，为了遵循规范，应该使用is：

以下类型模板无此限制：

Prop

父组件向子组件传递数据。

Vue.component("child", {
  // 声明 props
  props: ["message"],
  // 就像 data 一样，prop 也可以在模板中使用
  // 同样也可以在 vm 实例中通过 this.message 来使用
  template: "{{ message }}"
})

动态 Prop:

如果你想把一个对象的所有属性作为 prop 进行传递，可以使用不带任何参数的 v-bind

todo: {
  text: "Learn Vue",
  isComplete: false
}

//等价于

字面量语法 vs 动态语法

验证

为组件的 prop 指定验证规则，会在组件实例创建之前进行校验。如果传入的数据不符合要求，Vue 会发出警告。

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 可以是下面原生构造器：String、Number、Boolean、Function、Object、Array、Symbol

组件可以接收任意传入的特性，这些特性都会被添加到组件的根元素上，且会做合并处理。

自定义事件

子组件向父组件传递数据。

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

  
{{ total }}
  
  

Vue.component("button-counter", {
  template: "{{ counter }}",
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit("increment")
    }
  },
})

new Vue({
  el: "#counter-event-example",
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

父子双向通信

.sync

@update的语法糖

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

等价于

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

v-model(仅适用于表单输入组件)

v-on:input和v-bind:value的语法糖

// 通过 input 事件带出数值
this.$emit("input", Number(formattedValue))

等价于

this.$emit("input", Number(formattedValue))

非父子组件通信

简单场景bus.js

var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit("id-selected", 1)
// 在组件 B 创建的钩子中监听事件
bus.$on("id-selected", function (id) {
  // ...
})

注： 还可以使用$ref、$parent、$child进行通信，不过不推荐。

复杂的场景请使用vuex

插槽

为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发。
编译作用域： 父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。

单个插槽

除非子组件模板包含至少一个 插口，否则父组件的内容将会被丢弃。当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。

最初在 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

  
我是子组件的标题
  
    只有在没有要分发的内容时才会显示。
  




  
我是父组件的标题
  
    
这是一些初始内容
    
这是更多的初始内容
  




  
我是父组件的标题
  

    
我是子组件的标题
    
这是一些初始内容
    
这是更多的初始内容
  

具名插槽

元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。

仍然可以有一个匿名插槽，它是默认插槽，作为找不到匹配的内容片段的备用插槽。如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。

  

    
  
  

    
  
  




  
这里可能是一个页面标题

  
主要内容的一个段落。
  
另一个主要段落。

  
这里有一些联系信息




  

    
这里可能是一个页面标题
  
  

    
主要内容的一个段落。
    
另一个主要段落。
  
  

作用域插槽

和普通的插槽对比，能够传递数据。

  




  
  
    
  




  

    hello from parent
    hello from child
  

动态组件

通过使用保留的 元素，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件：

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

keep-alive

把切换出去的组件保留在内存中,保留其状态或避免重新渲染

注意事项

组件复用性，松耦合

谨慎使用ref

在大型应用中使用异步加载

PascalCase声明， kebab-case使用

为递归组件添加name

对低开销的静态组件使用 v-once

11.过渡和动画

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

单元素/组件的过渡

适用场景：条件渲染 (使用 v-if)、条件展示 (使用 v-show)、动态组件、组件根节点

  
    Toggle
  
  
    
hello
  

new Vue({
  el: "#demo",
  data: {
    show: true
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

过渡的类名

v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (与此同时 v-enter 被删除)，在 transition/animation 完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (与此同时 v-leave 被删除)，在 transition/animation 完成之后移除。

动画

动画在css中使用animation即可，其他和过渡类似。

自定义过渡的类名

我们可以通过以下特性来自定义过渡类名：
enter-class、enter-active-class、enter-to-class (2.1.8+)、leave-class、leave-active-class、leave-to-class (2.1.8+)

  
    Toggle render
  
  
    
hello
  

设定持续时间

...
...

JavaScript 钩子

// ...
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置，done 是必须的 
  // 与 CSS 结合时使用
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置，done 是必须的 
  // 与 CSS 结合时使用
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

初始渲染的过渡

可以通过 appear 特性设置节点在初始渲染的过渡

多个元素的过渡

当有相同标签名的元素切换时，建议给元素设置key。

过渡模式

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

out-in：当前元素先进行过渡，完成之后新元素过渡进入。

多个组件的过渡

多个组件的过渡使用动态组件

  


new Vue({
  el: "#transition-components-demo",
  data: {
    view: "v-a"
  },
  components: {
    "v-a": {
      template: "
Component A
"
    },
    "v-b": {
      template: "
Component B
"
    }
  }
})

列表过渡

使用 组件。

它会以一个真实元素呈现：默认为一个 。你也可以通过 tag 特性更换为其他元素。

内部元素 总是需要 提供唯一的 key 属性值

  Add
  Remove
  
    
      {{ item }}
    
  

组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。v-move 特性，它会在元素的改变定位的过程中应用。

    

      {{ item }}
    


.flip-list-move {
  transition: transform 1s;
}

也可以通过 move-class 属性手动设置

技巧

创建可复用过度组件，将 或者 作为根组件

动态过渡，通过动态绑定name实现

12.可复用性和组合 混合

混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

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

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

当组件和混合对象含有同名选项时，这些选项将以恰当的方式混合。比如，同名钩子函数将混合为一个数组，因此都将被调用。另外，混合对象的 钩子将在组件自身钩子 之前 调用 。

值为对象的选项，例如 methods, components 和 directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。

Vue.extend() 也使用同样的策略进行合并。

自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。

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

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

钩子函数参数

指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM 。

binding：一个对象，包含以下属性：

name：指令名，不包括 v- 前缀。

value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。

oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。

arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。

modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。

oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

渲染函数 & JSX

https://cn.vuejs.org/v2/guide...

渲染函数render createElement

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签字符串，组件选项对象，或者
  // 解析上述任何一种的一个 async 异步函数，必要参数。
  "div",

  // {Object}
  // 一个包含模板相关属性的数据对象
  // 这样，您可以在 template 中使用这些属性。可选参数。
  {
    // (详情见下面的数据对象)
  },

  // {String | Array}
  // 子节点 (VNodes)，由 `createElement()` 构建而成，
  // 或使用字符串来生成“文本节点”。可选参数。
  [
    "先写一些文字",
    createElement("h1", "一则头条"),
    createElement(MyComponent, {
      props: {
        someProp: "foobar"
      }
    })
  ]
)

数据对象:

{
  // 和`v-bind:class`一样的 API
  "class": {
    foo: true,
    bar: false
  },
  // 和`v-bind:style`一样的 API
  style: {
    color: "red",
    fontSize: "14px"
  },
  // 正常的 HTML 特性
  attrs: {
    id: "foo"
  },
  // 组件 props
  props: {
    myProp: "bar"
  },
  // DOM 属性
  domProps: {
    innerHTML: "baz"
  },
  // 事件监听器基于 `on`
  // 所以不再支持如 `v-on:keyup.enter` 修饰器
  // 需要手动匹配 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅对于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
  // 赋值，因为 Vue 已经自动为你进行了同步。
  directives: [
    {
      name: "my-custom-directive",
      value: "2",
      expression: "1 + 1",
      arg: "foo",
      modifiers: {
        bar: true
      }
    }
  ],
  // Scoped slots in the form of
  // { name: props => VNode | Array }
  scopedSlots: {
    default: props => createElement("span", props.text)
  },
  // 如果组件是其他组件的子组件，需为插槽指定名称
  slot: "name-of-slot",
  // 其他特殊顶层属性
  key: "myKey",
  ref: "myRef"
}

过滤器

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。

{{ message | capitalize }}

//定义局部过滤器
filters: {
  capitalize: function (value) {
    if (!value) return ""
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}
//定义全局过滤器
Vue.filter("capitalize", function (value) {
  if (!value) return ""
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

过滤器可以串联，依次执行，前面的输出作为后面一个的输入。

{{ message | filterA | filterB }}

过滤器可以接收参数（管道符前面的值作为第一个参数，括号内的第一个参数为第二个，依次类推）

{{ message | filterA("arg1", arg2) }}

13.Vue-Router 安装

直接用

阅读需要支付1元查看
支付并查看
<