1.双向数据绑定是建立在单向数据绑定（model===>view）的基础上的2.双向数据绑定的实现流程： a.在解析v-model指令时，给当前元素添加input监听 b.当input的value发生改变时，将最新的值赋值给当前表达式所对应的data属性原文：https://www.cnblogs.com/wx2019/p/14875775.html
场景：有时候我们在vue项目页面做了一些操作，需要刷新一下页面。解决的办法及遇到的问题：this.$router.go(0)。这种方法虽然代码很少，只有一行，但是体验很差。页面会一瞬间的白屏，体验不是很好用vue-router重新路由到当前页面，页面是不进行刷新的。location.reload()。这种也是一样，画面一闪，体验不是很好推荐解决方法：用provide / inject 组合原理：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并...
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script> </head><body><div id="app"><div><!-- 单slot --><v-one><!-- 这里的所有内容会替换掉slot --><p>初始化段落一</p><p>初始化段落二</p></v-one><!-- 渲染结果 --><!-- <div><h1>组件标题</h1><p>初始化段落一</p><p>初始化段落二</p><p>组件段落内容</p><p>I am one</p></...
<li @click="show"><span>1</span></li><li @click="show"><span>1</span></li><li @click="show"><span>1</span></li>li点击只让当前的 li 下面的span 隐藏 方法一：用vue就尽量遵从数据驱动的想法，实现这个的方法很多，但是尽量不要直接去操作dom。 <div id="app"><ul><li v-for="list in lists" @click="show($index)"><span v-show="$index !== i">{{ list }}</span></li></ul></div><script>new Vue({el: ‘#app‘,data: {li...
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./animate.min.css" /> <script src="./vue.js"></script> <style> .box { width: 100px; height: 100px; background-color: red; } .custom-enter-active { a...
我是在vue做的数据actionsmutationsstateindex页面获取值 传递给子页面子页面的操作<template> <div class=‘cascade__container‘> <div class=‘left__container‘> <div class=‘select__container‘ v-for=‘s in deepNum‘> <select class=‘type__selector‘ v-model=‘selectValues[s]‘ v-if=‘s==1 || (selectValues[s-1] && selectValues[s-1].children) ‘ @change=‘changeHand...
vue常用的修饰符vue支持以下修饰符：.stop.prevent.capture.self.once具体用法如下：<!-- 阻止单击事件冒泡 --><a @click.stop="handle"></a><!-- 提交事件不再重载页面 --><form @submit.prevent="handle"></form><!-- 只有修饰符 --><form @submit.prevent></form><!-- 修饰符可以串联 --><a @click.stop.prevent="handle"></a><!-- 添加事件侦听器时使用事件捕获模式 --><div @click.capture="handle">...</div><!-- 只有当事件...
前言当用vue-cli 脚手架 打包压缩时，发现打包出来的css 没有被压缩，所以查阅了些资料，下面用这个方法解决： 1.首先注释掉webpack.prod.conf.js中下面的代码new OptimizeCSSPlugin({cssProcessorOptions: config.build.productionSourceMap? { safe: true, map: { inline: false } }: { safe: true }}),2.然后在utils.js中添加， minimize:true const cssLoader = {loader: ‘css-loader‘,options: {sourceMap: options.sourc...
在mpvue编写的小程序项目中，页面跳转间我希望通过编程式导航传递些参数传参页面代码： this.$router.push({path:‘/pages/login/changePassword/main‘,query:{phone:this.phoneNumber,code:this.verificationCode}}) 接参页面代码：created () {this.phoneNumber = this.$route.query.phonethis.verificationCode = this.$route.query.code }按照vue的方式来看上面的代码不应该有什么问题，但是在mpvue中就有了如下的报错： ...
父文件let { href } = this.$router.resolve({path: ‘ 自己配置本地路由，不需要动态路由 ‘,query: 个人建议传一整个对象})window.open(href, ‘newwindow‘, ‘width=600, height=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no, fullscreen=yes‘) 子文件 若干需要打印的代码，支持vue 和 scss ，不需要纯 html 去拼接data 创建对象schoolForm :{} //个人建议最好和传的参...
[WDS] Disconnected!某一个接口上方有代码出错 我的问题是let id = window.seesionStorage.setItem("xx", "xxxxxxx") //xx重复了 网上有解决办法是更改vue.config.js，但有时很明显没有触及到他，不是他的错误，就需要自己去排查自己的错误原文：https://www.cnblogs.com/rt8090/p/14737655.html
目录Vue样式绑定绑定HTML Class对象语法数组语法绑定内联样式对象语法数组语法Vue样式绑定操作元素的class列表和内联样式是数据绑定的一种常见需求，是attribute，可以使用v-bind处理它们，通过表达式计算出字符串结果。绑定HTML Class对象语法我们可以传给 v-bind:class 一个对象，以动态地切换 class；<style>.active{background-color:red;}.fontStyle{color:green;} </style> <body> <div id="app"><p id="p1" v-bind:class="{...
query传参: this.$router.push({ path:‘/...‘ query:{ id:id } })接收参数:this.$route.query.idparams传值：传参: this.$router.push({ name:‘...‘ params:{ id:id } })接收参数:this.$route.params.id this.$router 和this.$route的区别1.$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法2.$route为当前router跳转对象，里面可以...
<el-col :span="8"> <el-card class="dashBordCard charCard"> <div slot="header" class="clearfix"><span>周工作分析</span></div> <div> <ve-line height="300px" :data="chartData1" :extend="charExtend"></ve-line> </div> </el-card> </el-col> </el-row> <el-row> <el-col :span="12"> <el-card class="dashBordCard"> <div slot="h...
//谨记return里面是返回所有声明的变量的名字，数组以及对象等等 export default {data () {return { //所有的变量都是写在data 的return里面的,主要错误点在于请求参数的变量要在这里声明；imgGroup: {user: require(‘../static/images/icon/user-ava.png‘),payment: require(‘../static/images/icon/wait-payment.png‘),delivery: require(‘../static/images/icon/wait-delivery.png‘),receive: require(‘../static/image...