vuejs2点滴

在Vue定义一个不被添加getter setter 的属性：

https://github.com/vuejs/vue/issues/1988 

博客：

0.vux的x-input源码分析。

http://www.cnblogs.com/coding4/p/7509282.html

1.在vue中，如何通过触发一个dom节点的click事件触发另一个dom节点的click事件？

https://www.zhihu.com/question/51989820

2.从数据结构着手，做关注的话，你的数据中得有关注这个字段

https://segmentfault.com/q/1010000006990991

3.iview应该学习的一些东西；

http://www.jianshu.com/u/ab510d028207

4.vue源码学习的博客：

http://hcysun.me/2017/03/03/Vue%E6%BA%90%E7%A0%81%E5%AD%A6%E4%B9%A0/

5.vue弹出窗的理解哈哈。http://www.jb51.net/article/92436.htm

https://segmentfault.com/a/1190000006849814

以下是vue中躺过的坑。

1.this.$ref 有时间多尝试这种用法。

2.@click.natvie @click.self 

3.在webpack入口的js上导入是全局导入，在内部vue 的script标签导入是局部导入 ，import 和require 一样

4.现在试验的结果是，如果我们在main.js的导入文件中，import $ from 'jquery'，在局部的组件中使用$还是会报错，所以在每次的局部组件中还是需要引入$的。

如果我们在引入cdn的话，在局部的组件中就不知道了。有时间测试。

5.为什么wos的全局的variable.less文件在每个.vue的style都导入？

其实webpack最后结果是一样的，只会导入一次 但是再写vue文件的时候，less是要编译然后热更新的 有些模块不需要variable.less，就不用去编译它。速度自然会快一点。对于大项目就能看出来明显的速度了。

6.vuex中利用，store,直接发起ajax的请求

过去类似cookie

7. v-show中可以使用this.$store但是在@click中就不可以使用this.$store，必须使用$store.state

8.vue.resource

https://segmentfault.com/a/1190000007087934

9.vuex

http://www.cnblogs.com/lyz1991/p/5568801.html

10.vue组件中如果有加载一个<hahaVue/>

这样的组件的话， 那么在父组件中写样式的话（有scoped）那么子组件是没有效果的。

11.

http://www.cnblogs.com/lvyongbo/p/5946271.html

12.zh这里有时候需要{}有时候不需要括号的，这个我不知道为什么。

13.vue2官方组件库。

https://github.com/vuejs/awesome-vue#libraries--plugins 

14.vue 父给子传递数据的时候，使用props传递数据。会产生警告。

https://i.cnblogs.com/EditPosts.aspx?postid=6411807

http://www.jb51.net/article/98881.htm

这个问题我至今没有解决 

15.在components，props这些传值的时候小心报错，各种对象还是数组，需要''不需要点的。

16.写一个鼠标悬停后2秒移除的效果，vue各种坑。

 有事情清楚的话，必须用clearTimeout，直接==Null是不行的。

17.这个是什么鬼。

 

这个是什么鬼。

18.一个vuex学习的网站。

https://www.lambda-study.com/articles/doc/592e7c612beffe0cd1ace950 

19.watch的多种用法。

http://www.cnblogs.com/dupd/p/5887907.html

20.今天遇到一个特别奇怪的问题，但是这个奇怪的问题帮我解决了一个难题,以后有时间在看看吧，我感觉是extend的问题哈。

<template>
	<div class="titleTip" v-show="options.show">
		<div class="arrowNew"></div>{{options.content}}
	</div>
</template>
<script type="text/javascript">
	import $ from 'jquery'
	export default {
		name : 'titleTip',
		props:["options"],
		data(){
			return {
				show:false
			}
		},
		computed:{
			optionsDefault(){
				var that = this;
				var optionsDefault  = {
					zIndex: 10,
    				position:' absolute',
					right:'-122px',
					top:'8px',
					content:"这是一个小提示哈哈!",
					show:false,
					arrow:"left"
				}
				//optionsDefault = this.options;
				optionsDefault = window.tools.extend({},optionsDefault,this.options);
				return optionsDefault;
			}
		},
		watch:{
			optionsDefault(newValue,oldValue){
				var that = this;
				window.haha = that.optionsDefault.show;
				if(that.optionsDefault.show==true){
					setTimeout(function(){
						that.options.show = false;
						//that.show = false;
						//that.optionsDefault.show==false;

					},2000)
				}
			}
		},
		mounted(){
			var that = this;
			$('.titleTip').css(that.optionsDefault);
			if(that.optionsDefault.arrow=="left"){

			}else if(that.optionsDefault.arrow=="right"){

			}else if(that.optionsDefault.arrow=="top"){

			}else if(that.optionsDefault.arrow=="bottom"){

			}
		}
	}
