VUE积累总结

1、启动项目npm i=>npm start；

2、基本内容

data:页面初始数据；

mounted：html加载完成后执行；

methods：事件方法执行；

components：引用的组件（需要import进来）；

props：父组件传递数据给子组件；

积累

3、mouted 初始化执行方法

this.$http.get('api/getBanner').then(res => {
    if (res.success) {
        this.bannerList = res.data;
        this.$nextTick(() => {
            setTimeout(() => {
                this.height ='50px';
            }, 200);
        });
    }
});

4、绑定点击事件，异步方法，在methods内

@click="followTopic(id)"

async unfollowTopic(id) {
    const res = await this.$http.post('/api/followTopic', {
        id: id
    });
    if (res.success) {
        console.log('成功');
    } else {
        alert(res.message);
    }
}

5、列表页面跳详情页传值方法

（1）、路由配置，新增/修改参数

path: '/detail/:type/:oid'

（2）、列表

goDetail(id) {
    this.$router.push('/postDetail/' + 1 + '/' + id);
},

<div class="topic-box" @click="!topicSelector && $router.push(`/topicDetail/${item.id}`)">

（3）、详情页获取id

this.$route.params.id

6、子级组件更新数据，更新父级组件

（1）、子组件：传值id，type给父组件；

this.$emit('getForumInfo', {
    id: id,
    type: type
});

（2）、父组件：获取值，执行方法

<PostList :list="postList" @updateView="updateView"></PostList>

async updateView(id) {
    this.$http.get('bbs/getIndexThreads/'+this.postid+'/1/20/'+this.sort).then(res => {
        if (res.success) {
            this.postList = res.data;
        }
    });
},

7、控制class

:class="item.is_member=='1' && 'is_vip'"

:class="item.is_member == '1' ? 'is_vip' : 'not_vip'"

8、成功/失败之后弹出提示消息

this.$layer.msg('关注成功', { icon: 1 });
this.$layer.msg(res.message, {icon: 5});

9、父级组件调用接口获取数据，将数据传给子级组件渲染页面

（1）、父级组件

<Evaluation :postId="'1'" :list="evaluationList"></Evaluation>

postId 和 list 是变量名
1 和 evaluationList 是值

（2）、子级组件

props: {
	postId: {
        type: String,
		default: ''
	},
	list: {
		type: Array,
		default: []
	}
},

获得postId 和 list 然后渲染页面

10、获取dom，使用ref

循环的一个列表

<div class="reply-item reply-thread" ref="replyThread"></div>

脚本修改其中一个div的样式

this.$refs.replyThread[index].style.display === "none";

11、在拿到接口数据后，设定定时事件写法

if (res.success) {
	this.$layer.msg(res.message, { icon: 1 });
	this.$nextTick(() => {
		setTimeout(() => {
			this.$router.push('/tribune/');
		}, 2000);
	});
}

12、监控input值的变化，执行方法，使用v-on:input="changeKey"

<input class="layui-input" type="text" placeholder="" v-model="topicKeyWord" v-on:input="changeKey"/>

13、input失去焦点事件

<input type="number" class="num" value="1" @blur.prevent="changeCount()">	

14、computed用法（暂未使用）

15、watch用法（暂未使用）

16、cookie使用

import VueCookie from 'vue-cookie';

this.$cookie.set('uid', res.uid);

VueCookie.get('uid')

17、路由，获取某个页面的地址

let routeUrl = this.$router.resolve({
    path: `/postDetail/${threadType}/${tid}`
});
console.log(routeUrl.href);

18、返回上一页

@click="$router.back(-1)"