20240920uniapp学习工作-vue

在指令参数上, 也可以使用 js 表达式, 需要包含在一对方括号内:

<view class="container">
	<text v-bind:[attributeName]="which_color">文本</text>
</view>

这里的 attributeName 会作为一个 js 表达式被动态执行, 计算得到的值会被用作最终的参数.

举一个页面例子是最好的方式:

<template>
	<view class="container">
		<text v-bind:[attributeName]="which">文  本</text>
	</view>
	<view>
		<button v-on:click="button_click">点击</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				attributeName:"style",
				colorOrSelectable:1,
				which:"color:red", 
			}
		},
		methods: {
			button_click() {
				if(this.colorOrSelectable == 1) {
					this.colorOrSelectable = 2;
				} else {
					this.colorOrSelectable = 1;
				}
				if (this.colorOrSelectable == 1) {
					this.attributeName = "style";
					this.which = "color:red";
				} else {
					this.attributeName = "selectable";
					this.which = true;
				}
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

绑定style时, 且文本无法选择

绑定selectable, 颜色恢复, 文本可以选择

学习前端最好的方法还是实测.

类似地, 也可以将一个函数绑定到动态的事件名称上:

<a v-on:[eventName]="doSomething"> ... </a>

eventName 可以是 focus, click 或自定义事件.

动态参数表达式因为某些字符的缘故有一些语法限制, 比如空格和引号, 在 HTML attribute 名称中都是不合法的.

<!-- 这会触发一个编译器警告 -->
<a :['foo' + bar]="value"> ... </a>

如果你需要传入一个复杂的动态参数, 推荐使用计算属性替换复杂的表达式. 计算属性后面学.

当使用 DOM 内嵌模板 (直接写在 HTML 文件里的模板) 时，我们需要避免在名称中使用大写字母，因为浏览器会强制将其转换为小写.

<a :[someAttr]="value"> ... </a>

上面的例子将会在 DOM 内嵌模板中被转换为 :[someattr]。如果你的组件拥有 “someAttr” 属性而非 “someattr”，这段代码将不会工作。单文件组件内的模板不受此限制。

修饰符 Modifiers​

修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()：

<form @submit.prevent="onSubmit">...</form> @ 是 v-on: 的缩写

修饰符后面再学.

下面是完整的指令语法:

指令名称: 以 v- 开头, 使用简写时会省略.

参数: 在冒号或简写符后面.

修饰符: 前面的点符号启示的内容.

值: 解释为 js 表达式.

vue 有两种 API 风格, 我们公司用的选项式. 

用选项式 API 时, 会用 data 选项来声明组件的响应式状态.

data 选项的值应为返回一个对象的函数,即 data().

vue 在创建新组件实例的时候会调用此函数, 并将函数返回的对象用响应式系统进行包装.

data() 函数返回的对象的所有顶层属性都会被代理到组件实例 (即方法和生命周期钩子中的this) 上.

export default {
  data() {
    return {
      count: 1
    }
  },

  // mounted 是生命周期钩子，后面会学到
  mounted() {
    // this 指向当前组件实例
    console.log(this.count) // => 1

    // 数据属性也可以被更改
    this.count = 2
  }
}

也可以不在 data 上定义, 直接向组件实例添加新属性, 但这个属性将无法触发响应式更新.

vue 在组件实例上暴露的内置 API 使用 $ 作为前缀, 它同时也为内部属性保留 _ 前缀. 因此, 应该避免在顶层 data 上使用任何以这些字符作前缀的属性. 有点像关键字和保留字.

JS Proxy

​JavaScript Proxy：更加灵活和强大的对象代理-腾讯云开发者社区-腾讯云 (tencent.com)

JS 的 Proxy 是一种对象代理机制, 它可以在对象和函数之间添加一个中间层, 从而实现对对象和函数的拦截和控制. 

Proxy 可以用于拦截对象的读写、函数的调用、属性的枚举等操作, 并在拦截时执行自定义的操作.

使用 Proxy 可以实现各种高级功能, 例如数据绑定、事件监听、缓存等.

Proxy 的基础语法:

let proxy = new Proxy(target, handler);

其中, target是要被代理的目标对象, handler 是一个对象, 用于定义拦截目标对象的各种操作的行为. handler 对象可以包含以下方法:

• get(target, prop, receiver)：拦截对象属性的读取操作, 第三个参数没搞懂, 下班了先.

<template>
	<view class="container">
		
	</view>
	<view>
		<button v-on:click="button_click">点击</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				eventName:"longpress‌", 
			}
		},
		methods: {
			button_click() {
				const originObj = {
					name:"lee",
					sex:"女"
				};
				
				// 定义一个用于处理属性读取操作的处理器对象
				const handler = {
				  get(target, property,receiver) {
				    // 当尝试读取属性值时，会调用这个方法
				    console.log(`读取属性：${property}`);
					return target[property]; // 返回属性值
				  }
				};
				
				 
				// 创建一个代理对象
				const proxy = new Proxy(originObj, handler);
				 
				// 设置一些属性和值
				proxy.name = 'zhang';
				// proxy.sex = "雄";
				 
				// 读取属性
				console.log(proxy.name); // 读取属性：name
				console.log(proxy.sex); // 读取属性：sex
			},
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>

点击后打印结果:

周末愉快.