</script>
<style type="text/css">
	.arrowNew{
		display:inline-block;
		position: absolute;
		0;
		height:0;
		border-top:6px solid transparent;
		border-bottom:6px solid transparent;
		border-right:6px solid;
		color: rgba(70,76,91,.9);
		left: -5px;
	}
	.titleTip{
		max- 250px;
	    min-height: 34px;
	    padding: 8px 12px;
	    color: #fff;
	    text-align: left;
	    text-decoration: none;
	    background-color: rgba(70,76,91,.9);
	    border-radius: 4px;
	    box-shadow: 0 1px 6px rgba(0,0,0,.2);
	    white-space: nowrap;
	}
</style>

这里有一部that.options.show= false;

这里的虽然options从父那里继承来的，但是这个属性单项绑定，我们这样子是改变不了父元素的属性的，所以说这样子还是只是改变子组件内部的东西。

21.如果你父调用子的话，可以用refs但是如果子调用父的方法的话。

eventHub　

this.$root.eventHub.$on('registerToLoginEvent', ()=>{
//handle(yourData)
this.modalLogin = true
})
//开始轮训请求后台监测是否支付成功
that.$root.eventHub.$emit('shopStartEvent')

22.

login.vue包含register.vue

login.vue和register.vue都有titleTip这个插件。

因为有了这句代码导致所有的.titleTip的样式都相同了。

23.
vue.common.js?c9e6:436 [Vue warn]: Unknown custom element: <router-view> - did you register the component correctly?

因为没有添加。Vue.use(Router);

24.我们来写一个最简单的带路有例子哈。

a.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title> vux2 多页面测试 </title>
  </head>
  <body>
    <div id="app">
		<router-view></router-view>
	</div>
    <!-- built files will be auto injected -->
  </body>
</html>

　　

a.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import Add from './addApp'
import List from './listApp'



const routes = [
  { path: '/', component: Add },
  { path: '/list', component: List }
]

Vue.use(VueRouter)

const router = new VueRouter({
  routes:routes
})


new Vue({
  router: router
}).$mount('#app')

25.export default 和export 的区别和联系。

http://blog.csdn.net/zhou_xiao_cheng/article/details/52759632　　

相信很多人都使用过export、export default、import，然而它们到底有什么区别呢？ 
在JavaScript ES6中，export与export default均可用于导出常量、函数、文件、模块等，你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用，但在一个文件或模块中，export、import可以有多个，export default仅有一个。 
具体使用： 
1、

//demo1.js
export const str = 'hello world'

