• 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
Copyright © 2020-2023  润新知