update

21-Vue基础/01-03.Vue的系统指令(二).md

@@ -708,7 +708,7 @@ key的类型只能是：string/number，而且要通过 v-bind 来指定。
 
 
 
-## v-if：设置元素的显示和隐藏
+## v-if：设置元素的显示和隐藏（添加/删除DOM元素）
 
 **作用**：根据表达式的值的真假条件，来决定是否渲染元素，如果为false则不渲染（达到隐藏元素的目的），如果为true则渲染。
 
@@ -755,7 +755,7 @@ key的类型只能是：string/number，而且要通过 v-bind 来指定。
 ![](http://img.smyhvae.com/20180329_1920.gif)
 
 
-## v-show：设置元素的显示和隐藏
+## v-show：设置元素的显示和隐藏（在元素上添加/移除`style="display:none"`属性）
 
 **作用**：根据表达式的真假条件，来切换元素的 display 属性。如果为false，则在元素上添加 `display:none`属性；否则移除`display:none`属性。
 
@@ -802,7 +802,34 @@ key的类型只能是：string/number，而且要通过 v-bind 来指定。
 
 ![](http://img.smyhvae.com/20180329_2040.gif)
 
-**v-if和v-show的区别**：
+### v-if和v-show的区别
+
+`v-if`和`v-show`都能够实现对一个元素的隐藏和显示操作。
+
+区别：
+
+- v-if：每次都会重新添加/删除DOM元素
+
+- v-show：每次不会重新进行DOM的添加/删除操作，只是在这个元素上添加/移除`style="display:none"`属性，表示节点的显示和隐藏。
+
+优缺点：
+
+- v-if：有较高的切换性能消耗。这个很好理解，毕竟每次都要进行dom的添加／删除操作。
+
+- v-show：**有较高的初始渲染消耗**。也就是说，即使一开始`v-show="false"`，该节点也会被创建，只是隐藏起来了。而`v-if="false"`的节点，根本就不会被创建。
+
+**总结**：
+
+- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
+
+- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if
+
+
+
+
+
+
+
+
 
-`v-if`和`v-show`都能够实现对一个元素的隐藏和显示操作。但是`v-if`表示添加/删除DOM元素；而`v-show`是在这个元素上添加/移除`style="display:none"`属性，表示节点的显示和隐藏。
 

21-Vue基础/Vue开发积累.md

@@ -0,0 +1,47 @@
+
+
+
+### 动态添加对象的属性
+
+- Vue中，动态新增对象的属性时，不能直接添加。正确的做法是：Vue.set(obj,key,value)。参考链接：[#](https://blog.csdn.net/tian361zyc/article/details/72909187)
+
+
+
+
+### 判断一个checkbox是否被选中
+
+```html
+<!-- v-model里的内容是变量，变量里的值可能是 true 后者 false -->
+<input type="checkbox" v-model="isSelected">
+
+<!-- 选中时，值为 true。未选中时，值为 false -->
+<span>{{isSelected}}</span>
+
+
+<!-- 选中时，显示文字。未选中时，隐藏文字 -->
+<span v-if="isSelected">haha</span>
+
+```
+
+
+
+### 多个checkbox的全选和反选
+
+现在有多个checkbox的item在一个数组中，另外还有一个“全选”的checkbox按钮。
+
+**点击全选按钮，让子item全部选中**：
+
+采用 watch 监听全选按钮，然后改变子item。
+
+**当子item全部被选中时，触发全选按钮**：
+
+采用 computed 计算子item 的状态，存放到变量 allChecked 中，然后用 watch 监听 allChecked 的值。
+
+参考链接：
+
+- [问Vue.js 如何在 data 里含数组的情况下，监听数组内指定属性的变化？](https://segmentfault.com/q/1010000014514160/a-1020000014514452)
+
+
+
+
+