vue使用心得笔记--自己总结使用

写在前面

     vue的写法和逻辑和微信小程序的使用很相似,自己写项目过程中一些小点总结一下,方便查阅,如果对他人有些许帮助那就更好了

1.vue做if判断的时候 , 由于使用了v-for循环 做个别标签判断的时候 使用了 v-if="{{item.code}}==1"  报错了,检查发现,在v-if中不能用插值表达式 , 可以直接写 v-if="item.code==1"  然后成功实现 ; .

2.vue绑定元素背景图图片链接的时候 如何拼接的问题

<div style="width:50px;height:50px;border-radius:50%;" v-if="avatar" :style="{'background':'url('+avatar+') no-repeat center center','background-size':'cover'}"></div>

需要把style后边的样式用大括号包起来,分开隔成字符串 , 多个background样式直接用逗号分隔即可

3.vue页面由多个组件组成，想要刷新某一个组件（具体是修改头像，在主页中同步修改）

在改组件 <bar v-if="status" /> 用v-if判断，status默认是true  根据传过来的值

data:{ status:true }

// 先把状态设置为false 使用$nextTick方法紧接着重新赋值为 true 实现了

this.status = false
this.$nextTick(function() {
   this.status = true
})

4、forEach 进行循环操作，加入if判断时，赋值操作不生效的问题

     一般都是this指向造成的，可以在forEach之前声明一下this指向就可以解决了

5、一些默认的组件 点击事件不生效  需添加.native监听

        例如：下拉组件

<el-dropdown-menu slot="dropdown">
    <el-dropdown-item @click="showDialog">黄金糕</el-dropdown-item>
    <el-dropdown-item>狮子头</el-dropdown-item>
</el-dropdown-menu>
// click点击事件不生效

// 需要添加.native后生效 （.native 就是监听根元素的原生事件，然后给自定义组件添加原生事件）
<el-dropdown-menu slot="dropdown">
    <el-dropdown-item @click.native="showDialog">黄金糕</el-dropdown-item>
    <el-dropdown-item>狮子头</el-dropdown-item>
</el-dropdown-menu>

6、elment ui table组件 多选事件监听

默认多选可点击 thead栏 复选按钮切换  ，其他自定义事件监听  可直接调用clearSelection()事件

this.$refs.multipleTable.clearSelection() // 调用取消或者选中

7、elment ui   el-popover组件  弹窗宽度设置不生效（默认最小宽度150）

el-popover组件的层级较高，老脚手架需要在main.vue中设置，现在常用的脚手架需要在public文件index.html文件中 style设置 {.el-popover:min-width:80px;}

8、elment ui   el-input组件或数字输入框el-input-number 无法输入或数字输入框加减只能触发一次的问题

el-input:绑定事件onInput 调用this.$forceUpdate();
el-input-number:可以同上绑定事件change,调用force事件，如果不生效，那就给number默认赋值时使用$set赋值替代直接=赋值；