Vuejs的一些总结

1.Vuejs组件

 

这里注意一点，组件要先注册再使用，也就是说

 

 

若是反过来会报错，由于反过来表明先使用了组件的，可是组件却没注册。

 

webpack报错后，使用webpack --display-error-details能够排错

 

2.指令keep-alive

 

在看demo的时候看到在vue-router写着keep-alive，keep-alive的含义：
若是把切换出去的组件保留在内存中，能够保留它的状态或避免从新渲染。为此能够添加一个keep-alive指令

 

3.如何让css只在当前组件中起做用

在每个vue组件中均可以定义各自的css，js，若是但愿组件内写的css只对当前组件起做用，只须要在style中写入scoped，即：

 

 

 

 

4.vuejs循环插入图片

 

5.绑定value到Vue实例的一个动态属性上

 对于单选按钮，勾选框及选择框选项，v-model绑定的value一般是静态字符串（对于勾选框是逻辑值）：

可是有时候想绑定value到vue实例的一个动态属性上，这时能够用v-bind实现，而且这个属性的值能够不是字符串。例如绑定Checkbox的value到vue实例的一个动态属性：

 

 

 

这里绑定后，并非说就能够点击后由true,false的切换变为a,b的切换，由于这里定义的动态a，b是scope上的a,b，并不能直接显示出来，此时

 

因此此时须要在data中定义a,b，即：

 

6.片断实例

 

 

 

下面几种状况会让实例变成一个片段实例：

1. 模板包含多个顶级元素。
2. 模板只包含普通文本。
3. 模板只包含其它组件（其它组件多是一个片断实例）。
4. 模板只包含一个元素指令，如<partial> 或vue-router 的 <router-view>。
5. 模板根节点有一个流程控制指令，如v-if或v-for。

这些状况让实例有未知数量的顶级元素，它将把它的 DOM 内容看成片段。片段实例仍然会正确地渲染内容。不过，它没有一个根节点，它的$el 指向一个锚节点，即一个空的文本节点（在开发模式下是一个注释节点）。
可是更重要的是，组件元素上的非流程控制指令，非 prop 特性和过渡将被忽略，由于没有根元素供绑定：

 

 

片断实例也有用处，可是一般状况下组件有一个根节点比较好，它会保证组件元素上的指令和特性能正确的转换，同时性能也稍微好些。