Vue 第九天学习

1.实现发表评论功能

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

v-model =”msg”

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

@click=”post_Comment”

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

post_Comment(){

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

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 第九天学习相关推荐

VUE源码学习第一篇--前言
一.目的前端技术的发展,现在以vue,react,angular为代表的MVVM模式以成为主流,这三个框架大有三分天下之势.react和angular有facebook与谷歌背书,而vue是以一己之 ...
# 2017-2018-1 20155224 《信息安全系统设计基础》第九周学习总结
2017-2018-1 20155224 <信息安全系统设计基础>第九周学习总结教材学习内容总结存储器随机访问存储器(RAM): 静态RAM:用来作为高速缓存存储器,每个位存储在一个 ...
2018-2019-1 20165206 《信息安全系统设计基础》第九周学习总结
- 2018-2019-1 20165206 <信息安全系统设计基础>第九周学习总结 - 教材学习内容总结计算机系统的主存被组织成一个由M个连续的字节大小的单元组成的数组.每个字节都有一 ...
20172304 《程序设计与数据结构》第九周学习总结
20172304 <程序设计与数据结构>第九周学习总结教材学习内容总结本章是第十五章,主要介绍了图的概念. 首先我来介绍一下图的基本结构. 从逻辑上讲,图是由边和结点组成的,在我的理解 ...
20155227 2016-2017-2 《Java程序设计》第九周学习总结
20155227 2016-2017-2 <Java程序设计>第九周学习总结教材学习内容总结 JDBC简介 JDBC全名Java DataBase Connectivity,是java联 ...
20162329 2017-2018-1 《程序设计与数据结构》第九周学习总结
第九周学习总结一.学习目标二叉查找树的理解二叉查找树的实现平衡二叉查找树哈夫曼树的实现堆的理解堆的实现二.学习内容 1.二叉查找树思路: 二叉查找树与一般二叉树的区别在于,二叉查找树 ...
20162316刘诚昊第九周学习总结
学号20162316 2016-2017-2 <程序设计与数据结构>第九周学习总结 ps:在赶进度,进度和其他同学们有所差距. 教材学习内容总结 -1. 当用某个类声明引用变量时,它可以指 ...
20165212第九周学习总结
20165212第九周学习总结教材内容总结 URL类 URL类是java.net包中的一个重要的类一个URL对象包含的三个基本信息:协议.地址和资源协议:必须是URL对象所在的Java虚拟机支持 ...
20175208 《Java程序设计》第九周学习总结
20175208 2018-2019-2 <Java程序设计>第九周学习总结一.教材学习内容总结: 第11章 JDBC与MySQL数据库 MySQL数据库管理系统 MySQL数据库管理系 ...

Vue 第九天学习

Vue 第九天学习相关推荐

最新文章

热门文章