发表于： 2020-07-05 19:16:55
1 2221
今日完成:
梳理知识,写列表页面
写列表组件
<template>
<div class="main">
<div class="left">
<left></left>
</div>
<div class="right">Welcome</div>
</div>
</template>
<script>
import sidebar from './mainleft/sidebar.vue'
export default {
name: 'main',
components: {
left: sidebar
}
}
script>
export default {
name: 'sidebar',
data(){return{
one:false,
two:false,
three:false,
aaa:[]}
},
methods:{
ones(){
this.one = !this.one
this.two = false
this.three = false
},
twos(){
this.two = !this.two
this.one = false
this.three = false
},
threes(){
this.three = !this.three
this.two = false
this.one = false
}
},
遇到问题-解决总结
1.
创建好组件,在路由中引入后
组件可以全白,
但页面添加<template>标签,就必须在里面添加<div>标签,否报错
html代码,全写在div中
2.
脚手架语法跟vue原始的语法不同,
如:
2.1.接口中data在脚手架就不能直接写成对象,而是要写成函数,回调出对象,
2.2.vue中的var vm = new app 这一套不能用
2.3.data中和method中对象名和函数名不能一致,因为都是挂载到vue实例中的
相当于 let a后有function a 后者会把前者替换掉,导致报错
2.4.在method中更改data中的数据,要加this
3.
函数return一次只能回调一个数据,多个考虑用数组,如果只是改变数据,不用拿出来用,就不需要回调return,
直接写怎么做就好
返回列表
评论