Vue
通信
vue.$emit vue.$ref vue.$set vue.$event vue.$http vue.$on vue.$nexttick- 父组件监听子组件的事件，$emit主要用于子组件向父组件传递数据.data作为参数传递
$emit('eventName',data)
父组件 @eventname = "handleEvent"
- $event表示的是你点击的元素，不是你事件绑定的元素，事件触发默认是冒泡机制 .event.target是绑定的元素 event.currentTarget是点击的元素
可以做个判断if(event.target===event.currentTarget)
-
父子组建传递有两种方法 一种是$emit 另一种是绑定function props.
-
eventBus.changeCity() eventBus.$on() 只能用在兄弟组件之间通信，不能用于父子组件通信。
插槽
slot是插槽 让组件可以包裹其他的元素.如果没有slot，在组件中插入其他元素不会渲染。所有没有指定name的放在slot里 指定的放在指定的里 没指定的放在没name的slot里 。在slot里写的内容属于default内容，如果插入了内容，default内容会被替换。如果没插入内容，default作为默认内容被渲染。
<component :is="seclectedComponent"></component>会选择渲染is绑定的组件 is切换是销毁组件，如果不想销毁 把component放在<keep-alive></keep-alive>里 有两个组件钩子可以用activated和deactivated有点像安卓里的页面切换钩子。- v-for会根据数组里面的内容个数创建组件个数
router
- 会阻止click事件 绑定其他事件都不会触发，除非用@click.native
- 给组件绑定事件用@click.native
array
- Array.splice(index,1) array.split
- slice截取字符或数组
有length的元素，返回一个新的数组或字符
'hello'.slice(3)截取索引3到最后的字符
[2,3,3,5,8].slice(1,3)截取返回1到3之间的元素
- splice用于插入、删除、替换数组的元素，返回含有被删除元素的数组
[1,2,2,5,7].slice(索引，个数，要添加或替换的元素)
[1,2,2,5,7].slice(2,1,'twitter','google')移除索引是2的一个元素，并从索引2开始插入新元素
[1,2,2,5,7].slice(2,2,'uber')移除2个元素，从2下标开始，并在这个空里插入新元素'uber'
把增删换改简化为对数组的处理
v-model
- v-model="current"跟value绑定，所以要注意value的设置 一般情况下text就等于value，但下面的current就绑定id 跟text无关
<seclet v-model="current">
<option v-for="list in lists" :value="list.id">{{list.text}}</option>
</select>
- onkeyup blur onfocus oninput onchange事件
label for要设置成和input id一样，可实现点label选中
string
- string.match()可以筛选跟输入内容匹配的结果没找到匹配就返回null,否则返回一个数组
arr.filter ((element)=>{return element.match(val)})
vue动画
fade-enter fade-enter-active就像元素的hover active状态一样，组件的状态。相当于钩子选择器 设计的思路是一样的 如果用tansition 不能写opacity:1;
.fade-enter{opacity:0;}
.fade-enter-active{transition:opacity 1s;}
.fade-leave{ }
.fade-leave-active{transition:opacity 1s; opacity:0;}
- 与组件卸载相关的动画 与组件卸载无关的动画
- enter-class enter-active-class (leave)可以直接应用class
- type="animation" 指定等哪个动画执行完销毁 一般是和transition一起存在时，一个动画事件长，一个短，可以规定等长动画执行完再销毁
- mode="out-in" 新旧组件都有动画，设定动画执行顺序。给组件设定一个key,key="info",确保能认出组件
select组件
- 通过设定一个
disabled selectedoption可以实现类似placeholder的功能
vue-router
<vue-link to="/" tag="li" active-class="active" exact> <a>Home</a></vue-link>
