木灵鱼儿
阅读:2246
入门基础
v-if/v-else
看书上说v-show也可以和v-else配合使用,实际上并不行。
:style 也支持三元判断,和:class一样,三元需要加个括号,然后里面如果是普通的string值需要用引号括起来,不然会认为是对象或者Vue对象的属性方法那些,从而报错。
例子:
<div :class="['one',(isFlag?'two':'three')]"></div>
<div :style="{'font-size':(isFlag?'16px':'20px')}"></div>
v-for
需要为每个循环出来的对象加上:key=“index”,index就是对应的下标
v-text
{{msg}} == v-text,但是v-text可以避免在内容还未更新时先出现{{msg}}这个字符,然后再被替换成对应文本的闪现。
v-html
原来可以通过{{{data}}}的方式来插值,现在不行了,只能通过指令
v-el
2.0放弃了这个方法,使用rel=“xxx”来获取对应的dom元素,然后通过$refs.xxx来获取对应的dom对象,如果在vue对象里面就使用this.$refs.xxx如果再外面,就使用实例的名字.$refs.xxx来获取
注意,title-h2表示驼峰命名,调用时等于titleH2
ref也可以给子组件添加标记,效果一样
v-pre
阻止{{}}插值的内容被替换渲染,直接输出插值的文本,然后使用了v-pre,通过ref获取的标记也会消失,使用$refs.xxx便会报错
<div v-pre>{{msg}}</div>
v-cloak
延时,如果渲染的内容过多,可以使用单属性v-cloak来隐藏未编译的{{}}mustach插值,等对应的实例对象编译完成再显示。
<div v-cloak>{{msg}}</div>
v-once
表示该元素及子元素或者包含的组件只会渲染一次,哪怕我们后面修改了绑定的数据,他也不会再页面变化。
<div v-once>{{msg}}</div>
<div v-once :title="msg"></div>
自定义指令
指令注册
注册全局指令
Vue.directive('name',{});
局部指令
在子组件extend或者component中加入directives,该局部指令只能在该子组件上使用
Vue.extend('templeta',{
directives : {
'local-class' : {} //-连接表示驼峰命名,调用是v-localClass
}
});
定义指令的对象
有三个属性:
- bind:只会调用一次,就是当指令绑定到元素上时
- update:元素内容第一次渲染以及后续更新内容绑定内容时运行,它接收两个参数,为newValue和oldValue
- unbind:指令从元素上解绑时触发
Vue.directive('wCc',{
bind : function(){
console.log('bind',arguments)
},
update : function(newValue,oldValue){
console.log('update',newValue,oldValue)
},
unbind : function(){
console.log('unbind',arguments)
}
});
var app = new Vue({
el : '#app',
data : {
value : '初始化',
flag : true,
html : '<h2>我是一个HTML</h2>'
},
methods : {
}
});
<div id="app">
<div ref="title" v-cloak v-w-cc="value">{{html}}</div>
</div>
首次运行时
我们可以看到bind的arguments包含了几个参数,其中0为绑定的元素本身,1则是指令绑定的内容,剩下几个就不是很清除了,以后再研究
修改内容
在浏览器输入:app.value = ‘内容更新了’
我们可以看到update运行了,他的newValue实际上是被绑定的div元素本身,而oldValue是一个object对象,他里面包含了上一个内容和新的内容,展开后他的oldValue属性是旧的绑定内容,value则是新的内容。
取消绑定时
取消绑定实际上就是让元素消失,v-if这些,我们给他加个flag判断,然后将flag改为false。
实际上和bind一样,所以就不多解释了。
如果我们只需要使用update的话,可以使用简写形式创建
Vue.directive('wCc',function(value,value2){
console.log(value,value2);
});
直接传一个带参数的函数就行了,va1,va2对应上面说的。
如果你的指令绑定是一个string值,那么update只会运行一次,因为你的值不是vue对象的,那么就不能进行响应,而且传的如果是string需要用引号括起来表示,如:`v-w-cc="'string'"`
vue2.0后自定义指令又增加了几个属性:
1. `inserted` 被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)
2. `componentUpdated`指令所在组件的 VNode 及其子 VNode 全部更新后调用。
之前说的参数都比较浅显,我们来深入一下
这些属性都对应着一个function,这个方法里面有几个对应的参数名用于理解
inserted : function(el,binding,vnode,oldVnode){
//el就是指令所绑定的元素,可以用来直接操作 DOM
//binding一个对象,包含以下属性:
//name:指令名,不包括 v- 前缀。
//value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2
//oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
//expression字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"
//arg传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"
//modifiers一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }
//vnode Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情(实际上就是一个容器,用于包含这个绑定的元素)
//oldVnode 上一个虚拟节点,仅在 update 和 componentUpdated钩子中可用
}
**除了 `el` 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 [dataset](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset) 来进行。**
然后之前说过只传入一个带参数的function不写{}对象来保存对应的参数,他其实表示再bind和update阶段都会运行,如果你只需要这两个阶段运行的话,就可以直一个带参数的funciton
原有的update不会再初次渲染是运行,而是值发生变化时运行,而且只要组件发生重绘一次就会运行一次,如果需要过滤掉不必要的更新可以在里面判断value和oldValue是否==这些。
biding参数全部都是只读的,修改了也不会发生变化,如果要修改值,可以直接el dom操作。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
实现一个点击空白区域关闭显示的自定义指令
typescriptimport type { DirectiveBinding } from "vue"; export default { bind(el: HTMLElement, binding: DirectiveBinding<Function>) { //声明一个给document绑定的事件 function documentClick(event: Event) { const target = event.target as unknown as Node; if (el.contains(t...
使用vue2.7的一些踩坑事项
eslint校验的一些问题(暂时无解)在初始化项目时勾选了eslint校验之后,升级vue 2.7版本后,eslint-plugin-vue这个插件需要升级到9+版本,我目前使用的版本是:"eslint-plugin-vue": "^9.4.0"具体的一些可以参考官方提供的2.7升级指南:2.7日志官方居然把这个写在了变更日志里面,按道理最好官方的文档上也有一份说明的,但是目前没有。虽然eslint的依赖更新到新版后确实解决了一些项目启动报错的问题,但是有时候我们的SFC单文件组件开发的时候,template中的一些变量绑定还是会出现波浪线警告,这...
正确使用vue3的ts类型声明
前言使用了ts最头疼的是什么,除了类型声明应该没有第二家了,那么在vue3中如何正确的声明ts类型,代表着我们踏出了认识vue3的第一步,这非常重要,所以为此水个文章,分享给有需要的人。Volar 插件一开始我对于Volar并没有太大的需要,因为一直使用的Vetur,而且这个插件刚出来时并不完善,各种视频up讲的那个一键分屏功能其实也并不好用,虽然是个很有意思的东西,但是没有那种非要使用它的点,所以当时的我怀着这么一个疑问?为什么要用Volar ?现在我就通过两张图告诉你,它有多香!我们在template里面写代码,绑定变量最烦的是什么,就是我们写了个对象,但是忘了它的属性有哪些啊,使用...

关于给css自动添加浏览器前缀
前言为了兼容之前的旧浏览器版本,特别是安卓4.4这种低版本,transform是一定得增加浏览器前缀的,但是我在项目中遇到了设置无效的问题,极度蛋疼,下面是我的解决教程,当然没这个问题,看这篇文章,相信你对如果给项目增加浏览器前缀,会有很充分的认识。教程给css增加浏览器前缀,业界的做法就是使用postcss,目前webpack与vue cli他们需要安装的依赖略有不同:webpack:pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...
vuex 动态注册和卸载模块
概述一般情况下,我们的vuex数据都是静态的,store在首次初始化后数据的格式就定好了,在日常使用中也确实应该这么做。但是,随着业务的发展,vuex可能会变得非常的大,或者在多页面打包的时候,每个页面都需要vuex,但是如果把每个页面的vuex都写在一起,你会发现,原来我a页面可能只需要30个vuex的数据监听,但是会多出来其他页面的数据,这显然不应该的。所以,我们需要一个能够动态加载模块的方法,每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api:registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...
vue-i18n 的使用方式
安装vue2版需要安装8.x版本的,9.x的是vue3版本使用上大同小异。vue2安装:yarn add vue-i18n@8vue3安装:yarn add vue-i18n封装官方虽然支持很不错的用法,但是自定义处理是难免的。vue3文件目录结构├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts │ │ ├─ i...
vue router 一个重定向页面的思路
当项目需要和其他项目进行沟通的时候,往往常见的做法就是,我在a网站点击一个按钮,在链接中携带query参数啥的,然后去访问b网站页面。此时可能会有两种情况:跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板,跳板会对参数做一些操作,然后进行重定向。两种做法都各有优势:第一种省事简单,但是如果以后b网站链接层级发生变化,那么就会导致链接不可能,到时候还需要进行修改,很痛苦。第二种的话,我们需要写一个跳板页面,但是通过一些参数要求,甚至自身加上一些逻辑处理,那么他的功能性会更强一些。那么,在vue中,做一个重定向页面,怎么做?思路思路1利用路由守卫,当链接上存在某个参数的时候,...
vue 过滤器 驼峰与短横线相互转换的方法
自己去注册吧,提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...
使用vue.draggable拖拽组件遇到的一些问题
资源github:vue.draggable中文文档:vue.draggable中文文档api参考文档:sortablejsvue.draggable是基于sortablejs的vue封装,所有有些api官方并不会有过多的解释,可以去sortablejs查看下拖拽无法触发页面滚动当拖拽的内容大于页面宽高时,页面滚动就是一个必然的需求,但是vue.draggable默认情况并不能触发滚动。官方设置里有一个属性:scroll,如果为true时就能触发滚动,但是默认属性就是true;所以这个配置可以说是无效的。解决方案:cannot set scrollSensitivity19年的时候就有提...

关于 element table多选里面实现单选的偷懒做法
在elment的table多选中增加单选逻辑,这个也不能说产品的问题,单选和多选应该算是比较基础的应用,但是,element并没有对单选做支持。于是我有了一个偷懒思路!前提由于table的一键全选按钮无法进行细致化操作,无法控制点击时选中的数量,只能在选中后的回调里面处理,所以,我的做法是单选时隐藏这个按钮。 selectable方法可以返回布尔值来表示当前格子是否允许勾选或者取消,其实就是禁用的意思。<el-table-column type="selection" :selectable="onSelectable"></el...