export function f(a){
    return a+1
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

对应的导入方式：

//demo2.js
import { str, f } from 'demo1' //也可以分开写两次，导入的时候带花括号
  • 1
  • 2
  • 1
  • 2

2、

//demo1.js
export default const str = 'hello world'
  • 1
  • 2
  • 1
  • 2

对应的导入方式：

//demo2.js
import str from 'demo1' //导入的时候没有花括号

26.Router命名就行，但是VueResource这样子命名就不行。

27.这里我们需要明白这里的headerCom 这里边写v-model这里来说是不对的，但是iview这里就是可以的，应为iview是自己定义的标签，不是组件，学习一个iview的渲染方法。

 28.http-server的使用方法

http-server -cros -P http://172.16.2.21:8080

29.第一次用native，这里iview的标签如果不用.native的话，步骤不到@click.native事件。

 30.window.location.href可以的，但是window.location.open就是不行的

 31.有时间研究一下，vue2 中的render函数。

32.今天遇到这样一个问题：

我在new Vue赋值给另一个window.vmT中。

我们发现在mounted中，必须放在setTimeout0中可以访问到。唯一的解释是new Vue没有渲染完成。

 33.你的一个js已经编译了，所以不能再另一个cms.js中再去引用他

Module not found: Error: a dependency to an entry point is not allowed

 34. 有时间研究下iview的下拉框。

 35.vuex 常用的代码

import { mapState,mapActions } from 'vuex'
computed:{
    ...mapState({
         pay: ({pay}) => pay
    })
},
...mapActions([
     'getApps'
]),
//在module中的用法
import {
  SET_ORDER_DATA,
  REPONSE_SUCCESS,
  REPONSE_FAIL
} from '../types'

import api from '../../api/index'

const state = {
  //用于支付的几个需要的参数
  barcodeShow:false,//点击购买的时候，弹出二维码的弹窗
  barcodeUrl:'',//后台传过来的二维码的base64的地址
  vipInfo:'',//会员信息
  mealPayIndexCounselShow:false,//mealPayIndex路由下边 两个地方都用到
  orderId:'',//订单详情
  orderSucessData:{},//订单成功数据
  shopRoute:'',//保存购买成功前的路由
  userInfo:{}
}
const mutations = {
  [SET_ORDER_DATA](state,data){
  	state.orderSucessData = data;
  },
  [REPONSE_SUCCESS](state,data){
    state.orderSucessData = data;
  },
  [REPONSE_FAIL](state,data){
    state.orderSucessData = data;
  },
  aa(state){
    state.mealPayIndexCounselShow = true;
  },
  mealPayIndexCounselShow(state){
    state.mealPayIndexCounselShow = true;
  }
}
// actions
const actions = {
  getApps ({ commit }){
    api.apps().then(function(data){
      //commit(SUCCESS_GET_APPS, { apps: response.data.data })
    }).catch(function(e){})
    /*api.getApps().then(response => {
      if(!response.ok){
        return commit(FAILURE_GET_APPS)
      }
      commit(SUCCESS_GET_APPS, { apps: response.data.data })
    }, response => {
      commit(FAILURE_GET_APPS)
    })*/
  }
}

export default {
  state,
  mutations,
  actions
}

　目录结构：

store.js中的代码：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import pay from './modules/pay.js'
import common from './modules/common.js'

const debug = process.env.NODE_ENV !== 'production'
Vue.config.debug = debug
Vue.config.warnExpressionErrors = false
export default new Vuex.Store({
  modules: {
    'pay':pay,
    'common':common
  },
  strict: false
})

　36. 这种方式的打包必须使用npm install

"idata3d-webapp-main":"/Users/jinyunyan/Desktop/svn/idata3d-webapps/idata3d-webapp-main",　

 37.$router.push

http://blog.csdn.net/sinat_17775997/article/details/68941091

38.监听vuex 中state某个值的改变

http://www.tuicool.com/articles/UvQR3qq

39.vuex dispatch方法有两个用处。

在$store调用.dispatch方法然后,返回的promise对象，可以直接执行.then方法。 

另一个用处在action的里边

await这个方法可以等待异步完成。

40.vue不兼容jquery的地方

当我们的代码中可以执行$，但是在我们的控制台$就会失去效果。

41.

以前一直为什么时候用url传参，什么时候用localstorage，而烦恼，今天在偶然间写代码的时候，遇到了这个问题，类似的问题，为什么要用vuex，是不是所有的对象都经过vuex好，为什么不把所有的对象都放到window对象下，为什么前后端一定要设置相同的配置文件，如果不配置的话，有没有什么比较好的方法避免，个人意见，只有涉及到可能出现修改的变量，才会考虑vuex，或者多个页面共用的变量时，建议直接放window就可，别想太多，url的方式适合传静态的或者写死的一些变量，如果涉及到刷新的话，刷新面临你在其他页面设置的window变量失效，vuex也同样失效，这样的话我们必须考虑到localstorage，或者websql之类的，还有前后端的配置，让我拿汉字直接当key用，倒是简单，在浏览器的url上传的时候，娶不到，我像了各种方法，也可能是当时脑子懵了，明天去的在看看，

42.iview table严重的bug。

用icon图标的时候发现触发不了onclick事件，必须包一层其他的元素比如div,span,或者btn之类的。

43. v-model="!redcar.compareValueSecondShow" 这样子写是不行的v-show="!(redcar.compareValueFirstShow)"

44.vue事件，特别注意vue的自定义事件。

http://www.tuicool.com/articles/au2AJbm 

45.vuex变量在刷新之后会消失的。

刷新之后两次都打出来12.

46.那么在页面跳转的时候回消失么。路由跳转的时候不会消失。

47.用一个日期插件，你会发现监听绑定的事件和监听数值watch的方法都行，但是事件方法比watch快一些。这两个功能有重复了。

48.在mounted中调用方法改变值，在watch是可以监听到的。

49.有时候你发现$refs找不到了，因为你在生命周期中的ready中调用了。

50.有时候你发现在ready中调用方法有时候会有异常。

因为ready的时候，data可能绑了，但是methods有可能没有绑。你需要把methods中的代码放到ready中执行。

51.watch和computed。

两个都有监听类似的效果，

computed在里边的值改变的时候，return也会改变。

watch在值改变的时候监听到了。

52.这两个有本质的区别。v-model是绑定。 双向的可以用watch。 但是:value就不行了，只能通过事件去获取改变的值。

:data是向子级传数据了。

v-model是双向绑定了。

:value这个就不知道了。

52.beforeMount中改变的变量在watch中也可以监测到。

53. vue子组件调用父组件的方法。

http://www.cnblogs.com/caik13/p/6896890.html

54.vue-loader这个会依赖于postcss这个模块，这样子的话，我们写的css，会帮助我们自动抹平一些兼容性的问题。

55.这里的router还可以这样配置，我也是第一次见。

 56.v-if 与v-for的区别和联系。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

 57.怎么解决两个inline-block之间的距离，可以把父元素的font-size设置为0，然后在设置子元素对应的宽和高。
58.一个图片和一排文字在一横，发现怎么都不能对齐的时候，我们的方法，先设置vertical-align:top;然后调一个的margin-top
59.如果两个display:inline-block之间有距离除了上面说的，把父的font-size设置为0，我们还有其他的办法来解决，就是把两个span标签紧挨着，不留任何空隙。
 60.在flex布局中。
如果父是display:flex;
子最好用div，用span有问题再android上。
61.

这个optimize的OccurenceOrderPlugin这个的作用优化下，这个优化是把经常使用的模块放在优先位置，使他能优先使用。

62. 这个插件的作用是跳过执行的那行代码，定位出来它，并且包还能继续往下执行。

63.这种中间件的作用就是，开发的时候把，对应的目录放到内存下，然后我们也可以访问到。

64.vue路由

http://www.cnblogs.com/dmcl/p/6138389.html

http://www.cnblogs.com/mingweiyard/p/6744222.html

 65.这个背景的模糊。实现方法，来个背景图片，然后在子元素来个absolute，然后下边就行。

z-index: -1
filter: blur(10px)

z-index: -1
filter: blur(10px)

 

 66.track-by="$index"

 67.

 68.ios下有模糊的效果。

 69.设置了flex又设置width是为了android的兼容性问题。

 70.this.$nextTick

71.vue2关于父子传值和双向绑定。

（1）父给子单项传值，通过props值,代码：

<div id="app">
    <modal :haha="haha"></modal>
</div>
components:{
  'modal':{
    'template':'<div>hahayan</div>',
    'props':['haha'],
    data () {
      return {
        visible:true
      }
    },
    mounted(){
      this.haha = "1234";
      alert(this.haha);
    }
  }
},

 这样子改变父元素传过来的值，会导致报警告。

 所以说我们一般不改变父元素传过来的值，如果说要改变，那么你可以新创建一个值，然后把父传过来的值付给它就行。

（2)通过computed属性，监测父元素的传过来的值，有类似watch的效果。（watch在改变的时候才会有，第一次复制是不会触发的，但是computed在第一次赋值的时候就会触发）

 但是你会发现通过computed的值 ，好像无法改变了。

