Vue学习笔记第一部分

一、模板语法

1.{{}}插值表达式、v-text、v-html，这三个中的内容都可以写成js表达式。

二、条件渲染

1.v-if、v-else通常这两个一起用，而且v-else在v-if后面。

v-if、v-else中的input不设置key属性时，input会直接被复用，所以当不需要复用时请加上key属性。

三、列表渲染

1.v-for

给渲染项添加key属性可以提高性能，同时最好不要用index索引值作为key值，key在同级下最好是唯一值。

四、template模板占位符

template标签包裹内容，但不会被渲染，通常用于vue组件或用于包裹循环内容。

五、is属性

html5规范table下面是tbody，tbody下面是tr，不能直接使用定义为tr的组件，需要使用is属性，<tr is="组件名称"></tr>，同理，ul下面是li，select下面是option。

六、$refs

通过this.$refs.ref属性名可以获取到DOM节点。

<div class="todo" ref="todo"></div>
this.$refs.todo

七、父子组件传值

1.父组件通过属性的方式给子组件传值，子组件通过props获得父组件的传值，子组件不能直接改变父组件的传值，因为有单向数据流，可以用通过子组件的data拷贝一份父组件的传值来已达到目的。

2.属性前面不加冒号时，传递的是字符串；属性前面加上冒号后，传递的是js表达式。

八、给组件绑定原生事件

在定义子组件时绑定的事件是原生事件，在DOM中使用子组件时绑定的事件是自定义事件，当点击子组件时触发的是子组件的原生事件，在子组件的原生事件中使用this.$emit('自定义事件名称')或者把自定义事件改为@click.native="自定义事件名称"来触发原生事件。

九、非父子组件间的传值。

1.使用vuex

2.使用总线机制（发布订阅者模式、Bus、观察者模式）

通过在methods中写this.bus.$emit('方法名',要传递的值)向外传递数据，通过在mounted中写this.bus.$on('方法名',function(msg){})获取传递的数据。

十、非props特性

当父组件通过属性给子组件传值但子组件没有接收时，父组件定义的属性会被显示在子组件的属性上。

十一、slot插槽

在子组件中用<slot name="vm"></slot>标签来插入子组件DOM中传来的slot="vm"的内容或标签。slot标签中可以设置默认值，当DOM中没有传时，slot则使用默认值。

十二、作用域插槽

子组件在slot中使用 :属性名="值"的方式向DOM中slot-scope传值，slot-scope属性接收所有的数据。必须使用<template></template>标签并设置slot-scope。

当子组件循环，循环的标签名称由父组件来决定时，使用作用域插槽。