兄弟组件传值
兄弟组件传值子组件1中把值传到父组件,父组件获取值传入子组件2
父组件：
123456789101112131415<子组件1 @方法名x="方法名y"></子组件1><子组件2 :值名称x="值x"></子组件2 >data() { return { 值x: '' }},methods: { 方法名y(值) { this.值x = 值 }}
子组件1：
1this.$emit('方法名x', 值) // 传出值
子组件2：
123456props: { 值名称x: { // 接收父组件传入值 type: String, default: '' }}
自定义事件
自定义事件API
在组件标签v-on绑定的事件是自定义事件123456789101112131415161718<div id="root"> <child @click="handleClick"></child> <!--这里click是自定义事件--></div><script type="text/javascript"> Vue.component('child', { template: '<button>Child</button>', }) var vm = new Vue({ el: '#root' methods: { handleClick() { alert('click&# ...
Prop 验证 与 非 Prop 的 Attribute
Prop 验证 与 非 Prop 的 AttributeProp 验证API
子组件对父组件传递来的参数进行校验
123456789101112131415161718192021222324252627282930313233Vue.component('my-component', { props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: { type: Number, default: 100 }, // 带有默认值的对象 propE: { type: Object, / ...
子组件派发事件和值给父组件
子组件派发事件和值给父组件API
子组件通过$emit派发事件和值给父组件（值可以有多个）
1this.$emit('fnX', value)
父组件通过v-on绑定子组件派发的事件，并触发一个新的事件，新的事件内可以接收传来的值
12345678<ComponentName @fnX="fnY"></ComponentName>methods: { fnY(value) { console.log(value) }}
父子组件间传递数据 demo
See the Pen
mdJVqgg by xugaoyi (@xugaoyi)
on CodePen.
父组件给子组件传值
父组件给子组件传值父组件中，通过给子组件标签v-bind绑定属性的方式传入值
1<ComponentName v-bind:name="value"></ComponentName>
如果不使用v-bind传入的值为字符串，使用v-bind绑定传入的值为表达式。
子组件中，通过props对象接收值
123456props: { name: { // 接收父组件传入值 type: String || ..., default: '' }}
单向数据流所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
子组件不能直接修改父组件传入的值
这里有两种常见的试图改变一个 prop 的情形：
这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情 ...
案例演示
案例演示本节内容根据官方文档的 教程 编写。
在线demo
案例代码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175import React from 'react'import ReactDO ...
列表渲染之数组、对象更新检测
列表渲染之数组、对象更新检测数组更新检测API 对象更新检测API
数组更新检测变异方法 (mutation method)Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()末尾添加
pop()末尾删除
shift() 首位删除
unshift() 首位添加
splice() 拼合
sort() 排序
reverse() 反转
数组实例方法
替换数组变异方法，顾名思义，会改变调用了这些方法的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如 filter()、concat() 和 slice() 。它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：
123example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/)})
你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此 ...
v-if vs v-show
v-if vs v-showAPI
v-if 根据渲染条件决定是否把元素渲染到DOM页面，而v-show不管渲染条件是什么，都会把元素渲染到DOM页面，只是简单的切换CSS的显示隐藏。
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
计算属性 vs 方法 vs 侦听属性
计算属性 vs 方法 vs 侦听属性API
如果一个功能同时可以使用计算属性(computed)、方法(methods)、侦听属性(watch)来实现的时候推荐使用计算属性。
计算属性
方法
侦听属性
计算属性是基于它们的响应式依赖进行缓存的
每当触发重新渲染时，调用方法将总会再次执行函数
有缓存，但相比计算属性，实现起来要复杂很多。
生命周期
实例生命周期钩子实例生命周期钩子API
简单理解，生命周期钩子函数就是vue实例在某一个时间点会自动执行的函数。
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364<div id="app">{{msg}}</div><script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script><script> var vm = new Vue({ el: '#app', data: { msg: 'Vue的生命周期' }, beforeCreate: function() { con ...
