1.vue init webpack-simple vueprojectname 创建一个vue工程
2.路由中的<router-view>中只显示选中的子组件的内容,不会全部显示出来
3.export default中组件怎么写
4.templete怎么写到组件中
1.与之前的开发不同的是vue的整个项目自始至终只有一个页面。(这点的理解非常重要)
2.vue的页面的渲染是用js实现的。也就是说在vue文件里写的看上去是html语言的东西,最终都会被打包成js代码。
3.vue是由数据驱动的。组件化。
vuex集中式管理数据
http://vuex.vuejs.org
vue init webpack-simple vuex-demo
cd vuex-demo
npm install
npm install vuex --save
npm run dev
vuex:用户界面负责触发动作(Action)进而改变对应状态(State),从而反映到视图(View)上。如下图所示:
vuex提供了两个方法:
mapActions: 提交事件的方法
mapGetters: 获取状态信息和数据
先看app.vue文件,
import {mapActions,mapGetters}from vuex
mapActions([里面传入事件处理程序]) 会绑定在事件上
当事件触发时,会提交一个increment处理程序,那么我们就得去准备一个actions里面有increment这个函数,那么就到了store.js,
然后看store.js,必须导出 new Vuex.Store({actions});
当点击完成之后,传到了actions那里,给函数(处理程序)传了一个对象,commit
commit()方法会把一个函数提交到mutations里面,对应该函数的所要做的数据变化
action就和事件差不多,会在组件中触发;需要绑定
5.31
1.修改样式没法修改,是因为权重不够,可以在前面再添加一个选择器
2.element中的datepicker中怎么让placeholder中显示当天的日期:
3.注意原生的插件(moment)只要不是基于jquery的都可以用
4.vue解决跨域问题:记住要重启如果改了webpack里面的
proxyTable: {
'/publicService': {
target: 'http://222.85.148.140:4000',
changeOrigin: true,
pathRewrite: {
'^/publicService': '/publicService'
}
}
},
5.vue中请求写在created中,可是created怎么频繁的调用呢
6.1
1.在LeftNav中:
this.$route.path:
props:[‘items’]:
props: ['items'],
watch: {
$route(newValue){
this.currView = newValue.path;
}
},
这两句代码是做什么的啊
2.https://github.com/DDFE/DDFE-blog/issues/10看看webpack这个东西
http://www.jianshu.com/p/0a7aef90d0e8看看二级路由这个东西
3.el-row
el-col
4.datepicker中的小叉号怎么取消?
:clearale="cleartable"
注意在所有组件中attribute属性都用v-bind绑定
5.methods里面的方法互相访问是不是要加this:注意不要乱使用箭头函数,this会改变作用域
6.vue项目怎么打包成apk???
7.input里面的数据没有渲染上去:
if(oldData.daysAqi && oldData.daysAqi.hour && oldData.daysAqi.hour.length)
和if(oldData.daysAqi.hour.length&&oldData.daysAqi.aqi.length)的健壮性区别
错误的写法:不能执行只能声明
getYesterday:dailyGetYesterdayData(this.params)
.then(function(res){
console.log(res.data.data);
this.getYesterdaydata = res.data.data;
this.getYesterdaydata.date = moment(this.timevalue).subtract("1","day").format("YYYY-MM-DD");
console.log(this.getYesterdaydata)
})
.catch(
err => console.log(err)
)
正确的写法:
getYesterday:function(){
dailyGetYesterdayData(this.params)
.then(function(res){
console.log(res.data.data);
this.getYesterdaydata = res.data.data;
this.getYesterdaydata.date = moment(this.timevalue).subtract("1","day").format("YYYY-MM-DD");
console.log(this.getYesterdaydata)
})
.catch(
err => console.log(err)
)
},
关于this丢失的问题:
箭头函数:
尖头函数算是表达式, 所以this 还是父级的this
绑定定义时所在的作用域,而不是指向运行时所在的作用域
箭头函数内部没有this,他会找距离他最近的那个函数内的this
常规函数:常规函数this指向自己函数内或者指向全局变量window
注意看这个:es6 => es5
var V = {
a:12,
fn:function(){
return this.a -2 //10 this指向当前对象
},
fn2:function(){
return () => this.a -2
}
}
es6 => es5
var V = {
a:12,
fn:function(){
return this.a -2
},
fn2:function fn2(){
var _this = this;注意这里,箭头函数没有this,他会用父级函数的this
return function(){
return _this.a - 2
}
}
}
getYesterday:function(){
var that = this;
dailyGetYesterdayData(this.params)
// .then(function(res){
// console.log(res.data.data);
// console.log(this);为啥这个this是undefined 指向这个匿名函数
// that.getYesterdaydata = res.data.data;
// that.getYesterdaydata.date = moment(that.timevalue).subtract("1","day").format("YYYY-MM-DD");
// })
.then(
res => {
this.getYesterdaydata = res.data.data;
console.log( this.getYesterdaydata );
this.getYesterdaydata.date = moment(that.timevalue).subtract("1","day").format("YYYY-MM-DD");
console.log( this.getYesterdaydata.date );
})
.catch(
err => console.log(err)
)
}
1.rowspan 和 colspan 合并单元格的数目
2.axios中的baseurl属性,还有如何跨域
3. import leftNav from '@/components/LeftNav.vue';中的@是做什么的?
4.vue中的use用和不用有什么区别?
6月9号
1.air-monitor:空气质量监测数据
2.<th>O<sub>3</sub>(μg/m<sup>3</sup>)</th> =》 O3 ug/m3 sup上标 sub下标
3.table中的cell-padding不好使:不要写行内样式
td{
padding:0.7em 0 0.7em 0;
}
6月12号:
1.从一个页面切换到另一个页面的时候,相同的类名的样式发生了重叠
2.错误的写法:
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="v in stationsinfo" index={{v.name}} >{{v.name}}</el-dropdown-item>
</el-dropdown-menu>
正确的写法:
<el-dropdown-item v-for="v in stationsinfo" :index=v.name >{{v.name}}</el-dropdown-item>
6月14号:
1.计算属性是改不了的,得改变他的依赖属性,也就是data里面的数据,依赖数据变了,计算属性就跟着变了
如果computer依赖了某个data里面的数据,这个数据就会呗监听,如果这个数据改变了,就会响应computed里面的函数
我们能操作的也就只有data里面的数据和methods里面的函数调用
们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,(也就是依赖不变他不变)
只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
datechange:function(num){
this.starttime = moment(this.starttime).subtract(num,"months");
alert(this.starttime);
this.value1 = this.starttime;
}
2.原生模拟事件怎么写?
不要模拟事件,模拟事件一般分为两步骤:
active样式
事件处理程序
3.npm install echart 和 npm install ecahrt --save 的区别
4.微信分享出去的都是加了参数的,通过url判断页面就行,有参数的就把底边栏干掉
5.数据下载前端:当点击button的时候,数据下载开始,用ajax也可以,等下载完成之后,后台给自己一个flag,用回调函数接受
6.webstrom 最好使
最重要的 areaid 一定要引用 config里面的啊,这样才能达到 配置的效果,都写在业务 模块里面了,以后 换别的城市。。,还怎么改
另外 获取全市站点的 接口,公用一个就行了,我晚上引入 vuex吧,这个东西可以 用 vuex,不用每个模块都请求,然后,不用每个模块都引用 vue ,axios 之类的啊,
还有 ele ui,这些都在 mainjs里面全局引用了,还有 你的 el-row 和el-col 用错了啊,row是 行,col是列,先行再列
2.路由中的<router-view>中只显示选中的子组件的内容,不会全部显示出来
3.export default中组件怎么写
4.templete怎么写到组件中
1.与之前的开发不同的是vue的整个项目自始至终只有一个页面。(这点的理解非常重要)
2.vue的页面的渲染是用js实现的。也就是说在vue文件里写的看上去是html语言的东西,最终都会被打包成js代码。
3.vue是由数据驱动的。组件化。
vuex集中式管理数据
http://vuex.vuejs.org
vue init webpack-simple vuex-demo
cd vuex-demo
npm install
npm install vuex --save
npm run dev
vuex:用户界面负责触发动作(Action)进而改变对应状态(State),从而反映到视图(View)上。如下图所示:
vuex提供了两个方法:
mapActions: 提交事件的方法
mapGetters: 获取状态信息和数据
先看app.vue文件,
import {mapActions,mapGetters}from vuex
mapActions([里面传入事件处理程序]) 会绑定在事件上
当事件触发时,会提交一个increment处理程序,那么我们就得去准备一个actions里面有increment这个函数,那么就到了store.js,
然后看store.js,必须导出 new Vuex.Store({actions});
当点击完成之后,传到了actions那里,给函数(处理程序)传了一个对象,commit
commit()方法会把一个函数提交到mutations里面,对应该函数的所要做的数据变化
action就和事件差不多,会在组件中触发;需要绑定
5.31
1.修改样式没法修改,是因为权重不够,可以在前面再添加一个选择器
2.element中的datepicker中怎么让placeholder中显示当天的日期:
3.注意原生的插件(moment)只要不是基于jquery的都可以用
4.vue解决跨域问题:记住要重启如果改了webpack里面的
proxyTable: {
'/publicService': {
target: 'http://222.85.148.140:4000',
changeOrigin: true,
pathRewrite: {
'^/publicService': '/publicService'
}
}
},
5.vue中请求写在created中,可是created怎么频繁的调用呢
6.1
1.在LeftNav中:
this.$route.path:
props:[‘items’]:
props: ['items'],
watch: {
$route(newValue){
this.currView = newValue.path;
}
},
这两句代码是做什么的啊
2.https://github.com/DDFE/DDFE-blog/issues/10看看webpack这个东西
http://www.jianshu.com/p/0a7aef90d0e8看看二级路由这个东西
3.el-row
el-col
4.datepicker中的小叉号怎么取消?
:clearale="cleartable"
注意在所有组件中attribute属性都用v-bind绑定
5.methods里面的方法互相访问是不是要加this:注意不要乱使用箭头函数,this会改变作用域
6.vue项目怎么打包成apk???
7.input里面的数据没有渲染上去:
if(oldData.daysAqi && oldData.daysAqi.hour && oldData.daysAqi.hour.length)
和if(oldData.daysAqi.hour.length&&oldData.daysAqi.aqi.length)的健壮性区别
错误的写法:不能执行只能声明
getYesterday:dailyGetYesterdayData(this.params)
.then(function(res){
console.log(res.data.data);
this.getYesterdaydata = res.data.data;
this.getYesterdaydata.date = moment(this.timevalue).subtract("1","day").format("YYYY-MM-DD");
console.log(this.getYesterdaydata)
})
.catch(
err => console.log(err)
)
正确的写法:
getYesterday:function(){
dailyGetYesterdayData(this.params)
.then(function(res){
console.log(res.data.data);
this.getYesterdaydata = res.data.data;
this.getYesterdaydata.date = moment(this.timevalue).subtract("1","day").format("YYYY-MM-DD");
console.log(this.getYesterdaydata)
})
.catch(
err => console.log(err)
)
},
关于this丢失的问题:
箭头函数:
尖头函数算是表达式, 所以this 还是父级的this
绑定定义时所在的作用域,而不是指向运行时所在的作用域
箭头函数内部没有this,他会找距离他最近的那个函数内的this
常规函数:常规函数this指向自己函数内或者指向全局变量window
注意看这个:es6 => es5
var V = {
a:12,
fn:function(){
return this.a -2 //10 this指向当前对象
},
fn2:function(){
return () => this.a -2
}
}
es6 => es5
var V = {
a:12,
fn:function(){
return this.a -2
},
fn2:function fn2(){
var _this = this;注意这里,箭头函数没有this,他会用父级函数的this
return function(){
return _this.a - 2
}
}
}
getYesterday:function(){
var that = this;
dailyGetYesterdayData(this.params)
// .then(function(res){
// console.log(res.data.data);
// console.log(this);为啥这个this是undefined 指向这个匿名函数
// that.getYesterdaydata = res.data.data;
// that.getYesterdaydata.date = moment(that.timevalue).subtract("1","day").format("YYYY-MM-DD");
// })
.then(
res => {
this.getYesterdaydata = res.data.data;
console.log( this.getYesterdaydata );
this.getYesterdaydata.date = moment(that.timevalue).subtract("1","day").format("YYYY-MM-DD");
console.log( this.getYesterdaydata.date );
})
.catch(
err => console.log(err)
)
}
1.rowspan 和 colspan 合并单元格的数目
2.axios中的baseurl属性,还有如何跨域
3. import leftNav from '@/components/LeftNav.vue';中的@是做什么的?
4.vue中的use用和不用有什么区别?
6月9号
1.air-monitor:空气质量监测数据
2.<th>O<sub>3</sub>(μg/m<sup>3</sup>)</th> =》 O3 ug/m3 sup上标 sub下标
3.table中的cell-padding不好使:不要写行内样式
td{
padding:0.7em 0 0.7em 0;
}
6月12号:
1.从一个页面切换到另一个页面的时候,相同的类名的样式发生了重叠
2.错误的写法:
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="v in stationsinfo" index={{v.name}} >{{v.name}}</el-dropdown-item>
</el-dropdown-menu>
正确的写法:
<el-dropdown-item v-for="v in stationsinfo" :index=v.name >{{v.name}}</el-dropdown-item>
6月14号:
1.计算属性是改不了的,得改变他的依赖属性,也就是data里面的数据,依赖数据变了,计算属性就跟着变了
如果computer依赖了某个data里面的数据,这个数据就会呗监听,如果这个数据改变了,就会响应computed里面的函数
我们能操作的也就只有data里面的数据和methods里面的函数调用
们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,(也就是依赖不变他不变)
只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
datechange:function(num){
this.starttime = moment(this.starttime).subtract(num,"months");
alert(this.starttime);
this.value1 = this.starttime;
}
2.原生模拟事件怎么写?
不要模拟事件,模拟事件一般分为两步骤:
active样式
事件处理程序
3.npm install echart 和 npm install ecahrt --save 的区别
4.微信分享出去的都是加了参数的,通过url判断页面就行,有参数的就把底边栏干掉
5.数据下载前端:当点击button的时候,数据下载开始,用ajax也可以,等下载完成之后,后台给自己一个flag,用回调函数接受
6.webstrom 最好使
最重要的 areaid 一定要引用 config里面的啊,这样才能达到 配置的效果,都写在业务 模块里面了,以后 换别的城市。。,还怎么改
另外 获取全市站点的 接口,公用一个就行了,我晚上引入 vuex吧,这个东西可以 用 vuex,不用每个模块都请求,然后,不用每个模块都引用 vue ,axios 之类的啊,
还有 ele ui,这些都在 mainjs里面全局引用了,还有 你的 el-row 和el-col 用错了啊,row是 行,col是列,先行再列