学习Vue3 第四章(模板语法 & vue指令)

Vue 3书写风格

Vue2 option API 书写风格

 <script>
 export default {
   data () {
     return {
       age:18
     }
   },
   methods:{
     xxx () {
 
     }
   }
 }
 </script>

Vue3 第二种风格

 <template>
   <div>
     {{ a }}
   </div>
 </template>
 
 <script>
 export default {
   setup() {
     const a = 1
     //Html中需要使用的变量、常量、函数 都需要 return 出去
     return {
       a,
     }
   }
 }
 </script>
 
 <style scoped>
 
 </style>

Vue3 第三种风格 setup 语法糖模式

 <template>
   <div>
     {{ a }}
   </div>
 </template>
 
 <script setup lang="ts">
 const a: number = 1
 </script>
 
 <style scoped>
 
 </style>

Vue3 模板语法

模板插值语法

在script 声明一个变量可以直接在template 使用用法为{{变量名称}}
 <template>
 <div>
  {{ a }}
 </div>
 </template>
 
 <script setup lang="ts">
 const a: number = 1
 </script>
 
 <style scoped>
 
 </style>

模板语法是可以编写条件运算的

 <template>
   <div>
     {{ a + 2 }}
   </div>
 <!-- 支持三元表达式 -->
   <div>
     {{ a == 1 ? 'True' : 'False' }}
   </div>
 </template>
 
 <script setup lang="ts">
 const a: number = 1
 </script>
 
 <style scoped>
 
 </style>

同样支持API运算

 <template>
   <!-- 模板支持运算 -->
   <div>
     {{ a + 2 }}
   </div>
   <!-- 模板支持三元表达式 -->
   <div>
     {{ a == 1 ? 'True' : 'False' }}
   </div>
   <!-- 模板支持API运算 -->
   <div>
     {{ b.map(v => ({ num: v })) }}
   </div>
 </template>
 
 <script setup lang="ts">
 const a: number = 1
 const b: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]
 </script>

Vue3 指令用法

所有v-开头的都是vue的指令
v-text 用来显示文本
 <template>  
     <div v-text="aa"></div>
 </template>
 <script setup lang="ts">
 const aa: string = '一段文字ABCDE123'
 </script>
v-html 用来显示富文本
 <template>
   <div v-html="a">
   </div>
 </template>
 
 <script setup lang="ts">
 // import HelloWorld from './components/HelloWorld.vue'
 const a: string = '<h3>富文本</h3>'
 </script>
注意：只能支持元素上面的标签，但不支持组件
v-if用来控制元素的显示隐藏（切换真假DOM）
<template> 
    <div v-if="b">
        True
    </div>
</template>
<script setup lang="ts">
const b: boolean = true
</script>
b改成 false 后
原本的True变成了一个注释节点
v-show 功能类似于 v-if ————比v-if更快，切换的是css样式
<template> 
    <div v-show="b">
        True
    </div>
</template>
<script setup lang="ts">
const b: boolean = false
</script>
如果对性能有高要求的话使用v-show 但v-if在应用组件上有一定的区别
v-else-if 和 v-else
v-else-if 表示 v-if 的“else if 块”。可以链式调用
v-else 是v-if条件收尾语句
<template>
  </div>
  
  <div v-if="b == 'aaa'">
    aaa
  </div>
  <div v-else-if="b == 'bbb'">
    bbb
  </div>
  <div v-else>
    ccc
  </div>
</template>

<script setup lang="ts">
const b: string = 'aa'
</script>
v-on 简写为@ 用于给元素添加事件
<template>
  <button @click="xxx">点击按钮</button>
</template>

<script setup lang="ts">
let num: number = 0;
const xxx = () => {
  num++;
  console.log('点击了' + num + '次');
}
</script>
也可以动态的调用函数
<template>
  <button @[event]="xxx">点击按钮</button>
  
</template>

<script setup lang="ts">
const event = 'click';
// const event = 'dblclick';
let num: number = 0;
const xxx = () => {
  num++;
  console.log('点击了' + num + '次');
}
</script>
其中v-on中有很多属性
.stop的使用，btn的click事件不会传播，不会冒泡到上层，调用event.stopPropagation()。
<template>
  <div @click="parent">
    <button @[event]="xxx">点击按钮</button>
    <br>
    <button @[event].stop="xxx">使用stop属性不触发父类</button>
  </div>
</template>

<script setup lang="ts">
const event = 'click';
// const event = 'dblclick';
let num: number = 0;
const xxx = () => {
  num++;
  console.log('点击了' + num + '次');
}
const parent = () => {
  console.log('触发父类事件')
}
</script>
.prevent 调用event.preeventDefault阻止默认行为。
.enter监听键盘事件;
.once 事件只触发一次（常用）；
.capture 使用事件的捕获模式；
.self只有event.target是当前操作的元素时才触发事件；
.passive 事件的默认行为立即执行，无需等待事件回调执行完毕；
v-bind简写为: 用来绑定元素的属性
<template>
  <div :id="id">演示v-bind</div>
  <div :style="style">演示v-bind2</div>
  <div :class="vclass">演示v-bind3</div>
</template>

<script setup lang="ts">
const id: string = 'v123'
const style = {
  color: 'red',
  border: '1px solid #ccc'
}
const vclass: string = 'vbin3'
</script>

<style scoped>
#v123 {
  color: #66ccff;
}
</style>
注意：绑定也支持动态的，可以使用三元表达式
v-model 双向绑定 ——一般用来绑定表单元素
<template>
  <div>
    <input type="text" v-model="a" name="" id="">
    
    
    <div>{{ a }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const a = ref('龙龙龙')
</script>
v-for用来遍历元素
<template>
  <div>
    <div :key="index" v-for="(item, index) in arr">
      {{ index }} - {{ item }}
    </div>
  </div>
</template>

<script setup lang="ts">
const arr: string[] = ['龙', '龙龙', '龙龙龙']
</script>
注意：v-for 可以嵌套遍历
v-once 性能优化只渲染一次
v-memo性能优化会有缓存
具体使用教程：Vue3.2 新增 v-memo