今日份笔记

最新推荐文章于 2024-06-15 21:40:09 发布

宝仔

最新推荐文章于 2024-06-15 21:40:09 发布

阅读量321

点赞数 4

文章标签：笔记 vue.js 前端

本文链接：https://blog.csdn.net/weixin_73059608/article/details/137478387

版权

<!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>

宝仔

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
今日份笔记

/ 规则：1.定义指令名称时不要使用v-和驼峰，需要使用-连接，需要加引号。// 2.MVVM双向(双向绑定，数据代理)，MVC单向(直接操作DOM)// 3.MVVM(虚拟DOM)更快渲染,MVC单向(真实DOM)// inserted(元素,绑定对象){},// update(元素,绑定对象){}// bind(元素,绑定对象){},// 1.VM(vue)==C(调服务)// "指令名"(元素,绑定对象){}// 元素解析触发(值改变)// "指令名":{
复制链接

扫一扫