vue的指令
事件
这个指令式把事件绑定在这个上面
<div class="box1" v-on:click="handleDiv1" @mouseover="mouseoverFun" @mouseout="mouseoutFun">{{str}}</div>简写形式：
<div class="box2" @click="handleDiv2('点击了div2')">一个div</div>其他指令
<!-- .once修饰符：只触发一次回调 -->
<button @click.once="handleDiv2('触发了一次点击事件')">点我触发点击事件</button>
<hr>
<!-- .left修饰符：点击鼠标左键触发事件 -->
<button @click.left="handleDiv2('触发了一次点击事件')">点击鼠标左键</button>
<!-- .right修饰符：点击鼠标右键触发事件 -->
<button @click.right="handleDiv2('触发了一次点击事件')">点击鼠标右键</button>
<!-- .middle修饰符：点击鼠标中键触发事件 -->
<button @click.middle="handleDiv2('触发了一次点击事件')">点击鼠标中键</button>双向绑定
Vue双向绑定的实现基于其响应式数据系统，通过监听用户的输入事件和数据对象的变化事件，实现了视图和模型之间的双向同步。具体来说，Vue使用Observer来劫持数据对象的属性，监听其变化，并通知相关的视图进行更新。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 创建一个容器 -->
<div id="app">
<div>
<!--
v-model指令：双向绑定数据(调用了Object.defineProperty()方法)
-->
<form action="#" method="get">
<div>
用户姓名：<input type="text" name="userName" v-model="str">
</div>
<div>
用户性别：<input type="radio" name="gender" value="nan" v-model="gender">男
<input type="radio" name="gender" value="nv" v-model="gender">女
</div>
<div>
用户爱好：<input type="checkbox" name="hobby" value="sleep" v-model="hobby">睡觉
<input type="checkbox" name="hobby" value="eat" v-model="hobby">吃饭
<input type="checkbox" name="hobby" value="book" v-model="hobby">看书
</div>
<div>
输入内容：<textarea name="content" id="" v-model="str"></textarea>
</div>
<div>
下拉选项：<select name="sel" id="" v-model="selOpt">
<option value="opt1">option1</option>
<option value="opt2">option2</option>
<option value="opt3">option3</option>
<option value="opt4">option4</option>
</select>
{{selOpt}}
</div>
<div>
<input type="submit">
</div>
</form>
</div>
</div>
</body>
<script src="../js/vue.min.js"></script>
<script>
// 创建一个Vue实例
let vm = new Vue({
data(){
return{
str:"默认值",
gender:"nv",
hobby:[],
selOpt:""
}
}
})
vm.$mount("#app");
</script>
</html>Object.defineProperty()方法
在一个对象中新增属性或修改属性，并返回
第一个参数：属性所在的对象
第二个参数：要新增或修改的属性值
第三个参数：属性的一些配置项
configurable：表示该属性是否可以通过delete关键字删除
enumerable：是否能通过for in循环遍历该对象
writable：表示是否能修改值
value：表示属性的值(默认值)，默认值是undefined
let obj = {
uname: "张三",
age: 30
};
Object.defineProperty(obj, "uname", {
configurable: false,
writable: false,
enumerable: false
})
// delete obj.uname;
obj.uname = "李四";
console.log(obj);
for (let i in obj) {
// console.log("i:",i);
console.log(obj[i]);
}get/set
读属性时触发get，修改属性触发set
let obj = {
uname:"张三",
_age:18,
sex:"男"
}
// 当读取属性时，触发get函数，当修改属性时，触发set函数
Object.defineProperty(obj,"age",{
// 读取
get(){
console.log("触发了get");
return this._age;
},
// 写入(修改属性)
set(newValue){
console.log("触发了set");
if(newValue > 20){
this._age = newValue;
}
}
})自定义指令
全局自定义指令
Vue.directive("focus",{
inserted(el){
el.focus();
}
})局部自定义指令
let vm = new Vue({
data() {
return {
}
},
// 局部自定义指令
directives: {
"focus": {
// 当被绑定的元素插入到 DOM 中时……
inserted(el) {
// 聚焦元素
el.focus();
}
}
}
})
vm.$mount("#app");计算属性
计算属性：
1. 要用的属性不存在，需要通过已有属性计算得来；底层借助了Objcet.defineproperty()方法提供的getter和setter。
2. get函数什么时候执行？初次读取时会执行一次，当依赖的数据发生改变时会被再次调用
优势：
与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
注意：
计算属性最终会出现在vm上，直接读取使用即可
如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
如果计算属性确定不考虑修改，可以使用计算属性的简写形式
// 创建一个Vue实例
let vm = new Vue({
data() {
return {
firstName: "张",
lastName: "三"
}
},
// 普通方法
methods: {
},
computed: {
// 完整写法
// "fullName":{
// // 读取
// get(){
// console.log("触发了get");
// return this.firstName +"-"+ this.lastName
// },
// // 修改
// set(value){
// console.log("触发了set");
// let arr = value.split("-");
// this.firstName = arr[0];
// this.lastName = arr[1];
// }
// }
// 简写(只读取数据，不修改时可以使用)
fullName() {
return this.firstName + "-" + this.lastName;
}
}
})
// 绑定视图
vm.$mount("#app");监听方法
计算属性：得到一个不存在的属性
监听属性：监听一个已经存在的属性
let vm = new Vue({
data() {
return {
isHot: true
}
},
// 普通方法
methods: {
changeWeather() {
this.isHot = !this.isHot;
}
},
// 计算属性：得到一个不存在的属性
computed: {
info() {
return this.isHot ? "炎热" : "凉爽"
}
},
// 监听属性：监听一个已经存在的属性
// 方式一(创建实例的同时执行监听属性)
// watch:{
// // 简写形式
// // isHot(newValue,oldValue){
// // console.log("旧数据：",oldValue,"新数据：",newValue);
// // }
// // 完整写法
// isHot:{
// immediate:true,
// handler(newValue,oldValue){
// console.log("旧数据：",oldValue,"新数据：",newValue);
// }
// }
// }
})
// 监听属性：方式二(先创建实例，再执行监听属性)
/* vm.$watch("isHot", {
immediate: true,
handler(newValue, oldValue) {
console.log("旧数据：", oldValue, "新数据：", newValue);
}
}) */
vm.$watch("isHot",function(newValue, oldValue){
console.log("旧数据：", oldValue, "新数据：", newValue);
})
// 创建视图
vm.$mount("#app")
2712
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
