Vue3.0组合式API（三）-----模板语法

一、Vue基础

1.1 Vue格式

• vue基本格式

  <template>
  	
  template>
  
  <script lang="ts">
  // Vue中API函数导入
  import { defineComponent, ref, reactive } from "vue";
  
  // defineComponent函数针对于ts,非ts为export default{}
  export default defineComponent({
    // 当前视图页面名字：调试使用
    name: "about",
    // 所有数据及函数均写在此处：传入两个参数未用可省略
    setup(props, context) {
      // 此处写数据，定义函数
      // 若template模板中需要使用，此处需导出
      return {
  		// 导出变量名或函数名，没有可不写return语句
      };
    },
  });
  script>
  

• 修改Home.vue

  <template>
    
    
    <h1>{{ msg }}h1>
    
    <h2>此处显示obj.a:{{ obj.a }}h2>
    <button @click="test">调用函数button>
  template>
  
  <script lang="ts">
  // Vue中API函数导入
  import { defineComponent, ref, reactive } from "vue";
  
  // defineComponent针对于ts,非ts为export default{}
  export default defineComponent({
    // 当前视图页面名字：调试使用
    name: "about",
    // 所有数据及函数均写在此处：传入两个参数未用可省略
    setup(props, context) {
      // 基本数据类型响应式初始化:针对字符串、数字、布尔值
      const msg = ref("首页展示区");
      // 复杂数据类型响应式初始化:针对数组、对象
      const obj = reactive({
        a: 1,
        b: true,
      });
      // 定义函数
      const test = () => {
        // 基本数据类型运算及提取值
  	  msg.value += "!";	      
        console.log(msg.value);
        // 复杂数据类型运算及提取值
        obj.a += 1;
        console.log(obj.a); 
      };
      // 若在template模板中需要使用，此处需导出
      return {
        msg,
        obj,
        test,
      };
    },
  });
  script>
  

• 效果
  

1.2 mustache语法

• 基本写法：

  {{ message }}

  • 释义：双大括号可以直接获取本组件中的变量值
• 数组写法：

  {{ message[0] }}

  ，建议用v-for配合基本和对象写法
• 对象写法：

  {{ message.warning}}

1.3 计算属性

• 功能：多次访问计算属性（person_name） 会 立即返回之前的计算结果，而不必再次执行函数，仅当相关依赖（person ）发生改变时它们才会重新求值
• 适用：某个变量需要复杂计算得出，或者会被频繁调用
• Home.vue演示代码

  <template>
    
    <h1>{{ person_name }}h1>
  template>
  
  <script lang="ts">
  // 导入计算属性API函数
  import { defineComponent, reactive, computed } from "vue";
  
  export default defineComponent({
    name: "home",
    setup(props, context) {
      const person = reactive({
        firstname: "dear",
        lastname: "duke",
      });
      // 返回的是ComputedRefImpl对象
      const person_name = computed(() => {
        // 只要下面两个变量值不变，缓存中person_name就不会更新
        return person.firstname + person.lastname;
      });
      // 计算属性对象的取值：dearduke
      console.log(person_name.value);
  
      return { person_name };
    },
  });
  script>
  

二、基本语法

2.1 属性绑定

• 功能：Mustache语法不能作用在HTML 标签的属性 上，用v-bind则表示等号后面接的是变量或函数

• 常规写法：

• v-bind（v-bind:语法糖为分号:）

  绑定对象	写法	备注
  标签属性	按钮	disabled为button标签属性，此处绑定变量on_off在setup中
  表达式		此处可以接js表达式，样式名与setup中的id拼接， 具体样式定义在style标签中
  样式属性	或	id、class为样式属性，contentId值在 setup中，具体样式定义在style标签中
  布尔样式属性		nav为样式类名,非变量名，即style标签中的.nav{}，是否生效取决于isActive变量是否为true
  数组样式属性		绑定多个类名，中括号中activeClass为变量名，class1为样式类名(非变量名)，即style标签中的.class1{}
  三元运算样式属性		判断isActive布尔值，true则使用变量activeClass里存的类名，否则为空，errorClass始终加载，此处也可以参照上面直接写样式类名，isActive可以用返回布尔值的函数代替
  样式对象		也可写成:style="styleObject"，setup中写成styleObject: {color: 'red',fontSize: '13px'}

2.2 条件与循环

2.2.1 显示/隐藏标签

• v-if
  • 功能：控制html标签显示与否，当为false，则语句会从dom上移除
  • 使用：当被控制的标签不会被频繁的切换时采用，或者标签较敏感
  • 写法

    
    <h1 v-if="on_off" >展示语句1h1>
    
    <h1 v-else-if="turnon==='good'" >展示语句2h1>
    
    <h1 v-else>展示语句3h1>
    

• v-show
  • 功能：控制html标签显示与否，当为false，仅修改样式为display:'none'
  • 使用：当被控制的标签需要频繁切换时，用此方法效率更高
  • 写法：

    展示语句

2.2.2 遍历生成标签

• 测试数据

  stus为json数据格式，列表式对象：
  [{name:'小马', age:25 , gender: 'male'}, {name:'小牛', age:27, gender: 'female'}, {name:'小驴', age:23, gender: 'female'}]

  ---

• v-for
  • 功能：循环遍历数据列表，生成列表类标签，如：li、td等标签
  • 基本写法

    <ol>
      
      <li v-for="stu in stus" :key="stu.name">
        学生姓名：{{stu.name}}，年龄：{{stu.age}}，性别：{{stu.gender}}
      li>
    ol>
    

    • 显示
      

  ---

  • 进阶写法

    
    <ol v-for="stu in stus" :key="stu.name">
      
      <li v-for="(value, key, index) in stu" :key="index">
      	
        {{index}}、{{key}}：{{value}}
      li>
    ol>
    

    • 显示
      

2.3 用户交互

2.3.1 监控用户动作

• v-on（v-on:语法糖为@）
  • 功能：监控用户鼠标点击、键盘输入
  • 写法

    
    <button @click="turn">按钮名button>
    
    <button @click="counter += 1">增加 1button>
    
    <input @keyup.enter="submit">
    
    <a @click.stop="doThis">a>
    
    <form @submit.prevent="onSubmit">form>
    
    <a @click.stop.prevent="doThat">a>
    
    <form @submit.prevent>form>
    
    <div @click.capture="doThis">...div>
    
    <div @click.self="doThat">...div>
    
    <a @click.once="doThis">a>
    

    • 常用键别名：enter、tab、delete (捕获 “删除” 和 “退格” 键)、esc、space、up、down、left、right
    • 鼠标修饰符：@click.left、@click.right、@click.middle

2.3.2 双向数据绑定

• v-model
  • 功能：在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定
  • 写法

    
    <p>{{ message }}p>
    
    <input v-model="message">
    

  • 显示
    
• v-once
  • 写法：{{ message }}
  • 释义：只读数据绑定，即message初始化值为多少就是多少，无法修改

跳转至vue总篇目录