【vue小案例--简易评论区】的更多相关文章

vue小案例--简易评论区

一.小案例(评论区) 1.流程 (1)分析静态页面.(vue项目创建参考https://www.cnblogs.com/l-y-h/p/11241503.html)(2)拆分静态页面,变成一个个组件.(3)对组件编码,生成动态页面. 2.静态页面 参考来源:https://www.bilibili.com/video/av49099807/?p=22&t=1223 [举例:] <!DOCTYPE html> <html> <head> <meta char…

VUE小案例--简易计算器

这个小案例主要时练习v-model的使用,功能并不完善 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=…

Vue小案例 之 商品管理------学习过滤器 使用过滤器处理日期的格式

代码学习过滤器 过滤器介绍:过滤模型数据,在数据显示前做预处理操作: 内置过滤器:在1.x中,Vue提供了内置过滤器,但是在2.x中已经完全废除: 解决办法: (1)使用第三方库来替代1.x中的内置过滤器: (2)使用自定义过滤器: 自定义过滤器: a.全局配置:Vue.filter( id, [definition] ) b. 局部配置:在Vue实例中配置filters 详细介绍网址:https://cn.vuejs.org/v2/api/#Vue-filter 过滤器语法: 无参:{{msg…

Vue小案例（一）

案例需求: 创建一个品牌展示表格,表头有编号(id),品牌名称(name),创建时间(time)和操作,需要实现的功能是对数据的增删操作,和时间的格式化. 思路分析:在开发之前需要想清楚要用到Vue中的什么方法或者特性来实现所要的功能,把案例分成以下几个部分来开发: 展示数据,需要使用v-for指令 删除数据,需要使用v-on绑定一个事件 添加数据,需要使用双向数据绑定 时间的格式化,需要使用过滤器 实现步骤: 1.开发静态模板 <!DOCTYPE html> <html> <…

VUE小案例--跑马灯效果

自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="…

Vue(小案例_vue+axios仿手机app)_实现用户评论

一.前言 1.渲染评论列表 2.点击加载按钮,加载更多    3.提交评论 二.主要内容 1.评论列表一般是注册到一个全局的公共组件中 2.请求后台数据,渲染评论列表 (1)数据格式如下 地址 /api/getcomments/:artid?pageindex=1 作用描述 根据资讯id获取它的评论的分页信息 请求方式 Get 传入api的参数 artid: 资讯id,这个id是用来区分是哪一个页面中的评论数据 pageindex: 分页的页码,表示当前第几页 传入url写法: /api/get…

Vue(小案例_vue+axios仿手机app)_Vuex优化购物车功能

一.前言         1.用vuex实现加入购物车操作 2.购物车详情页面          3.点击删除按钮,删除购物详情页面里的对应商品 二.主要内容 1.用vuex加入购物车 (1)在src目录下创建store.js, import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ //vuex五大将 state:{ num:1//小球的数量默认为1 }, gette…

Vue(小案例_vue+axios仿手机app)_go实现退回上一个路由

一.前言 this.$router.go(-1)返回上级路由 二.主要内容 1.小功能演示: 2.组件之间的嵌套关系为: 3.具体实现 (1)由于这种返回按钮在每个页面中的结构都是一样的,只是里面的数据不一样,所以我们可以把这个“返回按钮”设置成一个公共组件,然后在每个页面中使用 (2)将功组件单独放到一个common文件夹中,如下 (3)在main.js文件中将这个公共的Navbar.vue注册成一个全局的组件 //注册全局导航栏组件 import Navbar from '@/compone…

微信小程序 - 实战小案例 - 简易记事本

多项技能,好像也不错.学习一下微信小程序. 教程:https://mp.weixin.qq.com/debug/wxadoc/dev/ 简介:一套用来开发在手机微信上运行的app框架,不用安装 组成:结构文件wxml.样式文件wxss.js文件 备注:wxml 和html是一样的,除了部分便签不一致:wxss和css是一样的:js同理 说明:支持双向数据绑定.ES6语法,遵循commonjs规范管理模块 首先在教程(https://mp.weixin.qq.com/debug/wxadoc/de…

Vue(小案例_vue+axios仿手机app)_购物车（二模拟淘宝购物车页面，点击加减做出相应变化）

一.前言 在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变                                                           2.在购物车点击加减按钮,数值做出对应变化 二.主要内容 1.实现效果:点击购物车的时候可以查看到购物车的商品信息 2.解决刷新,购物车上数值不变 (1)新建一个Cart.vue展示购物信息,并将路由添加到index.js中 (2)购物车里面涉及到:存储商品信息,…