vue 框架
vue内容
菜鸟一个abc122619
这个作者很懒,什么都没留下…
展开
-
生命周期几个阶段的讲解说明
下面分别说明vue生命周期的八个阶段:1.创建前(beforeCreate)对应的钩子函数是beforeCreate。此阶段是实例初始化之后,此时的事件监察和事件机制还没有完成,不能获取DOM节点2.创建后(created)对应的钩子函数是created。这个阶段vue实例已经创建完成了,但是还不能获取dom节点3.载入前(beforeMount)对应的钩子函数是beforemount,在这一阶段,我们虽然依然得不到具体的DOM元素,但vue挂载的根节点已经创建,下面vue对DOM的操作将围绕这原创 2021-02-28 11:40:52 · 390 阅读 · 0 评论 -
使用element-ui图片的显示
table中代码如下:` 此处template slot-scope为固定写法(scope相当于一条数据对象)在img中使用scope(三个属性value、row、index),通过row(本条数据的数据对象)获取src字段的值Vue data代码如下:data() { return { msg : 'vue测试监听查询购物车数量以及金额变化', // input:'123' tableData: [{ src: './static/images/苹果.jpg',原创 2020-09-18 21:31:31 · 9606 阅读 · 1 评论 -
Vue过滤器Filter的使用
过滤器的作用:他是可以从中取得你想要的,给哪个数据添加装饰,比如在一个价格前面给他一个¥的符号,把’Hello’变成’Hello World’,可以使用filter在后面添加World,或者把时间节点改成时间戳等.过滤器可以在new vue实例注册全局的,也可以在组件中注册局部的用法一:全局过滤器:Vuefilter(''globalFilter,function(value){ return value + '$';})局部注册:filters:{ componentFilte原创 2020-09-24 21:36:25 · 241 阅读 · 0 评论 -
vue和elementUI的综合使用
1.安装vue-cli首先要保证自己电脑有安装过node js ,打开cmd ,输入node -v ,出现以下图片说明已经安装过了安装完成后,打开任意磁盘,新建文件夹vue-test,在cmd找到vue-test目录国内访问npm比较慢,可以使用淘宝镜像npm,输入命令 :npm install -g cnpm --registry=https://registry.npm.taobao.org安装完成后使用命令 cnpm install vue 和 cnpm install vue-cli原创 2020-08-18 21:25:50 · 221 阅读 · 0 评论 -
Vue.js - 关闭 ESlint 语法检查
1,在项目初始化时就关闭当我们采用 vue-cli 脚手架工具来初始化项目时,其中有一步会提示“Use ESLint to lint your code?”,我们可以选择 no 不安装 ESLint2,在项目创建完毕后再关闭(1)可能我们一开始初始化项目的时候选择安装 ESLint,但开发过程中又想将其临时关闭。那么首先打开项目中的 build/webpack.base.conf.js 文件。(2)然后将如下代码给注释掉即可:...原创 2020-09-20 10:47:18 · 699 阅读 · 0 评论 -
移动端postcss-px-to-viewport的安装
1.我们先将以下命令安装到项目中npm i postcss-px-to-viewport -D2.在项目根目录下添加.postcssrc.js文件3.添加如下配置:module.exports = { plugins: { autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀,如-webkit-,-moz-等等 "postcss-px-to-viewport": { unitToConvert: "px", // 要转化的单位 vi原创 2021-01-17 17:56:17 · 833 阅读 · 1 评论 -
vue 生命周期钩子
生命周期:beforecreate : 一般使用场景是在加 loading事件 的时候created :处于loading结束后,还做一些初始化,实现函数自执行(data数据已经初始化,但是DOM结构渲染完成,组件没有加载)beforemount:处于组件创建完成,但未开始执行操作mounted :处于发起后端请求,获取数据,配合路由钩子执行操作(DOM渲染完成,组件挂载完成 )beforeupdate、updated:处于数据更新的前后beforeDestroy:当前组件还在的时候,想删除组件原创 2021-02-27 22:01:32 · 81 阅读 · 0 评论 -
在vue中使用axios跨域配置
在使用vue axios发送请求时产生跨域问题,报错如下:vueaxios Access to XMLHttpRequest at 'localhost:3000/users' from origin 'http://localhost:8080' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extens原创 2021-03-09 05:20:45 · 1322 阅读 · 0 评论 -
在vue-cli中如何通过axios获取本地自己创建的模拟数据
1.创建一个test.json文件,名称自己写,位置我是放在vue的index首页的{ "datalist":[ { "name": "xiaoming", "age": 20, "city": "深圳", "number": 1 }, { "name": "xiaohong", "age": 22, "city": "东莞", "number": 2 }, { "name": "siz", "age": 21, "c原创 2021-02-06 18:01:38 · 156 阅读 · 0 评论 -
vue2 lib-flexible和px2rem-loader适配移动端方法
第一步、npm i lib-flexible --save第二步、在main.js中引入第三步、index.html中找到meta标签替换在这里插入图片描述第四步、安装px2rem-loadernpm install px2rem-loader第五步、在build文件中找到util.js,将px2rem-loader添加到cssLoaders中第六步、在generateLoaders方法中添加px2remLoader最后.项目重新启动npm run devpx自动转换为rem..原创 2021-11-11 01:28:04 · 461 阅读 · 0 评论 -
vue上拉加载数据并且先显示前面几条
结果:先获取接口的数据,使用slice截取前面几条数据并显示,代码如下:`<template> <!-- 电影列表 --> <div class="movies_list"> <div class="information"> <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="isMoreLoading"原创 2021-12-04 10:48:52 · 683 阅读 · 1 评论 -
vue制作五星好评效果
1.先在父组件创建star组件,自定义分数,传值过去子组件2.子组件接收父组件传过来的score3. 定义一下类名的常量通过计算属性computed这里是css样式效果如下:原创 2021-04-19 23:44:09 · 502 阅读 · 0 评论 -
elementui 的增删改查和分页的实现
html 代码 <div class="goods"> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item>商品管理</el-breadcrumb-item> </el原创 2021-07-13 20:15:17 · 385 阅读 · 0 评论 -
vue-cli2本地使用axios请求json数据教程
1.找到在build下的 webpack.dev.conf.js2.在里面编辑需要配置一下内容const express = require('express')const app = express()const appData = require('../db.json') // 加载本地json文件const seller = appData.movies_list // 获取对应本地数据const apiRoutes = express.Router()app.use('/api'原创 2021-04-23 18:53:10 · 237 阅读 · 0 评论 -
Vue中父传子,子传父,非父子通信的中央总线区别
1.父传子: pros传值法父组件代码:子组件代码:2.子传父emit触发传值法父组件代码:子组件代码:3.非父子传值遇到的效果就是:当我从一个页面跳到另外一个页面的时候,可以让非父子关系的组件实现你想要的效果a.创建中间事件总线公共实例文件bus.js,作为公共数据中央总线import Vue from 'vue'var bus = new Vue();export default bus;...原创 2021-04-02 09:49:12 · 148 阅读 · 0 评论 -
element-ui 的路由跳转设置
Element-Ui侧边栏实现路由跳转,代码如下//要实现侧边栏路由跳转,在中需要–:default-active=“this.$route.path”。用来绑定路由表在中需要–router------或者router=true在中的index不可缺少,为必须值,不过此处的index仅为索引,用来让当前元素下的子菜单收缩或释放。每一个submenu的index值只要不一样便可在中,index的值不可缺少,就是用这个来进行路由跳转,index的值为跳转的路径<el-menu :de原创 2021-07-08 15:18:51 · 2001 阅读 · 0 评论