请看这边博客：https://segmentfault.com/q/1010000004571556

这个是computed的两种写法

如果你不写set方法的话，你会发现你的=赋值操作没有任何意义。

  (3)通过watch去监听。watch监听也有两种方法。

   http://www.cnblogs.com/dupd/p/5887907.html

  第一种用法中，传一个参也可以用。

（4双向绑定。

良心博客

http://www.cnblogs.com/wwlhome/p/6551165.html

https://segmentfault.com/a/1190000008662112

 方法1.

 方法2.

 72.监测全局store状态的改变。

 73.vue懒加载 ，原来只有一个app.js现在生成多个了。

这个截图是一个简单的实现。

http://blog.csdn.net/yangbingbinga/article/details/61417689

74.better-scroll真的会导致pc端点击产生两次。

better-scroll

http://blog.csdn.net/qq_35844177/article/details/54629666 

 75.这个non-primitive这个因为

76.或许可以用$event里边的bubbles组织冒泡

 77.这两个是可以共存的。

 78.特别注意

http://localhost:8080/#/

http://localhost:8080/index.html#/

79.vue动画

http://www.cnblogs.com/jiangxiaobo/p/6076652.html 

80.当路由传过去值的时候，可以通过this.$route.query.key去获取对应的值。

81.vue路由重定向

http://blog.csdn.net/lemon_zhao/article/details/55509903

82.v-for循环的时候，如果把遍历出来的值放到方法里。

 83.对于vue中相同组件同事出现同样的ajax请求,但是这些ajax请求的结果都是一致的，这些结果应该放到vuex或者全局变量中。请求之前先进行判断是否存在。

84.这么监听state中的数据的变化

 85.vue的过滤器的使用。

http://blog.csdn.net/weiweismile123/article/details/70226319

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/coding4/p/6811978.html