Vue的template里只能有一个根元素！
1. 技巧
通过字符串获取到值的地址，然后改那个值（中级前端）
let regex = /\[(\d+)\]/g
key = key.replace(regex, (match, number)=> `.${number}`)
let keys = key.split('.')
for(let i=0;i<keys.length;i++){
if(i === keys.length -1){
result[keys[i]] = value
}else{
result = result[keys[i]]
}
//result = this.resume
//keys = ['skills', '0', 'name']
//i=0 result === result['skills'] === this.resume.skills
//i=1 result === result['0'] === this.resume.skills.0
//i=2 result === result['name'] === this.resume.skills.0.name
//result === this.resume['skills']['0']['name']
}
2. 组件通信（面试）
- 父子通信
-
子传给父$emit
组件不能控制自己出现或隐藏，必须由它的父亲控制，所以组件要通过事件（$emit）通知它的父亲。
事件在子组件的template里直接写$emit
但在methods里，需要写<button @click="$emit('close')">关闭</button>this.$emit，如下
在组件里写好后，在html文件里监听methods:{ onClick(){ this.$emit('close') } }<xxx @close="visible = false"></xxx> -
父传给子 porps
<share :sharelink="shareLink"></share>将app.js里的data{shareLink: ...}，传给子组件里的props:['sharelink']
-
爷孙通信
只能用两个父子通信，将孙子的组件写在儿子组件的template里，然后孙子$emit('close')传给儿子，儿子@close="$emit('close')"传给爷爷
3. 兄弟通信
let Hub = new Vue(); //创建事件中心
//组件1触发：
<div @click="eve"></div>
methods: {
eve() {
Hub.$emit('change','hehe'); //Hub触发事件
}
}
//组件2接收:
<div></div>
created() {
Hub.$on('change', () => { //Hub接收事件
this.msg = 'hehe';
});
}
2. 大小写
子组件的props里的属性不能是大写！因为html里的属性只能用小写，如下
<xxx :playresume="playResume"></xxx>
所以组件里也只能小写
props: ['playresume']
3. 组件化
把代码里每一大块都写成一个vue组件，像...（举例），组件需要的参数通过父组件传进去(props)，组件需要触发的事件，通过$emit传给父组件，父组件监听并完成事件
4. 前端路由
路由就是根据不同的url路径展示不容的ui，可以用jquery实现，也可以用vue，这样可以实现单页面应用
- vue-router
若能控制后端代码就能用history模式，点击后改变url。
若不能控制后端，则不要用history，只改变锚点 - 写了路由之后就由单页面变成还是单页面但是加路由
<html>
<div class="page" id="root">
<router-view></router-view>
</div>
</html>
<script src=app.js></script>
<script src=login.js></script>
<script src=signUp.js></script>
<script src=root.js>
const routes = [
{ path: '/', component: window.App },
{ path: '/login', component: window.Login},
{ path: '/signUp', component: window.SignUp},
]
const router = new VueRouter({
routes: routes // (缩写) 相当于 routes: routes
})
const root = new Vue({
router: router,
data(){
return{
currentUser: {}
}
}
}).$mount('#root')
</script>
网友评论