<!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">
<button @click="func()">点击</button>
<h1 v-num="sum"></h1>
<h1 v-num-ing="sum1"></h1>
<h1 v-num1="sum2"></h1>
<h1 v-num2="sum3"></h1>
</div>
</body>
<script src="../vue.js"></script>
<script>
var obj = {
name:"张三",
age:18,
sex:"男"
}
obj.sclNum = 202201;
obj["a"] = 100;
let numbers = 99;
Object.defineProperty(obj,"b",{
// value:99,
// enumerable:true,
// writable:true,
// configurable:true,
get(){
console.log("访问了");
return numbers;
},
set(value){
console.log("修改了");
numbers = value;
}
})
console.log(obj.b);
obj.b = 100;
console.log(obj);
// Vue的MVVM模型,数据代理
// MVVM与MVC区别
// 1.VM(vue)==C(调服务)
// 2.MVVM双向(双向绑定,数据代理),MVC单向(直接操作DOM)
// 3.MVVM(虚拟DOM)更快渲染,MVC单向(真实DOM)
// ---------------------
// 自定义指令
// 规则:1.定义指令名称时不要使用v-和驼峰,需要使用-连接,需要加引号
// 2.使用时需要v-
// 3.对象式
// "指令名":{
// 绑定成功触发
// bind(元素,绑定对象){},
// 插入页面触发
// inserted(元素,绑定对象){},
// 元素解析触发(值改变)
// update(元素,绑定对象){}
// }
// 4.函数式
// "指令名"(元素,绑定对象){}
// 1.局部自定指令
// directives,需要定义在Vue实例中
// 2.全局自定义指令
// directive,需要定义在Vue实例之前
Vue.config.productionTip = false;
Vue.directive("num2",function(element,binding){
// console.log(this);
element.innerHTML = binding.value+98;
})
Vue.directive("num1",{
bind(element,binding){
// console.log(element);
// console.log(binding);
// element.innerHTML = binding.value;
},
inserted(element,binding){
// console.log(element);
// console.log(binding);
element.innerHTML = binding.value+99;
binding.value = binding.value+99;
},
update(element,binding){
// console.log(element);
// console.log(binding);
element.innerHTML = binding.value+binding.oldValue;
binding.value = binding.oldValue;
}
})
var vm = new Vue({
el:"#app",
data() {
return {
sum:0,
sum1:1,
sum2:0,
sum3:1,
}
},
directives:{
"num-ing"(element,binding){
element.innerHTML = binding.value+200;
},
num:{
bind(element,binding){
// console.log(element);
// console.log(binding);
// element.innerHTML = binding.value;
},
inserted(element,binding){
// console.log(element);
// console.log(binding);
element.innerHTML = binding.value+100;
binding.value = binding.value+100;
},
update(element,binding){
// console.log(element);
// console.log(binding);
element.innerHTML = binding.value+binding.oldValue;
binding.value = binding.oldValue;
}
}
},
methods: {
func(){
this.sum++;
this.sum1++;
this.sum2+=2;
if(this.sum3%2==1){
console.log(11111111111);
this.sum3+=1;
}else{
console.log(2222222222);
this.sum3+=2;
}
}
},
})
</script>
</html>
大学生笔记
最新推荐文章于 2024-08-29 15:40:34 发布