Vue 第九天学习

1.实现发表评论功能

1.把文本框做双向数据绑定

v-model =”msg”

2.为发表按钮绑定一个事件

@click=”post_Comment”

3.点击发表评论时，做相关校验，【为空，非法，】，并且进行提示

post_Comment(){

if(this.msg.trim().length == 0){

扫描二维码关注公众号，回复： 2686749 查看本文章

Toast(‘评论数据不能为空’);

}

//真实情况是给服务器发数据

this.$http.post(‘wwww.bnaidu.com’+this.$route.params.id).then(function (result){

if(result.body.status == 0){

//封装到数据中

var cmt = {

content : this.msg;

}

this.msg.trim();

this.comment.unshift(msg);

}

})

}

4.通过vue-resouce 将数据发送给服务器，

5.发布数据ok以后，列表刷新，得到最新的评论【？？？？】。本质是查看最新的评论。

那么就是刷新列表。

2.图片分享功能实现。

1.改造路由连接 a --->>>> router-link, 然后把规则写好。

<router-link to="/home/photolist">

</router-link>

2.新建组件，

PhotoList.vue

3. 到路由匹配规则中进行路由匹配

import PhotoList from './components/photos/PhotoList.vue'

{path :'/home/photolist',component :PhotoList},

4.内容实现。到MUI 中复制内容

推荐

</a>

热点

</a>

北京

</a>

社会

</a>

娱乐

</a>

娱乐

</a>

</div>

5.把它的mui-fullscreen去掉，

6.滑动条无法正常滑动，需要JS 初始化。

6.1 导入MUI.js

6.2 然后使用方法初始化

//1.倒入MUI的js 文件

import mui from '../../lib/mui/js/mui.min.js'

//2.初始化滑动控件

mui('.mui-scroll-wrapper').scroll({

deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006

});

【移除严格模式---视频404.项目-图片列表顶部导航条制作2-解决初始化问题

1. 装包

2. ,babelrc 中配置（等方式）

】

【bug,第一次进来以后，滑动条无效，需要刷新才起作用

原因分析，初始化的不对，

解决方法，放到生命周期的钩子函数中，

created(){

//第二个生命周期函数，代表数据和方法以及创建好了，

mounted (){ //代表组件已经创建好了，这个是最后的，说明DOM结构已经渲染好了，

//当组件DOM结构已经渲染好，并放到页面后，执行这个钩子函数，

// 如果要操作元素了，最好在mounted函数中，因为这个时候所有的dom元素都创建好了

//2.初始化滑动控件

mui('.mui-scroll-wrapper').scroll({

deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006

});

】

3.悬案图片分享中的数据，

3.1定义方法去拿数据

getAllCategroy{

}

3.2 在data 中定义数据

cats :[],

3.2 然后想created 中挂载方法和数据。

created (){

}

【

滑动条高亮的选择。

</a>

】

4.实现图片列表区域，

1.导入组件，效果参考mint-ui的懒加载

在main.js 中导入 import {Lazyload} from ‘mint-ui’;

Vue.use(Lazyload) ;

2.页面实现

<ul>

</li>

</ul>

3.渲染图片列表数据.根据导航ID 去获取相关的内容。因此定义相关方法，然后在不同的地方调用，传递不同的值即可

getPhotoListByCateId(cateID){

//特别注意，这里要根据图片列表的id 分别获取相关数据

this.$http.get('xxx/'+cateID).then(result =>{

if(result.body.result.status == 0){

this.list = result.body.message;

}

}); //怎么获取实时的id？？？..n哪里调用它？？

//答：调用的时候就可以传递id 了

//,页面刚进入，默认初始化传递0 ，

// //刚进入，价值默认页面

//this.getPhotoListByCateId(0);

// 然后点击各自导航的时候传递值，

<a :class="['mui-control-item',item.id == 0 ? 'mui-active' :'']" v-for="item in cates" :key="item.id"

@click="getPhotoListByCateId(item.id)">

</a>

5.【这里面跳过两个视频】

6.实现商品购买功能

1.前提难点分析：1.布局不会，2.我猜是三个div 分为三块。

2.改造路由连接

3.组件实现

4. 路由匹配规则的实现，

【尝试学习写 CSS 样式】

<h1 class="title">VIVO手机</h1>

</p>

</p>

</div>

<h1 class="title">VIVO手机</h1>

</p>

</p>

</div>

<h1 class="title">VIVO手机</h1>

</p>

</p>

</div>

</template>

export default {

}

</script>

.goods-list{

display: flex;

flex-wrap: wrap;

padding: 7px;

justify-content: space-between;

}

.good-item{

width: 49%;

border:1px solid #ccc;

box-shadow: 0 0 8 #ccc;

margin:3px 0px;

img{

width: 100%;

height: 150px;

}

.info{

padding: 5px;

}

.title{

font-size: 14px;

}

.price{

display: flex;

justify-content: space-between;

.now{

color: red;

}

.sell{

display: flex;

justify-content: space-between;

}

</style>

Vue 第九天学习

猜你喜欢