菜鸟看前端（vue常用指令和修饰符）

最新推荐文章于 2024-09-09 09:15:38 发布

中庸之为德也，其至矣乎

最新推荐文章于 2024-09-09 09:15:38 发布

阅读量164

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45891146/article/details/112505366

版权

vue常用指令

v-model 多用于表单元素实现双向数据绑定
v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或json
v-show 显示内容 ,通过display=block/none来控制元素隐藏出现
v-hide 隐藏内容同上
v-if 显示与隐藏（dom元素的删除添加同angular中的ng-if 默认值为false）
v-else-if 必须和v-if连用
v-else 必须和v-if连用不能单独使用否则报错模板编译错误
v-bind 动态绑定作用：及时对页面的数据进行更改
v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数函数必须写在methods里面
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三元型 ‘isred?“red”:“blue”’ 3、数组型 ‘[{red:“isred”},{blue:“isblue”}]’
v-once 进入页面时只渲染一次不在进行渲染
v-pre 把标签内部的元素原位输出
v-cloak 防止闪烁该属性需配合样式使用

<style>
[v-cloak]{display:none}
</style>

<div id="app" v-cloak>
    <div>
        {{message}}
    </div>
</div>
<script type="text/javascript">
    new Vue({
      el:'#app',
      data:{
        message:'hello world'
      }
    })
</script>

vue常用修饰符

.stop 阻止事件继续传播
.prevent 阻止标签默认行为
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次

.passive 告诉浏览器你不想阻止事件的默认行为

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

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

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

v-model的修饰符

.number自动将用户的输入值转化为数值类型

     <input v-model.number="msg">

.lazy默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。

    <input v-model.lazy="msg">

.trim自动过滤用户输入的首尾空格

   <input v-model.trim="msg">

键盘修饰符

  keyup // 鼠标弹起时触发
  keydown // 鼠标按下时触发 
  <input @keyup.enter="submit"> // 释放enter键触发事件
  
  // 按键别名
  .enter
  .tab
  .delete (捕获“删除”和“退格”键)
  .esc
  .space
  .up
  .down
  .left
  .right
  // 修饰键
  .ctrl
  .alt
  .shift
  .meta
  
  <!-- Alt + C -->
  <input @keyup.alt.67="clear">
  <!-- Ctrl + Click -->
  <div @click.ctrl="doSomething">Do something</div>
  
  //与按键别名不同的是，修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。换一种说法：如果要引发 keyup.ctrl，必须按下 ctrl 时释放其他的按键；单单释放 ctrl 不会引发事件。
  <!-- 按下Alt + 释放C触发 -->
  <input @keyup.alt.67="clear">
   
  <!-- 按下Alt + 释放任意键触发 -->
  <input @keyup.alt="other">
  
  <!-- 按下Ctrl + enter时触发 -->
  <input @keydown.ctrl.13="submit">

element的修饰符

对于elementUI的input，我们需要在后面加上.native, 因为elementUI对input进行了封装，原生的事件不起作用。

<input v-model="form.name" placeholder="昵称" @keyup.enter="submit">

<el-input v-model="form.name" placeholder="昵称" @keyup.enter.native="submit"></el-input>