请选择 进入手机版 | 继续访问电脑版

vue.js常用的基本指令特性及其用法

[复制链接]
暖男先生 发表于 2021-1-2 18:59:01 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
根本指令

绑定命据 v-bind



  • 绑定命据(表达式)到指定的属性上,
    ,这里的参数就是指定的属性名称。
  • 缩写::
  • 用法
复制代码


  • 也可绑定样式
    css
  1. .red {    color: red;}.size {    font-size: 50px;}
复制代码
html
  1.       color
复制代码
js
  1. classes:{    red:true,    size:false}//大概classes:[    "red","size"],
复制代码


  • 也可以这样
    html
  1.        style
复制代码
js
  1. styleInfo: [{                color: "red",            },            {                fontSize: "50px"            }]
复制代码
事件绑定v-on



  • 事件监听
  • 缩写:@
  • 用法:
  • 第一种用法,data里声明变量,可直接改变变量值
  1. {{num}}click
复制代码


  • 第二用法,事件传参,可以传event以外的参数
  1. click
复制代码
  1. methods:{     handleClick(n,e){        console.log(n);        console.log(e);        console.log("click");    }}
复制代码


  • 修饰符

    • .stop - 调用 event.stopPropagation()。
    • .prevent - 调用 event.preventDefault()。
    • .capture - 添加事件侦听器时使用 capture 模式。
    • .self - 只当事件是从侦听器绑定的元素自己触发时才触发回调。
    • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
    • .native - 监听组件根元素的原生事件。
    • .once - 只触发一次回调。
    • .left - 只当点击鼠标左键时触发。
      .right - 只当点击鼠标右键时触发。
    • .middle -只当点击鼠标中键时触发。
    • .passive - 以 { passive: true } 模式添加侦听器

  1. click
复制代码
双向绑定v-model



  • 双向数据流,表单大概data值发生改变,都会变
  • 用法:
复制代码


  • 修饰符

    • .lazy - 取代 input 监听 change 事件
    • .number - 输入字符串转为有效的数字
    • .trim - 输入首尾空格过滤

  1. [/code] [size=4]条件渲染[/size]
  2. [list]
  3. [*]v-if
  4. [list]
  5. [*]v-else-if
  6. [*]v-else
  7. [/list]
  8. [*]v-show
  9. [/list] [code]  花一样的年龄
  10.   未成年
  11.   成年人
  12.   show
  13.   // 不显示
复制代码


  • v-if与v-show的区别

    • v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适本地被销毁和重建。v-if也是惰性的,如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
    • v-show不管初始条件是什么,元素总是会被渲染,而且只是简单地基于 CSS 举行切换。
    • 一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频仍地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

循环v-for



  • 遍历数组
  • 遍历对象

    • 2个参数 (Val,key)
    • 3个参数(val,key,index)

  • 带有 v-for 的

    • 循环渲染一段包罗多个元素的内容

  • 用法:
  1. [list]   
  2. [*]        {{index}}--{{val.name}}--{{val.age}}
  3. [/list]
复制代码
带有key
  1. [list]      
  2. [*]           {{index}}--{{item.name}}--{{item.age}}
  3. [/list]
复制代码
  key 属性,diff算法优化。默认情况下,在渲染 DOM 过程中使用 原地复用 ,这样一般情况下会比力高效,但是对于循环列表,特别是依赖某种状态的列表,会有一些问题,我们可以通过 :key 属性,来给每个循环节点添加一个标识,创建索引,快速遍历。


  • v-for和v-if一起使用
  1. <li v-for="(item,index) in list" :key="index" v-if="item.age  30">    {{index}}--{{item.name}}--{{item.age}}
复制代码
  只会显示符合条件的
渲染平凡文本v-text



  • 相当于插值
  • 绑定的数据(更新)啥什么就渲染什么
  • 等价于{{message}}
分析数据v-html



  • 用法:
  1. ......var app = new Vue({   el: &#39;#app&#39;,    data: {      message: &#39;[b]Hello[/b] Vue!&#39;,   }})......
复制代码
来源:https://blog.csdn.net/weixin_44178305/article/details/112000124
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )