• vue

1.问题描述 单纯使用localStorage存取参数，在页面跳转后有时候无法及时获取到参数 单纯使用route.params可以即时获取参数，但是页面刷新后，参数会丢失 2.结合两种方式的方案 父组件中传递参数 localStorage.setItem("userId", userId); this.$router.push({name:’detail’,params:{userId:userId}}); 子组件获取参数 let userId=localStorage.userId?localStorage.userId:this.$route.params.userId; 另一种方案：通过$router.query this.$router.push({name:’detail’,query:{userId:userId}}); 这样参数会出现在url中，观感欠佳 1.Params 由于动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则params将无效。需要用name来指定页面。 在路由配置文件中定义参数： path: ‘/patient/record_detail’, name: ‘record_detail’, component: r…

this.$ajax.get(url1) .then((res)=>{ this.$ajax.get(url2).then((res)=>{}); }) .then((res)=>{ this.$ajax.get(url3).then((res)=>{}); })

没有有name属性，也没有checked <label><input type="radio" v-model="form.picked" value="已选中"/>已选中</label> <label><input type="radio" v-model="form.picked" value="未选中"/>未选中</label> data () { return { form: { picked: ‘未选中’ //和picked匹配的值会自动选中 } } 遇到的问题，以及解决 模板部分结构 <label><input type="radio" v-model="form.value1" value="是" />是</label> <label><input type="radio" v-model="form.value1" value="否" />否</label…

1.将bus注入到Vue根对象中 const bus = new Vue(); new Vue({ el: ‘#app’, router, template: ‘<App/>’, components: { App }, data:{ bus }　 }); 2.组件A中触发事件 this.$root.bus.$emit(‘busevent’, 19); 3.组件B中监听事件 data () { return { valNow:” } }, mounted(){ let nowThis=this; this.$root.bus.$on(‘busevent’,function(val){ //此处this和当前this不同，所以在外部定义变量，以引用当前组件的this alert(val); nowThis.valNow=val; }) }

1.父组件 <template> <div> <subcomponent :subdata="data"></subcomponent> </div> </template> <script> import subcomponent from ‘./subcomponent’ export default { name: ‘parentComponent’, components:{ ‘subcomponent’:subcomponent }, data (){ return{ data:” } } } </script> 2.子组件 <script> export default { name: ‘subcomponent’, props: [‘subData’], data (){ return{} }, watch:{ subdata:’showData’ }, methods:{ showData(){ alert(this.subdata); } } } </script> 其它：命名方式存疑

场景：在父组件中表单提交数据，子组件中更新显示列表，子组件已经写完，再去添加prop略麻烦，尝试过location.reload()体验太差 模板部分 <recordDetail v-if="forceReload"></recordDetail> data部分 forceReload:true methods部分(表单验证成功后，先让组件消失，ajax返回成功后再让其显示) this.$validator.validateAll().then((msg)=>{ if(msg){ this.forceReload=false; //先强制组件消失 this.$ajax.get(‘/rest/admin/cases/create’) .then((res)=>{ this.forceReload=true; //强制组件再次渲染 }) .catch(function (error){}); }else{ this.$message({ message: ‘填写不完整！’, type: ‘warning’ }); } }); 改进方法 this.forceReload = false this.$nextTick(() => (this.forceReload = true)) 新的方…

1.点击时候让当前元素的class判断条件为真 <ul> <li :class="{‘active’: index === selected }" v-for="(item, index) in list" @click="choose(index)"></li> </ul> new Vue({ el:’.top_bar’, data:{ selected: null }, methods:{ choose:function (index) { this.selected = index } } });

<template> <el-table :data="tableData" stripe border style="width: 100%"> <el-table-column prop="checkUnit" label="医院名称"></el-table-column> <el-table-column prop="checkName" label="检查名称"></el-table-column> <el-table-column label="查看详情"> <template slot-scope="scope"> <el-button size="mini" @click="infoList_detial(scope.row.id)">查看详情</el-button> </template> </el-table-column> </el-table> </template…

安装: npm install –save vuex 引入： import Vuex from ‘vuex’ Vue.use(Vuex) 相关文章：https://segmentfault.com/a/1190000015782272

1.问题场景 表单页面，包含三个子组件页面，分别对应下一步，页面状态统一在父组件内管理 2.父组件代码 <step1 v-on:step="changeStep(‘step2’)" v-if="step==’step1’"></step1> <step2 v-on:step="changeStep(‘step3’)" v-if="step==’step2’"></step2> <step3 v-on:step="changeStep(‘step1’)" v-if="step==’step3’"></step3> import step1 from ‘./step1’ import step2 from ‘./step2’ import step3 from ‘./step3′ export default { name:’addFamily’, components:{ ‘step1’:step1, ‘step2’:step2, ‘step3′:step3 }, data() { return { step:’step1’ } }, methods: {…

<div id="test"> <select v-model="selected"> <option v-for="yx in YX" :value="yx.text"> {{yx.text}} </option> </select> <select> <option v-for="zy in selection" :value="zy.text" :selected="$index == 0 ? true : false"> {{zy.text}} </option> </select> </div> new Vue({ el: ‘#test’, data: { selected: ‘计信院’, //AJAX接入数据时候，这里需要手动设置，否则报错 YX: [{ text: ‘计信院’, ZY: [{ text: ‘软件工程’ }, { text: ‘计算机科学与技术’ }, { text: "信息安全" }, ] }, { text: ‘商学院’, ZY: [{…

1.当遍历值处于元素属性中 <div v-for="item in data"> <img :src="item.images[0].imageUrl"/> //此处为特例，images为数组，取第一个元素 <p>{{item.checkName}}</p> </div>

1.安装 cnpm install echarts –save 2.html <template> <div class="charts"> <div id="myCharts" :style="{width:’800px’,height:’380px’}"></div> </div> </template> 3.js import echarts from ‘echarts’ export default { name: ‘myCharts’, data () { return { myCharts:”, options:{} //echarts初始配置信息 } }, mounted() { this.myCharts=echarts.init(document.getElementById(‘myCharts’)); this.myCharts.setOption(this.options); this.getchart(); }, methods:{ getchart:function(){ this.$ajax.get(‘url’) .then((reps)=>{ this.myCharts.s…

问题描述： element表单元素加载时候控制台提示 [Vue warn]: The computed property "fields" is already defined in data. 错误原因： 同时引入了vee-validate和elementUI插件,他们的计算属性fields冲突了 解决方法： 修改vee-validate的fieldsBagName配置项 Vue.use(VeeValidate, { xxxx:’xxxx’, fieldsBagName: ‘veefields’ //此处默认为fields });

1.安装 cnpm install element-ui -S 2.main.js中引入 import ElementUI from ‘element-ui’ import ‘element-ui/lib/theme-default/index.css’ 3.main.js中全局安装 Vue.use(ElementUI) 4.其它 cnpm update -g element-ui //更新 cnpm uninstall -g element-ui //卸载 安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法将被作为 Vue 的参数调用。 当 install 方法被同一个插件多次调用，插件将只会被安装一次。

方式一：全局文件内直接定义 在main.js里进行全局注册 Vue.prototype.ajax = function (){} 在所有组件里可调用 this.ajax 方式二：子组件内定义然后全局引入 // myfun.js 组件 exports.install = function (Vue, options) { Vue.prototype.myfun = function (){ alert(‘aaaaaaa’); }; }; // main.js 入口 import myfun from ‘./commons/myfun.js’ Vue.use(myfun); // ccc.js 子组件 this.myfun();

1.安装vee-validate cnpm install vee-validate –save 2.安装vue-i18n cnpm install vue-i18n –save 3.main.js中引入 import VeeValidate from ‘vee-validate’; import zh_CN from ‘vee-validate/dist/locale/zh_CN’ import VueI18n from ‘vue-i18n’; Vue.use(VueI18n) const i18n = new VueI18n({ locale: ‘zh_CN’, }) Vue.use(VeeValidate, { i18n, i18nRootKey: ‘validation’, dictionary: { zh_CN } }); 全部配置 const config = { events: ‘blur’ } Vue.use(VeeValidate, config) 4.页面中使用 <input type="text" placeholder="邮箱" v-validate ="’required|email’" name="email"/> &l…

1:url内存在一个’#’ 路径：router/index.js export default new Router({ mode:"history", //添加此配置选项 routes: [] }) 2.通过端口转发处理跨域 路径:config/index.js proxyTable: { ‘/api’: { target: ‘http://xxx.com’, changeOrigin: true, pathRewrite: {} }, ‘/service’:{} } 请求 this.$ajax.get(‘/api’).then(); //请求的正式地址为’http://xxx.com/api’ 注意：修改后需要重启服务，否则不生效

1.安装 cnpm install axios –save 2.main.js中全局引入 import axios from ‘axios’ Vue.prototype.$ajax = axios 3.调用 this.$ajax.get(URL) .then((response)=>{ console.log(response); }) .catch((error)=>{ console.log(error); }); 局部引入 1.安装以后 2.组件中直接引入 import axios from ‘axios’ axios.get(‘/user?ID=12345’) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 4.其他问题 get正常post方式时候后端无法读到值，此时需要引入qs 因为jQuery与axios在post请求中，数据的处理方式并不相同。jQuery默认数据是Form格式，axios则是前后端同构的payload形式，这个区别造成了后台在获取post请求的数据时获取方式不同 import axios from ‘axios’ import qs fro…

1.html部分 <ul v-model="menuNow" class="TabMenu clearfix"> <li class="fl" v-bind:class="{active:menuNow==’tab1′}" @click="setMenu(‘tab1′)">tab1</li> <li class="fl" v-bind:class="{active:menuNow==’tab2’}" @click="setMenu(‘tab2′)">tab2</li> <li class="fl" v-bind:class="{active:menuNow==’tab3’}" @click="setMenu(‘tab3’)">tab3</li> </ul> <div class="TabContent"> <tab1 v-if="menuNow === ‘tab1’">…

<p> <input v-if="!showPass" type="password" v-model="password"/> <input v-if="showPass" type="text" v-model="password"/> <span v-if="!showPass" class="icon eye-slash" @click="showPass = !showPass"></span> <span v-if="showPass" class="icon eye" @click="showPass = !showPass"></span> </p> new Vue({ el: ‘body’, data: { showPass: false, password: ” } })

<div id="app"> <navbar></navbar> <pagefooter></pagefooter> </div> Vue.component(‘navbar’,{ template:’#navbar’, data:function () { return { navs:[] } } }); Vue.component(‘pagefooter’,{ template:’#pagefooter’, data:function () { return { footer:” } } }); new Vue({ el:’#app’, mounted:function () { //ready, //这里怎么直接访问navbar的navs和pagefooter的footer值呢， } }) 这就用到ref了 修改组件 <div id="app"> <navbar ref="navbar"></navbar> <pagefooter ref="pagefooter"></pagefooter> </div> new …

问题描述： ajax返回一个对象数组，页面内通过v-for输出，但是每个循环元素内要添加一个input输入框 提交时候，需要连同input值一起提交 初期思路 步骤： 1.直接对ajax返回的json对象数组通过for循环追加属性, 2.data变量在渲染以后结构发生变化，如何取值 解决方法： 1.ajax返回的结果先赋值给临时变量temp 2.通过for循环给temp数组内的对象添加新属性result 3.把temp赋值给projectList 表单提交时候： 通过 document.querySelectorAll(“.rusult_input”);获取到追加input的值，通过for再循环赋值 尝试改进： 1.用map函数处理数据 data.map(function(item){ item.show = false; }); 2.数据在created钩子中请求及追加 用map函数追加属性 getinfoList(){ this.$ajax.get(‘/service/check/15/LABS_CHECK?pageSize=1000’) .then((res)=>{ this.infoList=res.data.body.list; this.infoList.map(function(item){ if(…

1.echarts 报错 ‘There is a chart instance already initialized on the dom’ 在mounted里初次加载,然后在watch里监听数据变化， 两个事件内分别写上echarts.init就会有此警告 解决办法：data部分定义组件全局变量myCharts, 只在mounted内初始化：this.myCharts=echarts.init(document.getElementById(‘myCharts’)); 两个地方分别 setOption 2.JS空格报错 这是 ESLint，用来规范代码风格的 找到build文件夹下面的webpack.base.conf.js文件 找到rules部分 loader:’eslint-loader’ 注释之