vue
文章平均质量分 92
rain1624
这个作者很懒,什么都没留下…
展开
-
vue基本概念梳理
Vue 基本概念梳理 一、了解Vue、了解npm Vue 是一套用于构建用户界面的渐进式框架 1、框架和库的区别 库(插件):是一种封装好的特定方法集合,对项目的侵入性较小,提供给开发者使用,控制权在使用者手中,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求; 框架:是一套架构,会基于自身特点向用户提供一套相当完整的解决方案,而且控制权在框架本身;对项目的侵入性较大,使用者要按照框架所规定的某种特定规范进行开发,项目如果需要更换框架,则需要重新架构整个项目。 目前的流行前端框架Angular V原创 2020-09-14 13:53:31 · 1410 阅读 · 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 · 200 阅读 · 0 评论 -
mock模拟数据并设计接口
mock模拟数据设计接口 模拟数据 import Mock from 'mockjs' //引入mock const 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 · 1314 阅读 · 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 · 2028 阅读 · 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 · 438 阅读 · 0 评论 -
vue之动态切换css
vue之动态切换css vue通过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 · 3525 阅读 · 0 评论 -
vue之mock模拟后台接口
vue之mock模拟后台接口 安装依赖 npm install mockjs 2.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 · 422 阅读 · 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 · 116 阅读 · 0 评论