vue基础2

最新推荐文章于 2022-11-05 17:57:55 发布

zhangxiaobai___

最新推荐文章于 2022-11-05 17:57:55 发布

阅读量346

点赞数 2

文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/zhangxiaobai___/article/details/127013425

版权

本文介绍了Vue.js的基础知识，包括自定义指令用于操作DOM和第三方插件，管道或过滤器用于数据格式化，组件的定义、注册、使用和参数传递，以及组件插槽的概念。此外，还详细讲解了Vue.js中的动画实现，如transition组件的使用和动画组transition-group的应用。

摘要由CSDN通过智能技术生成

1.自定义指令 directive

作用：操作dom，或操作第三方基于dom的插件

html代码

<div id="app">
    <input type="text" v-focus="flag">
    <button @click="flag=!flag">更换</button>
</div>

js代码

var vm=new Vue({
    el:"#app",
    data(){
        return{
            flag:false
        }
    },
    directives:{
    //自定义v-focus指令
        "focus":{
        //当被插入的时候用inserted
        //只绑定一次 bind
        //更新时候运行update
            update(el,binding){
                //el对应的节点
                //binding.value指令的值
                console.log(el,binding);
                if(binding.value){
                    el.focus();
                }
            }
        }
    }
})