Hhjian524的博客

具体的封装代码如下：import axios from 'axios'import qs from 'qs'export function get(url,data){ return new Promise((resolve, reject) => { axios.get(url, { params: data }).then((res) => { if (res) {

实现的效果如下：未选择时：选择一个或者多选时取消选择时具体代码如下<template> <div class="tagBox"> <div class="tagBox_tabBoxL"> <span :class="[{ active: checkedGroup.indexOf(index) > -1 }]" :key="item.id || index" ...

当页面出现这样的保持时。Navigating to current location ("/sign") is not allowed就是路由的push方法出错了。重写方法如下。import VueRouter from 'vue-router';Vue.use(VueRouter);/** * 重写路由的push方法 */const routerPush = VueRouter.prototype.push;VueRouter.prototype.push = functi

在vue.config.js中配置module.exports = { devServer: { overlay: { warnings: false, errors: false }, }, lintOnSave: false}

安装两个package包：yarn add postcss-px2rem lib-flexible --save在main.js中引入lib-flexibleimport lib-flexible;在vue.config.js文件中加入以下片段代码，如果没有vue.config.js，就在根目录下创建module.exports = { css: { loaderOptions: { css: {}, postcss: {

1、编程式导航router.push2、声明式的导航 <router-link>编程式导航传递参数有两种类型：字符串、对象字符串：this.$router.push("home");对象：this.$router.push({ name: 'news', params: { userId: 123 }})//获取：this.$route.params.userId查询参数其实就是在路由地址后面带上参数和传统的url参数一致，传递参数使用query而且必须配合path来传递参数

首先创建一个filter/filter.js文件//这个文件主要是写了过滤器实现的方法，然后export进行导出。function filterOne(n){ return n + 10;}function filterTwo(n){ return n + 5;}export{ filterOne, filterTwo}然后在mian.js中注册使用import * as filters from './filter/filter.js'//遍历所有导出

一、v-model修饰符1、.lazy:输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据2、.trim：输入框过滤首尾的空格<input type="text" v-model.trim="value">3、.number：先输入数字就会限制输入只能是数字，先字符串就相当于没有加number，注意，不是输入框不能输入字符串，是这个数据是数字：<input type="text" v-model.number="value">二

vuex可以帮助开发者管理共享状态，也就是管理全局变量vuex的几个核心概念：vuex使用一个store对象管理应用的状态，一个store包括：state、getter、mutation、action四个属性。state：state意为“状态”，是vuex状态管理的数据源。getter：getter的作用与filters有一些相似，也可以将state进行过滤后输出。mutation：mutation是vuex中改变state的唯一途径，并且只能同步操作。action：一些对state的异步操作可

全局的路由钩子函数：beforeEach、afterEach单个的路由钩子函数：beforeEnter组件内的路由钩子函数：beforeRouteEnter、beforeRouteLeave、beforeRouteUpdate全局导航钩子函数：beforeEach//vue路由导航守卫控制访问权限//如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面router.beforeEach((to,from,next)=>{ // to 将要访问的路径 //from

MVVM是 Model-View-ViewModel的缩写。Model代表数据模型，也可以在Model中定义数据来修改和操作的业务逻辑。View代表UI组件，它负责将数据模型转化成UI展现出来。View-ViewModel监听数据模型的改变和控制视图行为、处理用户交互，简单理解就是一个同步View和Model的对象，连接Model和View。viewmodel和model实现双向数据绑定。为什么需要MVVM：前端开发中暴露了三个痛点问题：1、开发中在代码中大量调用相同的DOM API，处理繁琐

在平常开发中，有部分组件没有必要多次初始化， 这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。也就是说，keep-alive是vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。也就是所谓的组件缓存。基本用法：//被keep-alive包含的组件会被缓存<keep-alive> <component /></keep-alive>被keep-alive包含的组件不会被再次初始化，也就意味着

实现效果：主要实现代码逻辑部分，具体页面结构就不一一介绍了。vue部分：安装recorderxcnpm install recorderx --save 或者npm install recorderx --save在具体的组件中引入<script> import axios from "axios"; import Recorderx, { ENCODE_TYPE } from "recorderx"; const rc = new Recorderx();

实现的效果如下：首先引入表情相关的json数据（emojis.json）<script>const emojData = require("@/assets/emojis.json");export default { data() { return { faceList: [], //表情数组 faceShow: false,//控制表情区域的显示或者隐藏 } }, methods:{

在一个页面跳转到另一个页面时，再回来时，页面的数据不变。例如 点击所在位置，跳转到选择位置页面的时候，回来时，保持跳转前输入的数据不清空。这就需要用到路由缓存。首先在路由中配置{ path: '/publicmoments', name: 'PublicMoments', component: PublicMoments, meta: { keepAlive:true,//需要开启缓存 }, },{ path: '/maplocation', name:

如图所示。点击页面其他区域时隐藏表情区域。首先定义一个boolean值来控制表情区域的显示或者隐藏data(){ return{ faceShow:false }}页面最外部的div表情区域部分getBrow是指点击单个表情。所以这里点击需要做阻止冒泡。...

<ul ref="cgat-box"> <li v-for="(chatmsg,chatindex) in chatlist" :key="chatmsgindex"> ......... </li></ul>首先定义一个方法scrollToButtom(){ this.$nextTick(() => { let chatboxContainer = this.$refs.chatbox // 获取

一、父组件向子组件传递数据在 Vue 中，可以使用 props 向子组件传递数据。例如父组件Home.vue<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png" /> <Child :msg='msg' :toChildFun='toChildFun'/> </div></template><script&

上一篇的文章主要是讲解vuex中的简单使用，所以几乎把所有代码都写在index.js一个文件夹里面，但是如果项目庞大时，这样不好维护。所以现在把index中的state、actions、getters、mutations分别独立出来首先在store中创建以下文件：以下对之前index.js进行改造之前的index.jsimport Vue from 'vue'import Vuex from 'vuex'import { getHotArticle } from '../api/index'

官方给出的解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。具体详情可浏览官网https://vuex.vuejs.org/zh/以下主要是介绍个人平时对vuex的使用1.安装vuexcnpm i vuex --save 然后在src目录下创建store文件夹，然后创建index.js初始化如下import Vue from 'vue'import Vuex from 'vuex

利用路由的全局前置守卫beforeEach来控制用户的访问权限。首先是一个登录的页面用户输入完整的信息，点击登录时，会本地存储用户的登录状态，如果在本地存储中存在用户登录过的痕迹，用户可以直接进入home页面，否则就要重新进入登录页面。//vue路由导航守卫控制访问权限//如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面router.beforeEach((to,from,next)=>{ // to 将要访问的路径 //from 代表从那个路径跳转而来

参考

编程式导航我们可以通过this.$router.push()这个方法来实现编程式导航，当然也可以实现参数传递，这种编程式导航一般是用于按钮点击之后跳转从A页面跳转到B页面，并传递参数到B页面A页面 toB(id) { // console.log(id); this.$router.push({ name: "B", query: { id: id } }); },B页面接收A页面传来

需求：用户只有登录了，用户名存储在本地储存时，才能进入首页，如果本地存储没有用户名，就不能进入首页1、登录页面的实现<template> <div class="htmleaf-container"> <div class="demo form-bg"> <div class="container"> ...

为什么要使用分页展示数据，因为如果一次性向服务器请求全部数据的话，数据量大的话，会对服务器造成阻塞，要提高性能，所以这就要使用分页展示数据，当我们用到表格当前页的数据，才向服务器发起相对应页码和码数的请求。用到的技术栈vue-cli + node + mysql 前端页面编写页面搭建主要是用到了element-ui框架，用到了表格组件和分页组件代码<template> ...

页面布局：采用了element-ui的表格对商品列表和购物车列表进行布局1、商品列表<template> <div class="shop-list"> <table> <el-table :data="shopList" style="width: 100%"> <el-table-column ...

分别新建两个组件，分别是组件Child.vue和组件ChildBrother.vue,然后挂载在根组件App.vue中，这两个组件相当于兄弟组件。根组件App.vue:非父子组将传值的主要方法就是：1、新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例新建一个文件夹model,在文件夹的目录下新建一个js文件，名为spread.js，spread.js主要代码如下：...

1.父组件主动获取子组件的数据和方法首先在子组件的data中定义了了一个数据message，1.调用子组件的时候定义一个ref&lt;child ref="child"&gt;&lt;/child&gt;2.在父组件里面通过this.$refs.child获取数据或者方法在根组件App.vue中：在子组件Child.vue中：通过this.$refs.child.数据和this...

父组件像子组件传值1.父组件调用子组件的时候 绑定动态属性在父组件App.vue中：绑定动态属性&amp;lt;child :message =&quot;message&quot;&amp;gt;&amp;lt;/child&amp;gt;在子组件Child.vue中：2.在子组件里面通过 props接收父组件传过来的数据props:[‘message’],然后就可以在子组件中使用了效果：父组件也可以传一个方法给子组件:1...

简单地用一个例子来举例说明methods属性和computed属性的区别。在html中：&lt;div id="app"&gt; &lt;h1&gt;Computed 计算属性&lt;/h1&gt; &lt;button @click="a++"&gt;Add to A&lt;/button&gt; &lt;button @cli

循环语句循环使用 v-for 指令。v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。v-for 可以绑定数据到数组来渲染一个列表：数组遍历来渲染列表在html中：&lt;div id="app" style="margin-top:100px;"&gt; &lt;h1&gt;v-for ...

条件判断：v-if：条件判断使用 v-if 指令在html：&lt;div id="app" style="margin-top:100px;"&gt; &lt;h1&gt;v-if 条件&lt;/h1&gt; &lt;button @click="error = !error" type="button" class="bt