Vue模板、指令修饰符

华同学
147 阅读2分钟

模板语法

展示内容

  • 表达式
    • {{object.a}} 表达式，构造选项中data内的object中的a显示出来 - {{n+1}} 可以写任何运算，但不知支持逻辑判断（if/else）
    • {{fn(n)}} 可以调用函数，调用在methods里的fn函数
    • 如果值为undefined或者null就不显示
    • 另一种写法为<div v-text="表达式"></div>,此方法与以上方法等价，但不常用
  • 展示HTML内容
    • 假设data.x的值为 "< strong>hi</ strong> ",不显示字符串，而是显示成HTML标签 - <div v-html="x"></div>即可显示粗体的hi
  • 只展示{{n}}字段，不编译
    • <div v-prev> {{n}} </div>不会对内容进行编译

绑定属性

  • 绑定src
    • <img v-bind:src="x" />x的值为url
    • 简写 <img :src="x" />把x的值求出来，赋值给img的src属性
  • 绑定对象
修改div的样式
<div :style="{border:'1px solid red',height:100}"> 
</div>

绑定事件

  • v-on事件
    • <button v-on:click="add">+1</button>点击之后，Vue会运行add()函数
    • <button v-on:click="xxxx(1)">xxxX</button>点击之后，Vue会运行xxx(1)
    • <button v-on:click="n+=1">xxxX</button>点击之后Vue会运行n+=1
    • 即发现函数就自动加上括号调用，否则直接运行代码
  • 缩写 <button @click='add'>+1</button>一般用缩写

条件判断

  • if...else
根据条件显示内容
<div v-if="x>0"> x>0 </div>
<div v-else-if="x===0"> x=0 </div>
<div v-else> x<0 </div>

循环

  • for (value,key)in 对象或者数组
数组遍历
<ul>
    <li v-for="(u,index) in users" :key="index"> // 数组是users,u是值,index是索引
    索引:{{index}} 值:{{u.name}}
    </li>
</ul>

对象遍历
<ul>
    <li v-for="(value,name) in obj" :key="name"> // 对象是obj,value是属性值,name是属性名
   属性名:{{name}} 属性值:{{name}}
    </li>
</ul>

显示、隐藏

  • v-show <div v-show="n%2===o">n是偶数</div>判断n是否为偶数，选择显示或者隐藏内容。这是语法糖
  • 近似等于
<div :style="{display:n%2===0?'block':'none'}">
  n是偶数
</div>
  • 注意：看得见的元素的dispaly值不只有block - 如table的display值为table - 如li的dispy为list-item

总结

Vue模板主要特点有

- 使用XML语法，不是HTML
- 使用{{}}插入表达式
- 使用v-html v-on v-bind等指令操作DOM
- 使用v-if v-for等指令实现条件判断和循环

指令 Directive

  • 支持修饰符的指令
    • @click.stop="add"表示阻止事件传播/冒泡泡
    • @click.prevent="add"表示阻止默认动作
    • @click.prevent="add"同时表示两种意思
  • 常用修饰符
    • v-on支持的有
      • .{keycode|keyAlias}即按键码/按键别名，.stop .prevent .capture .self .once .passive .native`
      • 快捷键相关：.ctrl .alt .shift .meta .exact
      • 鼠标相关 .left .right .middle
    • v-bind 支持的有 .prop .camel .sync
    • v-model 支持的有 .lazy .number .trim

.sync修饰符

场景描述

  • Vue规则：组件不能修改外部数据
  • Vue规则：$emit可以触发事件并传参
  • Vue规则：$event 可以获取$emit的参数

举例

8d3999c9e847912e2c3a264325c0bae.png

常规方法

父组件
<template>
<div class="app">
    父组件还剩下{{total}}
    <hr>
   <Child :money="total" v-on:update:money="total=$event" />  //父组件监听 update:money 事件 让父组件的total等于子组件的返回值 
  // update:money是整体，Vue建议这样写
  //$event是vue提供的变量，用于存放子组件事件的返回值
</div>

</template>

<script>
import Child from './child.vue'

export default {
    components: { Child },
    data(){
        return {total:1000}
    }
}
</script>
<style>
.app{
    border: 3px solid red;
}
</style>


子组件
<template>
<div>
    子组件用剩下的{{money}}
    <button @click="$emit('update:money',money-100)">//子组件点击事件，触发update:money,返回值为money-100
    //$emit 触发事件，并返回值 ：money-100
    
    
</div>
</template>
<script>
export default{
props:["money"]

}
</script>

使用.sync方法

以下代码简写

父组件
    <Child :money.sync="total"  />
    //子组件修改了值，.sync使得父组件同步这个变化

由于这种场景很常见，所以Vue里面封装了.sync

  • :money.sync="total" 等价于`:money="total" v-on:updatate:money="total"=$event"

avatar
文章
阅读
粉丝