vue中小坑集合

vue中的大坑小坑

标签（空格分隔）： vue

---

#1.在VUE中 要使用data中的动态数据作为src或者style或者href等等的有引号的属性文本表达式；
都需要用v-bind;即：src :href…
例子：

<img src="data.url">

----------------------错误

<img :src="data.url">

---------正确，此时的data.url是动态数据

#2.iphone中常用的font-size;

font-family:‘PingFang SC’,‘STHeitiSC-Light’,Helvetical-Light’,arial,sans-serif;
逐一往后查找

#3.less中拼接字符串URl 及媒体查询方法写法;
例：

.bg-img(@name) {
background-image:url(’./@{name}@2x.png’);
@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){
background-image: url(’./@{name}@3x.png’)
}
}

#4，当子组件通过props获取父组件传过来的指的时候；想去操作父组件的数据时会遇到大坑！！！！

首先当父组件通过props传给子集一个存在父级的对象时；由于对象是引用类型；所以再子组件里修改props的数据是会改变父级的数据的！！（不需要再调用父级的函数进行修改）
但是还有一点，当子组件想要再父组件数据新增一条属性时，单用xx.shuxing=yy 是不会触发重新渲染的；
例如：

>  props: {
>     food: {
>       type: Object
>     }
>   },
>   methods: {
>     add: function () {
>       this.food.count += 1
>       this.$emit('foodcount', this.food)
>     },
>     sub: function () {
>       this.food.count -= 1
>       if (this.food.count < 0) {
>         this.food.count = 0
>       }
>       this.$emit('foodcount', this.food)
>     }
>   },

直接this.food.count = 1这样去增加新的属性是不能触发渲染的；

解决方法！！！；

created () {
this.$set(this.food{,}^{\prime }coun{t}^{\prime },0)this.$emit(‘foodcount’, this.food)
}

通过 this.$set(this.food, ‘count’, 0)这句话添加属性才可以！！

#5.再vue2.x之后有些api遭到弃用！！留下很多大坑！！；

##1.获取dom元素不在使用$el绑定也不使用$ref绑定，这些都废弃了；
而是直接使用ref="xxx"直接绑定，在js中使用KaTeX parse error: Expected 'EOF', got '#' at position 11: refs取到数据； #̲#2.dispch等发送数据的api被废弃！！
父级调用子集的方法直接使用ref绑定子集；用this.$refs.xxx调用；子级调用父级的方法直接用$emit发送事件 $on ==》即@xxx进行获取;

#6.一般来说父子组件间的通信用可以用$emit和props 来接收或者传送；
但是还存在非父子级组件之间的通信，这时候就需要用中间件了

解决方案如下：
再做外层的挂载函数下添加：
> new Vue({
> el: ‘#app’,
> router,
> template: ‘’,
> components: { App },
> data: {
> Hub: new Vue()
> }
> })
相当于生成了一个Hub中间件；

组件发送数据：
> this.$root.Hub.$emit(‘dropball’, evp)

另外组件接收数据：

  created () {
>     var _this = this
>     this.axios.get('/api/goods')
>     .then(function (response) {
>       _this.list = response.data.data
>       _this.$nextTick(function () {
>         _this._initScroll()
>         _this._getheight()
>       })
>     })
>     .catch(function (response) {
>       console.log(response)
>     })
>     this.axios.get('/api/seller')
>     .then(function (response) {
>       _this.seller = response.data.data
>     })
>     .catch(function (response) {
>       console.log(response)
>     })
>     this.$root.Hub.$on('dropball', function (e) {
>       _this.ballposition.left = e.left + 'px'
>       _this.ballposition.top = e.top + 'px'
>       // console.log(_this.ballposition)
>       _this.ballshow = true
>     })
>   },

#7.在使用$nextTick的时候需要特别注意this的指向是有变化的！！！！

#8.vue的api有的是针对全局的有的是针对实例的；例如：

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
vm.$watch('a', function (newValue, oldValue) 

这种写法就是应用在实例外部的；
若在内部可以直接用this指向

#9.Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

语法

Object.assign(target, ...sources)

第一个参数是目标参数；
第二个是源对象；
源对象会替换目标对象中的元素

#10：驼峰式命名 vs. 串联式命名(camelCase vs. kebab-case)

HTML 属性会忽略大小写(case-insensitive)，因此，在使用非字符串模板(non-string template)时，驼峰式命名的 prop 名称，需要转换为同等相应的串联式命名（连字符分隔）：