Vue-随笔小记

注：本文属个人随笔记录，如有错误请大家多多指正

1、vue.nextTick([callback,context])
参数：
{function}[context]
{Object}[context]
用法：在下次DOM更新结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的DOM。
一般用在created的回调里面

2、Vue.directive(id,[definition])
参数：
{string} id
{Function|Object} [definition]
用法：
注册或获取全局指令。
Vue.directive('my-directive',{
bind:function(){},
inserted:function(){},
update:function() {},
componentUpdated:function() {},
unbind:functino() {}
})
//注册（传入一个简单的指令函数）
Vue.directive('my-directive',function() {
//这里的将会被bind和update调用
})
var myDirective = Vue.directive('my-directive')
3、Vue.filter(id,[definition])
用法：
注册或获取全局过滤器。
Vue.filter('my-filter',function(value) {
返回处理后的值
})
Vue.filter('convertTime', function(value) { //{{value|convertTime}}

return Moment(value).format('YYYY-MM-DD');
})
var myFilter = Vue.filter('my-filter')
4、注册一个全局组件
import NavBar from './components/commons/navBar.vue';
Vue.component('nav-bar', NavBar);
5、指令
v-text
示例
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
v-html
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
<div v-html="html"></div>
v-else
限制： 前一兄弟元素必须有 v-if 或 v-else-if。
示例
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
v-else-if
限制: 前一兄弟元素必须有 v-if 或 v-else-if。
示例
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
重点！！！！v-on
修饰符
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
用法：

绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或 一个内联语句，如果没有修饰符也可以省略。

从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/ 监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。

用在普通元素上时，只能监听 原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句 ，语句可以访问一个 $event 属性： v-on:click="handle('ok', $event)"。

示例
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
v-bind
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 绑定. “prop” 必须在 my-component 中声明。 -->
<my-component :prop="someThing"></my-component>
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

转载于:https://www.cnblogs.com/wb336035888/p/7325613.html