• vue基础


    VUE基础学习

    1、v-on和v-bind区别:
    v-on:简写@ 绑定元素事件
    v-bind: 简写: 绑定元素属性

    2、class绑定:(1):class=‘{‘classA’:isA,'classB':isB}’
    (2):class='[classA,classB]'
    (3):class='{classObj}'

    3、v-if和v-show区别:渲染的区别
    v-if:只有条件成立时才会渲染元素;
    v-show:不管条件是否成立都会渲染,条件不成立则display:none

    4、v-for:遍历时输出多条标签
    <ul>
    <template v-for='(index,item) in arr'>
    <li>{{item}}</li>
    <li>标签{{index+1}}</li>
    </template>
    </ul>

    5、vue操作数组方法:
    push、pop、shift、unshift、splice、sort、reverse

    push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度

    shift() 方法用于把数组的第一个元素从其中删除,并返回第一个
    元素的值。
    unshift() 方法可向数组的开头添加一个或更多元素,并返回新的
    长度。
    pop() 方法用于删除并返回数组的最后一个元素。
    splice(index,num,"ele1,ele2...") 方法用于插入、删除或替换数
    组的元素。
    sort() 方法用于对数组的元素进行排序。
    reverse() 将数组元素颠倒顺序。

    6、Vue自带的过滤器(filter)
    capitalize: 首字母大写

    uppercase: 全部大写

    lowercase: 全部小写

    currency: 输出金钱以及小数点

    debounce: 需在@里面使用,<button id="btn" @click="disappear
    | debounce 10000">点击我,我将10秒后消失</button>

    limitBy: 需在v-for(即数组)里面使用,
    <ul v-for="item in lili | limitBy 10 3">
    <!--输出 4 5 6 7 8 9 10 11 12 13-->
    <li>{{item}}</li>
    </ul>
    lili: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]

    filterBy:需在v-for(即数组)里面使用,
    第一个参数: {String | Function} 需要搜索的字符串

    第二个参数: in (可选,指定搜寻位置)

    第三个参数: {String} (可选,数组格式)

    7、数据逻辑和事件逻辑隔离:
    .prevent:阻止单击事件冒泡
    .stop:提交后不再重载页面
    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat">

    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>

    8、按键修饰符:可以使用按键编码或者别名。
    <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
    <input v-on:keyup.13="submit">
    <!-- 同上 -->
    <input v-on:keyup.enter="submit">
    vue.js提供的别名包括:enter、tab、delete、esc、space、up、
    down、left、Right。

  • 相关阅读:
    C# base64编码、解码
    C#异常重试通用类Retry
    C#操作Control异步工具类
    Notepad++的Json格式化插件
    CG 标准函数库
    Unity 几种优化建议
    基于Unity的Profiler性能分析
    Time.timeScale、游戏暂停
    Lua 中的string库(字符串函数库)总结
    Lua 日志
  • 原文地址:https://www.cnblogs.com/pfyblog/p/6489714.html
Copyright © 2020-2023  润新知