vue中常用的属性标签

  • 插值表达式{{}},可以在前后插入一些内容
    • {{title}} //title为data中定义的内容
    • 如果我们想在变量之前或者后面加一些内容的话使用插值表达式
  • v-cloak:在我们vue加载之前v-cloak是存在,vue加载结束之后v-cloak就隐藏了,利用这个特性可以实现:界面防止闪烁
    •     <style>
    •         [v-cloak] { display: none;  }
    •     </style>
    • <div id="app" v-cloak>
  • v-text:会替换掉元素里的内容
    • <p v-text='p1'>allalalall</p>
    • p1为data中定义好内容,会将元素中的内容覆盖,不识别标签
  • v-html:可以渲染html界面
    • <p v-html='p2'></p>
    • 识别内容中的标签
  • v-on:进行事件的绑定,用的最多的是click事件绑定
    • 简写@
    • <button v-on:click="chage('111111')">按钮</button>
    • <button @click="chage('111111')">按钮</button>
  • 事件修饰符
    • .stop 阻止冒泡
      • <div class="box3" @click.stop='click("最里边")'>.stop</div>
      • 直接在事件后面打点使用,下同
    • .prevent 阻止默认事件
    • .capture 添加事件侦听器时使用事件捕获模式
    •  .self 只当事件在该元素本身(比如不是子元素)触发时触发
    •  .once 事件只触发一次
  • v-model数据双向绑定
    • <input type="text"  v-model:value='title'>
    • title为data中定义的,双向绑定后用户可以更改该数据
posted @ 2020-09-06 22:17  帅气巴巴  阅读(910)  评论(0编辑  收藏  举报