阅读vue 文档学习笔记

v2.6

模板语法

可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：
...
同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：
...
对动态参数的值的约束
动态参数预期会求出一个字符串，异常情况下值为 null。
这个特殊的 null 值可以被显性地用于移除绑定。
任何其它非字符串类型的值都将会触发一个警告。

计算属性缓存vs方法

计算属性基于它们的响应式依赖进行缓存，
这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {
  now: function () {
    return Date.now()
  }
}

计算属性的setter

computed:{
get:function(){
 return this.firstName+' '+this.lastName
},
set:function(newValue){
    var names=newValue.split(' ')
    this.firstName=names[0]
    this.lastName=names[names.length-1]
}
}

侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。
这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

class与style绑定

绑定class
对象绑定

和如下 data：

data: {
  isActive: true,
  hasError: false
}

数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

在数组中使用对象

绑定内联样式

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。
CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

data: {
  activeColor: 'red',
  fontSize: 30
}

数组语法数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

Vue.component('blog-post',{
    props:['title'],
    template:`
{{title}}
`
})

全局注册

Vue.component('my-component-name', {
  // ... 选项 ...
})

局部注册

在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

然后在 components 选项中定义你想要使用的组件：

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

基础组件的自动化全局注册

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/cameCase'
const requireComponent=require.context(
   //其组件目录的相对路径
  './components',
  //是否查询其子目录
  false,
  //匹配基础组件的文件名的正则表达式
  /Base[A-Z]\w+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName=>{
    //获取组件配置
    const componentConfig=requireComponent(fileName)
    //获取组件的PascalCase命名
    const componentName=upperFirst(
        cmaeCase(
            fileName.split('/').pop().replace(/\.\w+$/,'')
        )
    )
//全局注册
Vue.component(componentName,
    //如果这个组件选项是通过'export default'导出
    //那么就会优先使用'.default'
    //否则回退到使用模块的根
    componentConfig.default||componnentConfig
)
})

传入一个对象的所有属性
如果你想要将一个对象的所有属性都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。例如，对于一个给定的对象 post：

post: {
  id: 1,
  title: 'My Journey with Vue'
}

下面的模板：

等价于：

单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

这里有两种常见的试图改变一个 prop 的情形：

这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。

propF:{
validator:function(value){
 return ['success','danger'].indexOf(value)!==-1
}
}

将原生事件绑定到组件

在有的时候这是很有用的，不过在你尝试监听一个类似 的非常特定的元素时，这并不是个好主意。
比如上述 组件可能做了如下重构，所以根元素实际上是一个 元素：

Vue.component('base-input',{
    inheritAttrs:false,
    props:['label','value'],
    computed:{
        inputListeners:function(){
          var vm=this
          return Object.assign({},
            this.$listeners,
            //然后我们添加自定义监听器
            //或覆写一些监听器的行为
            {
                //这里确保组件配合'v-model'的工作
                input:function(event){
                    vm.$emit('input',event.target.value)
                }
            }
          )
        }
    },
    template:`
      
        {{label}}
        
      
    `
})

具名参数

一个不带 name 的 出口会带有隐含的名字“default”。

在向具名插槽提供内容的时候，我们可以在一个