Vue项目--(一)
项目总结
项目描述
使用技术
1.ui框架:vant--基于less
2.框架:vue
总结
1.做项目出现卡顿的地方
2.注意点
3.学到知识
4.模块化
做项目出现卡顿的地方
1. app.vue里面的东西运行不出来
解决办法:配置路由,直接配置到view里面
猜想原因:app.vue是默认加载
import Home from '../views/Home'
//配置路径
const routes = [
{
path: '/home',
name: 'Home',
component: Home
}
]
2.在style中没有写 lang="less"
<style scoped lang="less">
</style>
需要在app.vue中加上
标签
3.main.js中需要引入api
import './api'
4.插槽 slot 的使用--newslist里面的页面
slot在组件双标签里面使用
组件的预设位置已经决定好了,通过插槽来改变元素的标签和内容
<van-card
<!-- :num决定了内容的位置-->
:num="news.add_time"
:price="news.click"
:title="news.title"
:thumb="news.img_url"
>
<!--slot插槽决定了内容,可以添加标签,
通过插槽可以已经设置好的东西转化为你想要的内容,
比如获取了图片路径,就可以在img的src属性中写入图片路径-->
<!--slot="你想要的改变的东西",van-card组件里面num不需要x号,price不需要￥，通过插槽来改变-->
<div slot="num">
{{news.add_time}}
</div>
<div slot="price">
{{news.price}}
</div>
</van-card>
5.通过父页面id，子页面渲染不同的内容(页面传值)--newslist传给newsinfo
在router文件夹下面写入
{
path: '/home/newsinfo/:id',
component: () => import('../views/Home/News/NewsInfo/index')
}
父页面methods写
//点击事件
getNewsInfoById (id) {
this.$router.push(`/home/newsinfo/${id}`)
}
子页面接收id写
data(){
return{
id:''
}
}
created () {
this.id = this.$route.params.id
}
6.子页面根据id获取数据
api里面写
const getNewsInfoById = params => {
return axios.get(`/api/getnew/${params}`)
}
子页面script标签里面写
<script>
export default {
data () {
return {
id: '',
newsInfo: []
}
},
created () {
this.id = this.$route.params.id
this.getNewsInfoById()
},
methods: {
async getNewsInfoById () {
try {
const { data: { message } } = await this.$http.getNewsInfoById(this.id)
this.newsInfo = message
} catch (e) {
this.$Toast(e.message)
}
}
}
}
</script>
7.组件通信
父传子
//父组件
//template里面,传id关键的一步
<Comment :id="id"></Comment>
//export defult里面
import Comment from '@/components/Comment/index'
created () {
this.id = this.$route.params.id
}
components: {
Comment
}
//子组件
//注意:props不是data的return里面,而是与data函数同级,引用时this.id即可
props:['id']
7.加载更多优化
拼接了上一页数据
如果没有数据不会一直请求加载
vue里面写
<template>
<div class="comment">
<textarea v-model="text"></textarea>
<van-button type="danger" @click="postComment()">提交评论</van-button>
<van-button type="danger" @click="getMore()">加载更多</van-button>
<div v-for = "(news,index) in news" :key="index">{{news.add_time}}--------{{news.content}}</div>
</div>
</template>
script里面写
<script>
export default {
props: ['id'],
data () {
return {
text: '',
page: 1,
pageSize: 10,
news: [],
hasMore: false
}
},
created () {
this.getComment()
},
methods: {
async getComment () {
if (this.hasMore !== false) return
this.page++
const { data: { message, count } } = await this.$http.getComments({ id: this.id, page: this.page, pageSize: this.pageSize })
// 把上一页的数据和重新加载的数据拼接
this.news = this.news.concat(message)
// 节流,防止没有数据还在请求
this.hasMore = this.page * this.pageSize > count
console.log(this.hasMore)
},
async postComment () {
try {
const { data: { message } } = await this.$http.postComments({ id: this.id, content: this.text })
this.$Toast(message)
this.news.push()
} catch (e) {
this.$Toast(e.message)
}
},
getMore () {
this.getComment()
}
}
}
</script>
注意点
1.新建项目改动地方
(1)router文件
import Home from '../views/Home'
//配置路径
const routes = [
{
path: '/home',
name: 'Home',
component: Home
}
]
//优化
const routes = [{
path:'/search',
component: ()=>import('../views/Search')
}
]
(2)view新建模块
- 以文件为单位,新建模块
2.报错
"path" is required in a route configuration.
出现问题: router文件{}里面没有path和component
解决方法: 在{}里面添加path,或者删除{}
学到知识
1.data必须使用函数,而不是对象
vue为了保证每个实例上的data数据的独立性，规定了必须使用函数，而不是对象。
因为使用对象的话，每个实例（组件）上使用的 data 数据是相互影响的，这当然就不是我们想要的了。
对象是对于内存地址的引用，直接定义个对象的话组件之间都会使用这个对象，这样会造成组件之间数据相互影响。
模块化
1.Toast组件化
在plugins文件夹里的vant.js加入
Vue.prototype.$Toast=Toast
在vue中引用
async getLunbo() {
try {
const {data: {message}} = await this.$http.getLunbo();
this.lunbolist = message
} catch (error) {
this.$Toast(error.message)
}
}
2.api模块化
安装axios
cnpm i axios
在src新建文件夹api,在文件下新建index.js,在index.js里面写入代码
//引入vue,axios模块
import Vue from 'vue'
import axios from 'axios'
//设置基础路径
axios.defaults.baseURL="http://203.195.181.208:8888"
//获取api中的数据
//1.get根据id分页请求
const getComments = ({artid, page, pageSize = 3}) => {
return axios.get(`/api/getcomments/${artid}?pageindex=${page}&limit=${pageSize}`)
}
//2.post请求 根据id添加评论信息
const postComment = ({id, content}) => {
return axios.post('/api/postcomment/' + id, {content})
}
在main.js中引入
import './api'
在vue中使用api接口数据
//message是接口显示数据的对象
methods:{
async getCarousel(){
try{
const {data:{message}}=await this.$http.getCarousel();
console.log(message);
this.carouselList=message;
}catch(error){
this.$Toast(error.message)
}
}
}
改动较大的地方
api router
总是忘记v-for
理清页面传值和组件传值
浙公网安备 33010602011771号