vue 使用心得---工作中一些关键点
2024-09-04 00:03:20
1、自定义组件 使用 v-for 循环，最好另外多加上 v-bind:key="items_name",这是特殊用的:key,而不是普通的 :属性
例：<Uiroom> 循环 v-bind="items" 是普通传入一个对象，v-bind:key 循环特殊键值
<Uiroom
v-for="items in Roomsmsg"
v-bind:key="items"
v-bind="items"
@click.native="OnUiRoomClick(items.name)"
></Uiroom>
data () {
return {
pagetitle: '总览信息',
Roomsmsg: [
{
name: '1001'
},
{
name: '1002'
},
{
name: '1003'
}
]
}
},
2、为了简单通用的点击事件，可以将组件绑定到根元素原生DOM事件，加 .native。 例如 @click.native
3、vue 组件对象属性的监听须要用到深度监听 handler(), deep : true
watch: {
name: function (newvalue, oldvalue) {
this.Roomdata.Roomname = newvalue
console.log(this.Roomdata.Roomname + '发生变化')
},
outs: function (newvalue, oldvalue) {
this.Roomdata.outs = newvalue
},
keys: function (newvalue, oldvalue) {
this.Roomdata.keys = newvalue
},
airs: { // 对象要深度监听
handler (newvalue) {
// console.log(newvalue.toString() + 'airs发生变化')
// this.Roomdata.Roomairs = newvalue
// 我们可以根据 Obj.x !== undefined 的返回值 来判断Obj是否有x属性。
if (newvalue.POWER !== undefined) this.Roomdata.Roomairs.POWER = newvalue.POWER
if (newvalue.ATO !== undefined) this.Roomdata.Roomairs.ATO = newvalue.ATO
if (newvalue.SPEED !== undefined) this.Roomdata.Roomairs.SPEED = newvalue.SPEED
if (newvalue.MODE !== undefined) this.Roomdata.Roomairs.MODE = newvalue.MODE
if (newvalue.TMP !== undefined) this.Roomdata.Roomairs.TMP = newvalue.TMP
if (newvalue.STMP !== undefined) this.Roomdata.Roomairs.STMP = newvalue.STMP
},
deep: true // 对象要深度监听
}
}
4、vue 新增属性需要动态添加响应
Vue.set(object, propertyName, value) ,,在实例(事件回调函数)中使用 thst.$set(object, propertyName, value) 6、vue 删除或清属性 Vue.delet(object, propertyName/index) ,,在实例(事件回调函数)中使用
thst.$set(object, propertyName, value) 5、vue 动态绑定 img 需要加 require 例如 <img v-bind:src="require('../assets/door.svg')" />
7、变量表示路径的方式
var path = require('path'); // 引入 path 模块，并指向局部变量 path
path.join(__dirname, 'views'); // join 方法设置 path 相对路径为 views
8、Vue 强制跳转到指定页---以登录页为例
window.location.href = '/login' // 跳转到login 页
最新文章
- NYOJ 998
- Redis-cli命令最新总结
- Redis教程(一)：Redis简介
- 分析Linux内核创建一个新进程的过程
- linux 使用rpm安装软件时,遇到"warning: rpmts_HdrFromFdno: Header V3 RSA/SHA256 Signature, key ID fd431d51: NOKEY "错误
- C/C++代码中的笔误
- Java里面instanceof怎么实现的
- tj
- Java基础知识强化之集合框架笔记06：Collection集合存储自定义对象并遍历的案例
- WinForm窗体设置
- CSS 3 属性学习大纲
- 使用file_get_content系列函数和使用curl系列函数采集图片的性能对比
- gitlab与jenkins的自动化部署(通过webhook与ansilble)
- python爬虫爬取人人车（二手车）、利用padas、matplotlib生成图表，将信息打成csv格式
- Linux分页机制之概述--Linux内存管理(六)
- Python——Microsoft Office编程
- .net core支持的操作系统版本
- 项目实战02：LNMP的搭建、nginx的ssl加密、身份验证的实现
- 用git如何把单个文件回退到某一版本
- Sentinel统计线程，QPS，RT的方式