vue
文章平均质量分 92
rain1624
这个作者很懒,什么都没留下…
展开
-
vue基本概念梳理
Vue 基本概念梳理一、了解Vue、了解npmVue 是一套用于构建用户界面的渐进式框架1、框架和库的区别库(插件):是一种封装好的特定方法集合,对项目的侵入性较小,提供给开发者使用,控制权在使用者手中,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求;框架:是一套架构,会基于自身特点向用户提供一套相当完整的解决方案,而且控制权在框架本身;对项目的侵入性较大,使用者要按照框架所规定的某种特定规范进行开发,项目如果需要更换框架,则需要重新架构整个项目。目前的流行前端框架Angular V原创 2020-09-14 13:53:31 · 1434 阅读 · 0 评论 -
vue之父子组件通信
vue之父子组件通信1、注册子组件<script>import adduser from "../add/adduser"; export default { components: { adduser, },</script>2、插入子组件的位置,并进行相应传参(closepop不需要携带参数) <!-- 添加用户对话框 --> <adduser :addSignal="addSignal" @closepop="原创 2020-08-20 09:01:39 · 207 阅读 · 0 评论 -
mock模拟数据并设计接口
mock模拟数据设计接口模拟数据import Mock from 'mockjs' //引入mockconst Random = Mock.Random// 设置全局延时,没有延时的话,有时候会检测不到数据变化Mock.setup({ timeout: '300-600'})// 创建一个数组用来接收模拟的数据const mocklist = []const count = 7; //模拟生成7条数据for (let i = 0; i < count; i++) {原创 2020-08-19 11:23:01 · 1319 阅读 · 0 评论 -
vue菜单栏及嵌套路由
vue菜单栏及嵌套路由导航菜单element导航菜单嵌套路由设置插槽,子路由下的页面可插入该处<router-view></router-view>菜单栏设置子路由跳转,当前位置为/,跳转位置为/xxx<el-menu-item index="/home"> <i class="el-icon-s-claim"></i> <span slot="title">首页</span>原创 2020-08-19 11:05:13 · 2050 阅读 · 0 评论 -
vue 用户列表的增删
vue之用户列表增删mock模拟后端数据// 创建一个数组用来接收模拟的数据const mocklist = []const count = 5;for (let i = 0; i < count; i++) { mocklist.push(Mock.mock({ id: '@id', name: '@cname', 'phone|1': /^1[0-9]{10}$/, email: '@email',原创 2020-08-13 16:01:20 · 448 阅读 · 0 评论 -
vue之动态切换css
vue之动态切换cssvue通过class与style绑定来动态切换css我们可以传给 v-bind:class 一个对象,以动态地切换 class:<div v-bind:class="{ active: isActive }"></div>上面的语法表示 active 这个 class 存在与否将取决于数据 isActive 的 truthiness(真值true or false)。实例演示代码及注释如下:<template> <div原创 2020-08-11 14:58:08 · 3562 阅读 · 0 评论 -
vue之mock模拟后台接口
vue之mock模拟后台接口安装依赖npm install mockjs2.src下创建目录 mock/mock.js,在里面模拟两个接口,代码及注释如下:import Mock from 'mockjs'Mock.mock("http://xxxxx:8081/user",{ 'name': '@name', //随机生成姓名 'email': '@email', //随机生成邮箱 'age|1-10': '1', //随机生成年龄 //1为字符串表样式,生成1-1原创 2020-08-11 10:54:02 · 426 阅读 · 0 评论 -
vue之axios通信
vue之axios通信安装:npm install --save axios引入注册:import Axios from 'axios'Vue.prototype.axios = Axios //注册使用axios模块home中通信 <div id="app-5"> <h2> Home Page </h2> <el-button type="primary" @click="textAxios()">测原创 2020-08-11 09:26:20 · 122 阅读 · 0 评论