return break continue区别
return:直接返回函数,跳出整个函数体。
break:跳出整个循环,继续执行循环外代码。
continue:跳出本次循环,继续下一次迭代循环。
vue中的组件传值
vue中组件之间的传值情况主要有以下三种:
- 父组件向子组件传值。
- 子组件向父组件传值。
- 兄弟组件之间相互传值或者是两个没有关系的组件之间的传值。
父组件向子组件传值
这种情况是三种传值方案中最简单的, 通过在子组件中使用 props就可以实现
子组件向父组件传值
在子组件向父组件传值时需要使用 vue 中的 $on 和 $emit ,使用$emit 可以触发 $on 中监听的事件
兄弟组件之间的传值
兄弟组件之间传值有两种方式:
1. 将需要改变的值放到父组件中,子组件通过props来获取父组件的值
2. 通过eventbus 来实现兄弟组件之间的传值,其原理还是通过$on和$emit来时实现的,
区别是现在全局建立一个空的vue对象,然后将事件绑定到该空对象上,最后通过该空对象来触发$on监听的事件
vue中如何动态绑定Class和Style
1. 数据绑定
vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下:
<a v-bind:href="http://www.cnblogs.com/">博客园首页</a>
简写:
<a :href="http://www.cnblogs.com/">博客园首页</a>
2. 动态绑定class
vue 的分隔符默认是 {{ }}, 在分隔符里面的字符串会被认为是数据变量,
可以通过 class="{{ className }}" 方式设置class,
但是vue不推荐这种方式与 v-bind:class 的方式混用,
二者只能选其一。v-bind:class 虽然与class属性里绑定变量的方式不能共存,
却可以与原生的class特性共存, 一个DOM标签中允许同时出现原生class和v-bind:class。