zoukankan      html  css  js  c++  java
  • Vue.js——4.指令 笔记

    v-cloak:解决网速延迟 闪烁问题
    v-text=msg: 和{{}}表达式一样,没有闪烁问题,但是前后不能加别的,覆盖原本的内容 innerText
    v-html=msg:innerHtml,一样可以打印标签
    v-band:src='msg':为元素绑定属性;可以这样写 : src='msg' 也可以写一些js表达式 :src='"..//"+msg'
    v-on:click='show':事件绑定机制 对应的在 mehods 对象 绑定的方法 或者 @表示

    事件 修饰符
    @click.stop 阻止事件冒泡
    @click.prevent 阻止默认事件,比如 跳转,提交
    @click.self 实现只有点击当前元素的是才触发函数 也可以阻止冒泡。但是只是当前元素
    @click.once 只触发一次

    Vue会监听data数据的改变。自动同步,不用管页面以及渲染

    箭头函数解决this作用域的问题。内部的this等于外部的this

    v-model 双向数据绑定,只能运用表单元素

    类和行内样式都可以用对象的方式书写或者以对象数组的形式 :style="color:'red',font-size:'18px'"


    v-for:循环 数组
    <p v-for="(item,i) in list">{{i}}-------------{{item}}</p>
    item:数组的每一项,i:索引。类似于 for in

    循环对象
    <p v-for="(val,key,i) in user">{{val}}-------------{{key}}</p>
    val:键,key:值。n

    迭代数字
    <p v-for="count in 10">count</p>

    在使用 v-for 循环的时候 或者 特别的时候 需要唯一性,可以用:key 属性绑定唯一性

    v-if:true 删除或者创建元素
    v-show 不会删除。只是切换元素的 display:none样式


    表达式 不一定只能是值,可以是方法 <p>{{search()}}</p>

    过滤器

    作用:文本的格式化

    调用方式:{{name| 过滤器NameD('123')}}//可以传递多个参数。可以调用多个过滤器

    定义:Vue.filter(NameD,function(data,sd){
    return data+"12"+sd.repace(/疯狂/g,'谢谢')// 替换可以是正则,可以是字符串
    })

    自定义 全局按键修饰符
    Vue.config.keyCodes.f2=113

    自定义指令

    v-focus

    el:绑定的元素 是原生的DOM对象
    Vue.directive('focus',{
    bind:function(el){}, //每当绑定的时候执行一次,没有放入dom,只是在内存中 只能一次
    inserted:function(el){}// 当元素放入dom的时候
    updated:function(el){} // 组件更新的时候执行
    })

  • 相关阅读:
    字符串中包含最多的字符
    循环左移操作 (左旋转字符串)
    翻转字符串
    和为s的连续正数序列
    Unity之使用技巧记录
    Unity资源
    各种IDE的使用
    Unity3d之MonoBehavior自带方法的执行顺序
    c#之new关键词——隐藏基类方法
    算法——各种类型对象通用的二分法插入排序
  • 原文地址:https://www.cnblogs.com/ruogu/p/10943095.html
Copyright © 2011-2022 走看看