Day_06 Vue学习

最新推荐文章于 2023-06-02 09:27:52 发布

龍妞馨宁

最新推荐文章于 2023-06-02 09:27:52 发布

阅读量757

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43209850/article/details/122706051

版权

1.自定义指令

1.1函数式

指令与元素成功绑定时（一上来）
指令所在的模板被重新解析时

<body>
    <div id="root">
        <h2>当前的n值是：
            <span v-text="n"></span>
        </h2>
        <h2>放大10倍后的n值是：
            <span v-big="n"></span>
        </h2>
        <button @click="n++">点我n+1</button>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            n: 1,
        },
        directives: {
            // a是真实dom
            big(element, binding) {
                element.innerText = binding.value * 10;
            }
        }
    })
</script>

全局函数式指令

Vue.directive('fbind', function(element, binding) {
    element.innerText = binding.value * 10;
})

1.2对象式

<body>
    <div id="root">
        <h2>当前的n值是：
            <span v-text="n"></span>
        </h2>
        <h2>放大10倍后的n值是：
            <span v-big="n"></span>
        </h2>
        <button @click="n++">点我n+1</button>
        <hr>
        <!-- autofocus是自动获取焦点 -->
        <input type="text" v-fbind:value="n" autofocus>
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data: {
            n: 1,
        },
        directives: {
            //这个函数其实就是调用了bind和update
            // a是真实dom
            big(element, binding) {
                element.innerText = binding.value * 10;
            },
            fbind: {
                //往往bind和update都时一样的
                //指令与元素成功绑定时（一上来）
                bind(element, binding) {
                    element.value = binding.value;
                },
                //指令所在元素被插入页面时
                instered(element, binding) {
                    element.focus();
                },
                //指令所在的模板被重新解析时
                update(element, binding) {
                    element.value = binding.value;
                }
            }
        }
    })
</script>

指令的注意事项

当多个单词组成指令名称时，不能使用小驼峰命名，应该使用-连接

js应如下格式写：

//完整写法
'big-number': function(element, binding) {
                element.innerText = binding.value * 10;
            },
//简写形式
'big-number' (element, binding) {
                element.innerText = binding.value * 10;
            },

全局对象式指令

 Vue.directive('fbind', {
     bind(element, binding) {
         element.value = binding.value;
     },
     //指令所在元素被插入页面时
     instered(element, binding) {
        element.focus();
     },
     //指令所在的模板被重新解析时
     update(element, binding) {
         element.value = binding.value;
      }
  })

指令里的this全都是 window

配置对象中常用的3个回调：

(1).bind：指令与元素成功绑定时调用。
(2).inserted：指令所在元素被插入页面时调用。
(3).update：指令所在模板结构被重新解析时调用。

备注：
1.指令定义时不加v-，但使用时要加v-
2.指令名如果是多个单词，要使用kebal-case命名，不要用camelCase命名

2.Vue生命周期：

又名：生命周期回调函数、生命周期函数、生命周期钩子。
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期函数中的this指向是vm 或组件实例对象。

数据监测、以及数据代理创建、挂载、更新、销毁

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZUt1sXwC-1643189596020)(index_files/30676843-239a-4576-89fc-84fecf861b25.png)]

常用的生命周期钩子：

mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

当使用template来作为元素渲染的时候：必须加一个根节点

练习如下：

<body>
    <div id="root">
        <h2 v-text="n"></h2>
        <h2>当前的n值是：{{n}}}</h2>
        <button @click="add">点我n+1</button>
        <button @click="bye">点我销毁vm</button>
    </div>
</body>

<script>
    new Vue({
        el: '#root',//可以使用vm.$mount(el)
        template: `
        <div>
            <h2>当前的n值是：{{n}}</h2>
            <button @click="add">点我n+1</button>
        </div>`,
        data: {
            n: 1
        },
        methods: {
            add() {
                this.n++;
            },
            bye() {
                this.$destroy();
            }
        },
        beforeCreate() {
            console.log('beforeCreate')
        },
        created() {
            console.log('created')
        },
        beforeMount() {
            console.log('beforeMount')
        },
        mounted() {
            console.log("mounted")
        },
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        updated() {
            console.log('updated')
        },
        beforeDestroy() {
            console.log('beforeDestroy')
        },
        destroyed() {
            console.log('destroyed')
        },
    })
</script>

对于vue销毁的练习

<body>
    <div id="root">
        <h2 :style="{opacity}">欢迎学习Vue</h2>
        <button style="opacity=1">透明度设置为1</button>
        <button @click="stop">点我停止变换</button>
    </div>
</body>

<script>
    new Vue({
        el: '#root',
        data: {
            opacity: 1,
            a: false
        },
        methods: {
            stop() {
                this.$destroy();
            }
        },
        mounted() {
            console.log("motend", this)
                //自己追加属性
            this.timer = setInterval(() => {
                this.opacity -= 0.01;
                if (this.opacity <= 0) {
                    this.opacity = 1
                }
 
           }, 16)
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
    })
</script>