vue除了有v-if等内置指令,我们也可以创建自定义指令. 例:我们可以实现一个可以每隔一秒闪烁的节点,类似于<blink>标签的行为.添加一个指令类似于添加一个过滤器,可以将他传入vue实例或组件的directives属性,或者使用vue.directive()注册一个全局指令.传入指令的名字以及包含钩子函数的对象,这些钩子函数会在设置了该指令的元素的生命周期的各个阶段运行. <div v-blink>闪烁的盒子</div> Vue.directive('blink'…

自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而,有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令. 自定义指令相当于为元素添加一个自定义属性,只不过是以v-开头的 自定义自定义指令的语法 注意:在vue中使用时候,要加上v-,在定义的时候,要去除v- 自定义指令和自定属性,当元素渲染的时候该属性会被删除,后者不会被…

官方链接:http://doc.vue-js.com/v2/guide/custom-directive.html#simplest-directive-example 在main.js中注册自定义指令 v-input 注意:自定义指令要写在实例初始化之前 定义模板,在模板元素上使用新的 v-input 指令 想实现的效果:1.当页面加载时,该input元素将自动获得焦点:2.在输入框输入数字,当输入字数为6~10位时边框变为红色,其他情况下为蓝色:…

1.v-if和v-show v-if 和v-show都可以显示和隐藏元素: 区别:(1)v-if初始值为false那么这个元素不会被渲染 ,v-show不管初始值为何值都会被渲染 (2)v-if是控制DOM元素是否插入,v-show是控制css的display属性 (3)v-if适合隐藏尚未加载的内容或切换显示与隐藏频率较低的地方,v-show反之; 此外还有两个条件语句和v-if有关:v-else-if ,v-else <div v-if="state==='loading'"…

1.响应式 vue修改了每个添加到data上的对象,当该对象发生变化时vue会收到通知,从而实现响应式.对象的每个属性都会被替换为getter,setter方法. 有两种方式实现data对象的监听 (1)脏检查:通过存储这个对象副本,然后比较两者,但这种方法并不高效. (2)使用Objectf.defineProperty(),以下是vue的基本思路 const storedData = {}; storedData.useId = data.useId Object.definePropert…

1.ref ref可以直接访问元素,而不需要使用querySelector或者其他dom节点的原生方法. <div ref = "box"></div> 在js中,这个原生会被存到this.$ref这个对象中,对应的键名就是为这个元素的ref属性设置的值  使用this.$ref.box访问这个元素 在组件中这个属性尤为有用.同一组件的代码可能在页面中出现多次,这从根本上不能为组件内的元素添加唯一类名而使用querySelector来选择该元素,相比之下ref只…

过渡和动画 使用<transition> 组件包裹 例: <transition name="fade"> <div v-if="true">过渡动画</div> </transition> style:.fade-enter-active, .fade-leave-active {transition: opactiy .5s} .fade-enter, .fade-leave-to{opacity:0;…

vue-router 1. 底层原理 hash 或者h5 histroy(有兼容性) 2. 使用的时候Vue需要引入VueRouter Vue.use(VueRouter) //VueRouter 底层实际上是instal 安装了两个全局的组件 router-view 和router-link 默认路由:  {     path:'/',     //component:Home //默认页   //  redirect:'/home'      redirect:{name:'home'}  …

第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件封装等,再配合前面的Nodejs后台,实现一个完整的项目. 指令 上一章我们讲的 以v开头的属性都是vue的指令, 比如 v-bind 除了上一章的指令,大家再掌握以下指令  v-on绑定事件   基本格式       v-on:事件名="方法名"…

自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: inserted: update: componentUpdated: unbind: 自定义指令的使用:在自定指令的名称前加 上 v-: 自定义指令的详细介绍网址:https://cn.vuejs.org/v2/guide/custom-directive.html 下面是关于这个5个钩子函数的示例:…