Vue3系列3–模板语法和vue指令

  • Vue3系列3–模板语法和vue指令已关闭评论
  • 7 次浏览
  • A+
所属分类:Web前端
摘要

v-on修饰符 冒泡案例:阻止表单提交案例:v-bind 绑定class 案例 1:v-bind 绑定class 案例 2:


1 模板插值语法

  • 在script 声明一个变量可以直接在template 使用用法为{{变量名称}}
  • 模板语法是可以编写条件运算的
  • 运算也是支持的
  • 操作API 也是支持的
<template>   {{ message }}     {{ message2==0 ? '我是老大' : '我笑的' }}     {{ message2 + 1 }}     {{ message.split('').map(v => `4546$v`) }} </template>  <script setup lang="ts"> const message = "我是唐少" const message2:number = 1 </script> <style> </style>    

2 指令

  • v- 开头都是vue 的指令
  • v-text 用来显示文本
  • v-html 用来展示富文本
  • v-if 用来控制元素的显示隐藏(切换真假DOM)
  • v-else-if 表示 v-if 的“else if 块”。可以链式调用
  • v-else v-if条件收尾语句
  • v-show 用来控制元素的显示隐藏(display none block Css切换)
  • v-on 简写@ 用来给元素添加事件
  • v-bind 简写: 用来绑定元素的属性Attr
  • v-model 双向绑定
  • v-for 用来遍历元素

v-on修饰符 冒泡案例:

<template>   <div @click="parent">parent     <div @click.stop="child">child</div>   </div> </template>   <script setup lang="ts"> const child = () => {   console.log('child');  // 点击后不会答应parent,因为被阻止了 } const parent = () => {   console.log('parent'); }   </script> 

阻止表单提交案例:

<template>   <form action="/">     <button @click.prevent="submit" type="submit">submit</button>   </form> </template>    <script setup lang="ts"> const submit = () => {   console.log('child');   }   </script>     <style> </style> 

v-bind 绑定class 案例 1:

<template>   <div :class="[flag ? 'active' : 'other', 'h']">456789</div> </template>   <script setup lang="ts"> const flag: boolean = false;// 改成true后切换不同的效果 </script>   <style> .active {   color: red; } .other {   color: blue; } .h {   height: 300px;   border: 1px solid #ccc; } </style> 

v-bind 绑定class 案例 2:

<template>   <div :class="flag">{{flag}}</div> </template>  // 直接绑定cls <script setup lang="ts"> type Cls = {   other: boolean,   h: boolean } const flag: Cls = {   other: false,   h: true }; </script> <style> .active {   color: red; } .other {   color: blue; } .h {   height: 300px;   border: 1px solid #ccc; } </style> 

v-bind 绑定style案例:

<template>   <div :style="style">绑定style</div> </template>   <script setup lang="ts"> type Style = {   height: string,   color: string } const style: Style = {   height: "300px",   color: "blue" } </script>   <style> </style>

v-model 案例:

<template>   <input v-model="message" type="text" />   <div>{{ message }}</div> </template>     <script setup lang="ts"> import { ref } from 'vue' // 实时监听 const message = ref("message")  </script>   <style> .active {   color: red; } .other {   color: blue; } .h {   height: 300px;   border: 1px solid #ccc; } </style>