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

一、Vue基础

1.1 Vue格式

• vue基本格式

  <template>
  	<!-- 此处写html语句 -->
  </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>
    <!-- 响应式：template标签内数据和script标签内数据同步 -->
    <!-- 简单数据类型响应式效果 -->
    <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语法

• 基本写法：<p>{{ message }}</p>
  • 释义：双大括号可以直接获取本组件中的变量值
• 数组写法：<p>{{ message[0] }}</p>，建议用v-for配合基本和对象写法
• 对象写法：<p>{{ message.warning}}</p>

1.3 计算属性

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

  <template>
    <!-- 模板中计算属性的取值:dearduke -->
    <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则表示等号后面接的是变量或函数

• 常规写法：<div class="样式类名1 样式类名2"></div>

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

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

2.2 条件与循环

2.2.1 显示/隐藏标签

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

    <!-- 必选：on_off为布尔值 -->
    <h1 v-if="on_off" >展示语句1</h1>
    <!-- 可选：v-else-if必须紧贴v-if语句，布尔值判断，不等于为!== -->
    <h1 v-else-if="turnon==='good'" >展示语句2</h1>
    <!-- 可选：v-else必须紧贴前两个语句，二者显示一个 -->
    <h1 v-else>展示语句3</h1>
    

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

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>
      <!-- 循环遍历时必须绑定不会重复项作为关键字key，以跟踪每个节点的身份，
      当key重复，页面显示正常，但会报错：Duplicate keys detected-->
      <li v-for="stu in stus" :key="stu.name">
        学生姓名：{{stu.name}}，年龄：{{stu.age}}，性别：{{stu.gender}}
      </li>
    </ol>
    

    • 显示
      

  ---

  • 进阶写法

    <!-- 循环取出列表中的每个对象item -->
    <ol v-for="stu in stus" :key="stu.name">
      <!-- 对象格式为key:value，index为vue自动生成的序号，从0开始，三者有顺序，
      认位置不认名，首参数为value必填，次参数为key选填，尾参数index选填
      当仅有一个value，可不写括号，可用来填充表格的td标签-->
      <li v-for="(value, key, index) in stu" :key="index">
      	<!-- index：0/1/2，key：name/age/gender，value：余下的 -->
        {{index}}、{{key}}：{{value}}
      </li>
    </ol>
    

    • 显示
      

2.3 用户交互

2.3.1 监控用户动作

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

    <!-- 监控用户鼠标左键点击，此处turn为函数名，在methods里 -->
    <button @click="turn">按钮名</button>
    <!-- 监控用户鼠标左键点击，此处直接绑定表达式，每次点击变量counter增加1 -->
    <button @click="counter += 1">增加 1</button>
    <!-- 监控用户enter键弹起，则为提交，见下常用键别名 -->
    <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>
    <!-- click 事件只能点击一次 -->
    <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 等表单控件元素上创建双向数据绑定
  • 写法

    <!-- message为变量 -->
    <p>{{ message }}</p>
    <!-- 在输入框中输入的数据会实时更新变量的值，并实时渲染到页面上 -->
    <input v-model="message">
    

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

跳转至vue总篇目录