![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
zexin-lai
这个作者很懒,什么都没留下…
展开
-
elm首页
首页做好的效果原创 2020-08-19 23:07:53 · 137 阅读 · 0 评论 -
简单使用mockjs模拟数据
1.src/assets/data/mock.js//引入mockjsimport Mock from 'mockjs'//使用mockjs模拟数据Mock.setup( {timeout: 400}//模拟延迟时间)Mock.mock('/mock', { "data": { "mtime": "@datetime",//随机生成日期时间 "score|1-800": 800,//随机生成1-800的数字 "rank|3原创 2020-08-18 22:22:43 · 228 阅读 · 0 评论 -
vue开发模式跨域ajax
1.新建文件vue.config.jsmodule.exports = { devServer: { proxy: { '/api': { //匹配路径 target: 'https://api.imjad.cn/cloudmusic/',//跨域目标 pathRewrite: { '^/api' : '/'//重新地址原创 2020-08-17 21:44:29 · 70 阅读 · 0 评论 -
严选商场
这几天重做了一遍严选商场项目原创 2020-08-13 22:08:47 · 133 阅读 · 0 评论 -
严选商场(商品详情页面, 购物车)
原创 2020-08-10 23:02:41 · 130 阅读 · 0 评论 -
严选(分类)
原创 2020-08-06 21:49:55 · 156 阅读 · 0 评论 -
严选(首页)
原创 2020-08-05 23:51:44 · 226 阅读 · 0 评论 -
vant简单使用
vant开发文档vant是移动端vue组件库命令安装: npm install vant --savevue ui 图形界面安装, 添加vant插件全局使用vant组件的toast提示 this.$toast.loading({ message: '刷新中...', forbidClick: true, });简单使用单元格和开关组件<template> <div cl原创 2020-08-04 22:23:50 · 1152 阅读 · 0 评论 -
聊天框项目
注意事项:图片地址要引入:imgPath: require('./assets/img/4.jpeg')遍历v-for 不加括号和key会有警告:<li v-for="(item,index) in imgData" :key="'imgData' + index">{{item.username}}局部 样式只在单独组件生效: <style scoped>, 但是要慎用...原创 2020-07-29 23:08:54 · 114 阅读 · 0 评论 -
v-model组件, 动态组件
1.v-model组件<div id="app"> 1. 触发父组件事件,传数据给父组件, 来修改username, 可以自定义事件属性名 <input-dom :username="username" @input-parent="changeEvent"></input-dom> 2.直接改值可以自定义事件属性名 <input-dom :username="username" @input-parent="username=$event原创 2020-07-27 22:32:15 · 216 阅读 · 0 评论 -
Vue组件父子传值
父传值到子组件 <div id="app"> <ul> <school schoolname="清华"></school><!--静态传值--> <school :schoolname="'北大'"></school><!-- 动态传值字符串 --> <school :schoolname='schoolData[0]'></school><!--原创 2020-07-24 21:51:03 · 87 阅读 · 0 评论 -
toDoList
todoList使用Vue粗糙山寨微软的To Do 中的清单实现了的功能增加清单: enter按键事件, 把单个清单任务对象, 添加清单数组,完成清单: 点击checkbox复选框, 控制在哪个列表显示, 默认事件去除本地存储: localStorage, 每次 增加, 删除, 完成 清单操作 ,都要保存删除清单: 点击删除按钮, 从清单数组删除对应的任务, splice山寨版:原版<!DOCTYPE html><html lang="en"><h原创 2020-07-23 23:27:36 · 270 阅读 · 1 评论 -
vue过渡效果,修饰符
过渡(动画)效果<style type="text/css"> .content{ width: 200px; height: 300px; background-color: red; } .slide-enter{/* 设置进入前的样式 */ transform: translateX(500px); background-color: green; } .slide-enter-to{/* 到结束时还原成原来的样式红色原创 2020-07-22 23:13:14 · 177 阅读 · 0 评论 -
vue样式style与class,事件修饰符
样式style与class1.菜单侧边栏(例子):<style> .index { width: 100vw; height: 100vh; background-color: indigo; position: fixed; top: 0; left: 0; } .cebianlan { width: 50vw; heig原创 2020-07-21 22:41:38 · 139 阅读 · 0 评论 -
vuex路由状态,模块化,辅助函数,打包编译,发布到服务器
1.vuex路由状态Vuex 是一个专为 Vue.js 开发的状态管理模式,集中式存储管理,管理共享状态vue-cli创建项目时选中vuexgetState.vue文件<h1>姓名:{{$store.state.username}}</h1><h1>年龄:{{$store.state.age}}岁</h1><h1>虚年龄:{{$store.getters.xuAge}}</h1><button @click="ad原创 2020-07-14 21:28:36 · 122 阅读 · 0 评论 -
vue组件插槽,路由,生命周期,路由卫士
1.组件插槽<!--App.vue--><template> <div id="app"> <layout> <template v-slot:left><!--对应的组件插槽name--> <div class="left">左边</div> </template> <template v-slot:right><原创 2020-07-13 22:34:20 · 126 阅读 · 0 评论 -
vue入门:计算属性,双向绑定,组件
1.计算属性计算属性在处理一些复杂逻辑时是很有用的,每次访问计算属性时,如果依赖没有发生改变,它们可以立即返回结果,而不需要进行复杂的逻辑运算。而methods中的方法,只要被触发,被调用的方法就会立即执行对应函数,重新进行渲染。<template> <div id="app"> <h1>{{msg}}</h1> <h1>{{reverseMsg}}</h1>//直接使用结果 <h1>{{re原创 2020-07-10 23:12:01 · 265 阅读 · 0 评论