阅读vue 文档学习笔记

v2.6

模板语法

可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：
<a v-bind:[attributeName]="url"> ... </a>
同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：
<a v-on:[eventName]="doSomething"> ... </a>
对动态参数的值的约束
动态参数预期会求出一个字符串，异常情况下值为 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
对象绑定

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

和如下 data：

data: {
  isActive: true,
  hasError: false
}

数组语法

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

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

在数组中使用对象
<div v-bind:class="[{ active: isActive }, errorClass]"></div>

绑定内联样式

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

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}

数组语法数组语法

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

<div v-bind:style="[baseStyles, overridingStyles]"></div>

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

全局注册

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'
}

下面的模板：

<blog-post v-bind="post"></blog-post>
等价于：

<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

单向数据流

所有的 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
}
}

将原生事件绑定到组件

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

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>
        {{label}}
        <input
            v-bind="$attrs"
            v-bind:value="value"
            v-on="inputListeners"
        >
      </label>
    `
})

具名参数

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

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

在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。

过渡js钩子

<transition v-on:enter="enter"></transition>

状态过滤-把过渡放组件里
Vue.component('animated-integer',{
template:'<span>{{tweeningValue}}</span>',
props:{
    value:{
    }
},
data:function(){
},
watch:{
},
mouted:function(){
},
methods:{

}

})
<div id="example">
 <animated-integer></animated-integer>
</div>
new Vue({
 el:'#example',
 data:{
  firstnumber:20,
  lastnumber:40
 },
 computed:{
    result:function(){
    
    }
 }

})

混入
var myMixin={
 created:function(){
  
 }
}
var Component=Vue.extend({
 mixins:[myMixin]
})
var component=new Component()

选项合并
1 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
2 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用

全局混入

Vue.mixin({
  created:function(){
    var myOption=this.$options.myOption
    if(myOption){
        console.log(myOption)
    }
  }
})

new Vue({
 myOption:'HELLO'
})

自定义选项合并策略

//函数
Vue.config.optionMergeStrategies.myOption=function(toVal,fromVal){
//返回合并后的值
}
//或者使用与methods相同的合并策略

var strategies=Vue.config.optionMergeStrategies
strategies.myOption=strategies.methods


const merge=Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStragies.vux=function(toVal,fromVal){
 if(!toVal) return fromVal
 if(!fromVal) return toVal
 return {
    getters:merge(toVal.getters,fromVal.getters),
    state:merge(toVal.state,fromVal.state),
    actions:merge(toVal.actions,fromVal.actions)
 }
}

自定义指令
全局指令

Vue.directive('focus',{
    //当被绑定元素插入到dom时
    inserted:function(el){
        //聚焦元素
        el.focus()
    }
})

注册局部指令，组件中也接受一个directives的选项

directives:{
    focus:{
        inserted:function(el){
            el.focus()
        }
    }
}
<input v-focus>

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

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

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

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

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

函数简写

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写:

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

渲染函数

createElement 参数

createElement(
  // {String | Object | Function}
  // 一个 HTML 标签名、组件选项对象，或者
  // resolve 了上述任何一种的一个 async 函数。必填项。
    'div',
    //{object} 一个与模板中属性对应的数据对象
    {
    
    },
    //子级虚拟节点（Vnode）,由createElement(),构建而成
    //也可以使用字符串来生成‘文本虚拟节点’，可选
    [
     'some word',
     createElment(MyComponent,{
        props:{
            someProp:'foobar'
        }
     })
    ]

)

示例

var getChildrenTextContext=function(children){
    return children.map(function(node){
        return node.children?getChildrenTextContext(node.children):
        node.text
    }).join('')
}

Vue.component('anchored-heading',{
    render:function(createElement){
        var headingId=getChildrenTextContext(this.$slots.default)
        .toLowerCase()
        .replace(/\W+/g,'-')
        .replace(/(^-|-$)/,'')
        
        return createElement(
            'h'+this.level,
            [
              createElement('a',{
                attrs:{
                    name:headingId,
                    href:'#'+headingId
                }
              },this.$slots.default)
            ]
        )
    },
    props:{
        level:{
            type:Number,
            required:true
        }
    }
    
})
//v-model
props:['value'],
render:function(createElement){
 var self=this
 return createElement('input',{
    domProps:{
        value:self.value
    },
    on:{
        input:function(event){
            self.$emit('input',event.target.value)
        }
    }
 })
}

函数式组件

之前创建的锚点标题组件是比较简单，没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法。实际上，它只是一个接受一些 prop 的函数。
在这样的场景下，我们可以将组件标记为 functional，这意味它无状态 (没有响应式数据)，也没有实例 (没有 this 上下文)。

Vue.component('my-component',{
 functional:true,
 props:{
    
 },
 render:function(createElement,content){
 
 }
})

插件

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

添加全局方法或者属性。如: vue-custom-element

添加全局资源：指令/过滤器/过渡等。如 vue-touch

通过全局混入来添加一些组件选项。如 vue-router

添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

MyPlugin.install=function(Vue,options){
    //全局方法或属性
    Vue.myGlobalMethod=function(){
    
    }
    //添加全局资源
    Vue.directive('my-directive',{
        bind(el,binding,vnode,oldVnode){
        
        }
    })
    //注入组件选项
    Vue.mixin({
        created:function(){
        
        }
        
    })
    //添加实例方法
    Vue.prototype.$myMethod=function(methodOptions){
    
    }
}