问题：请求参数arr=[1,2,3]，则url里面显示“url地址?arr[]=1&arr[]=2&arr[]=3”，这样调用接口的时候后台可能不识别 "[]", 这里需要把 "[]" 给去掉解决方法： 1，安装qsnpm install qs 2，在js里面引用并使用import qs from ‘qs‘this.$http.get(url + ‘?‘ + qs.stringify(params, { indices: false })).then(() => {}) 然后再调用接口的时候url里面就为“url地址?arr=1&arr=2&arr=3”原文：https://www.cnblogs.com...
cmd下安装axiosnpm install axios安装好后,会多出node_modules文件夹思路:
监听data里的word改变时,发送ajax异步请求数据,
把返回的数据赋值给data里的result,再传给模板里9.html<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>vue</title><link rel="stylesheet" href=""><!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--><scrip...
{{xxx}} 基本的插值表达式插值表达式 使用两个大括号 {{ data中定义的数据名 }}
可以将数据插入到指定的位置这种写法不仅可以显示data属性里定义的值，也可以书写js中的表达式，可以使用methods中定义的函数等等其他数据渲染指令v-text：指定元素的内容（纯文本）v-html：指定元素的内容（解析html）v-pre：用于跳过这个元素和它的子元素的编译过程，用于显示原本的Mustache语法（{{xxx}}）v-once：只进行一次渲染，不进行响应式，...
把最近学习vue的一些知识点记录下来，今天记录一下Vue通过vue-resource连接数据库接口渲染列表和添加删除功能首先我们得引入vue的版本文件和vue-resource.js,注意：vue-resource的引入要在vue版本文件之后然后把列表页面写好，然后在methods里写一个获取列表数据的方法： getAllList() { //获取所有的品牌列表this.$http.get(‘api/getprodlist‘).then(result => {var result = result.bodyif (result.status === 0) {this.lis...
在使用 el-table 展示数据时，单元格中的数据有可能存在空格和换行符，若不进行设置，浏览器默认会取消空格和换行符，如下所示： 解决方法：将单元格的样式 “white-space” 属性设置为“pre-wrap” 即可解决。在VUE页面中添加如下样式设置 1<template> 2 ...3</template> 4 5<style> 6 .el-table .cell.el-tooltip {7 white-space: pre-wrap;8 }9</style>1011<script>12 ...
13</script> 设置后，刷新页面。表格展示效果...
retive的错误用法<template><div>司藤的信息==>{{ objInfo }}<button @click="handerHttpServe">获取远端的值</button></div>
</template>
<script>
import { reactive } from ‘@vue/reactivity‘
export default {setup () {let objInfo=reactive({ })function handerHttpServe(){setTimeout(()=>{objInfo={name:‘司藤‘,sex:‘女‘,}},400)}return {objInfo,handerHttpServe}}
}
</script>
为什么无法更新视图呢？？我们都知道...
Vue获取dom对象在js和jq中我们都能获取dom对象例如// 获取id=1的div标签
<div id=d1>dom对象</div>// js语法
let ele = document.getElementById(‘d1‘)
// jq语法
let ele = $(‘#d1‘)那么在vue中也有实现该功能的语法，使用方法，在vue组件中，给目标标签添加上ref属性，然后在vue组件实例中调用方法去获取dom对象：<body>
<div id=‘app‘>// 给目标标签添加上ref属性并赋值<div ref=‘mydiv‘></div>// 给按钮绑定点击事件触...
举个例子如下：<div style="display:inline-block;margin-left:20px;" v-show="showUpdate"><span>上次汇总时间:</span><span>{{items.length>0?dateFormat( items[0].sumLasttime):"请手动汇总更新汇总数据"}}</span></div><span>{{items.length>0?dateFormat( items[0].sumLasttime):"请手动汇总更新汇总数据"}}</span>把后台传来的时间传入自定义的日期时间规范化函数里面，在js函数里面弄成自己想要的日期时间，下面是一个例子...
1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5<meta charset="utf-8"> 6<meta name="viewport" content="width=device-width,initial-scale=1.0"> 7<title>Document</title> 8<!--1.导入Vue的包--> 9<script src=" https://cdn.jsdelivr.net/npm/vue"></script>10</head>1112<body>13<div id="app">14<h4>{{msg}}</h4>15<!-- v-bind只能实现数据的单向绑定，从M 自动绑定到 V，无法实现数据的双向绑定 -->16<!-- <input type="t...
1、前言vue构建的项目中，vuex的状态存储是响应式的，当vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到高效刷新，问题来了，vuex存储的数据只是在页面中，相当于我们定义的全局变量，刷新之后，里面的数据就会恢复到初始化的状态。比如，用户已经登录了，我把登录状态放到state中了，一刷新页面，还要重新登录？购物车里的添加的数据，一刷新要重新添加？2、使用场景
vuex存取值一般都是放在co...
有一段时间没有更新技术博文了，因为这段时间埋下头来看Vue源码了。本文我们一起通过学习双向绑定原理来分析Vue源码。预计接下来会围绕Vue源码来整理一些文章，如下。一起来学Vue双向绑定原理-数据劫持和发布订阅一起来学Vue模板编译原理(一)-Template生成AST一起来学Vue模板编译原理(二)-AST生成Render字符串一起来学Vue虚拟DOM解析-Virtual Dom实现和Dom-diff算法这些文章统一放在我的git仓库：https://github.com/yzsunlei/java...
1. Vue中不可以添加不存在的属性，因为不存在的属性是没有getter和setter的。 <div id="app">{{msg.a}}{{msg.b}}</div><script src="js/vue.js"></script><script>let vm = new Vue({el: "#app",data: {msg: {a: 1}}})vm.msg.b = 2; //这样添加数据不会在视图中显示出来</script>2. 关于如何添加一个动态属性我们可以使用Vue提供的方法：实例.$set(对象, 属性名, 属性值)； <div id="app">{{msg.a}}{{msg.b}}</div><script s...
在日常开发中有很多场景我们都需要用到节流函数和防抖函数，比如：实现输入框的模糊查询因为需要轮询ajax，影响浏览器性能，所以需要用到节流函数；实现手机号、姓名之类的的验证，往往我们只需要验证一次，这个时候我们就需要用到防抖函数；但是网上的很多资料都是不够具体和便于理解。
基本代码如下 <el-input placeholder="请输入搜索内容" suffix-icon="el-icon-search" class="searchItem searchInput" v- model.trim=...
最近在开发中遇到一个在form表单对象里，有个图片上传的组件，上传成功后返回数据赋值后，图片没有展示出来 当我上传图片成功后给form.imgUrl赋值后，页面并没有出现图片的缩略图该怎么解决呢：方法1.$set// 上传成功回调函数
handleAvatarSuccess(res, file) {this.$set(this.form,‘imgUrl‘,res.data);
},
方法2.$forceUpdatehandleAvatarSuccess(res, file) {this.form.imgUrl = res.data;this.$forceUpdate();
},
$set官方ap...
<template><div><input placehoder=‘请输入姓名搜索‘ v-model=‘searchName’ /><ul> <li v-for = ‘(item,index) in filterPersons‘ :key=‘index‘>姓名：{{item.name}}--年龄：{{item.age}}</li></ul></div></template><script>export default{name:‘filter‘, data(){ return{ searchName:‘‘.//搜索关键词 persons:[ {name:‘张三‘,age:19},{name:‘李四,age:29},{name:‘王五‘,age:20}, ] } },com...
