vue3 setup语法糖

gqk01

已于 2024-01-29 10:26:38 修改

阅读量650

点赞数 10

分类专栏：前端文章标签：前端 vue.js javascript

于 2024-01-17 10:18:49 首次发布

本文链接：https://blog.youkuaiyun.com/gqk01/article/details/135641666

版权

Vue2 语法

<template>
	<div>
		{
  { reverseString }}
		{
  { reverseStringFn() }}
	</div>
</template>
 
<script>
export default {
	name: 'ComputedAndWatch',
	data() {
		return {
			message: 'hello,world!',
		};
	},
	methods: {
		reverseStringFn() {
			return this.message.split('').reverse().join('');
		},
	},
	computed: {
		reverseString() {
			return this.message.split('').reverse().join('');
		},
	},
};
</script>
 
<style lang="scss" scoped></style>

Vue3 官网提供的生命周期图示

一、简介

vue3.2 版本开始才能使用语法糖！

在 Vue3.0 中变量必须 return 出来， template 中才能使用；而在 Vue3.2 中只需要在 script 标签上加上 setup 属性，无需 return ， template 便可直接使用，非常的香啊！

Vue3 的一大特性函数 ---- setup
　　1、setup函数是处于生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数也就说在 setup函数中是无法使用 data 和 methods 中的数据和方法的
　　2、setup函数是 Composition API（组合API）的入口
　　3、在setup函数中定义的变量和方法最后都是需要 return 出去的不然无法再模板中使用

二、代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import Vue before Element -->
  <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
  <!-- <script src="/js/vue2.7.16.js"></script> -->
  <!-- <script src="/js/vue.global.js"></script> -->
  <script src="/js/vue.global3.4.15.js"></script>
  <!-- import element-plus JavaScript -->
  <script src="/js/index.full2.5.3.js"></script>
  <!-- <script src="//unpkg.com/element-plus/dist/locale/zh-cn"></script> -->
  <!-- <script src="/js/zh-cn.js"></script> -->
  <script src="/js/zh-cn2.5.3.js"></script>

  <!-- <script src="https://unpkg.com/axios/dist/axios.js"></script> -->
  <script src="/js/axios.js"></script>
  <link rel="stylesheet" href="/js/index2.5.3.css" />
  <title>正常版</title>
  </title>
</head>

<body>
  <div id="ap">

    <el-button @click="clicked1">{
  {mess}}</el-button>
    <el-button @click="clicked2">$messageBox</el-button>
    <el-button type="primary">{
  {mess}}</el-button>
    <button> {
  { mess }}</button>
    <button>{
  {readersNumber}}</button></button>
    <button onclick="clicked3()">$message</button>
    <img :src="codeImgSrc" />
    <!-- 有一个名为 `fruitList` 的数组，数组包含多个水果名称。请使用 `v-for` 循环渲染出
    一个无序列表（`ul` 标签），列表中包含数组中所有水果的名称。
    例如，如果 `fruitList` 数组为 `['苹果', '香蕉', '橙子', '草莓']`，则渲染出来 -->

    <ul>
      <li v-for="item in items">{
  {item.message}}</li>
      <li v-for="item in fruitList1">{
  {item.name}}</li>
      <li v-for="item1 in fruitList2">
        <span v-for="item2 in item1 ">
          name={
  {item2.name}}, price={
  {item2.price}}
        </span>
      </li>


      <!-- [Vue warn]: Property "todo" was accessed during render but is not defined on instance. at <App> -->
      <li v-for="todo in todos">
        <span v-if="todo.isComplete">
          {
  {todo.name}}
        </span>
      </li>
    </ul>

    <div>
      <!-- 
              methods事件为addTodoAllItem 
              v-model好像只能用于input标签下
              [Vue warn]: Template compilation error: v-model can only be used on <input>, <textarea> and <select> element
          -->
      <button @click="addTodoAllItem">add</button>
      <ul>
        <li v-for="todoItem in todosAll" :key="todoItem.id">
          {
  {todoItem.text}}
          <input type="button" value="delete" @click="deleteTodoSingleItem(todoItem.id)">
        </li>
      </ul>
    </div>

    <!-- 
有一个名为 `studentList` 的数组，数组包含多个学生对象，
每个学生对象包含 `name` 和 `age` 两个属性。请使用 `v-for` 循环渲染出一个表格，
表格中包含数组中所有学生的姓名和年龄信息。同时，如果某个学生的年龄大于等于 18 岁，则将该学生的姓名显示为粗体。
例如，如果 `studentList` 数组为 `[{name: '小明', age: 16}, {name: '小红', age: 20}, {name: '小刚', age: 17}, {name: '小芳', age: 19}]` 
-->
    <form action="">
      <table>
        <tr v-for="student in studentList">
          <td v-if="student.age >=18">
            <span class="span1">{
  {student.name}}</span>
            {
  {student.age}}
          </td>
          <td v-else>
            <span class="span2">{
  {student.name}}</span>
            {
  {student.age}}
          </td>
        </tr>
      </table>
    </form>

    <!-- 
有一个名为 `todoList` 的数组，数组包含多个待办事项对象，
每个待办事项对象包含 `id`、`title`、`completed` 三个属性。
请使用 `v-for` 循环渲染出一个待办事项列表，列表中包含数组中所有待办事项的标题和完成状态。
同时，为每个待办事项渲染一个复选框，当用户点击复选框时，应该触发一个事件，将该待办事项的 `completed` 属性取反。 
例如，如果 `todoList` 数组为 `[{id: 1, title: '买牛奶', completed: false}, {id: 2, title: '做作业', completed: true}, {id: 3, title: '打篮球', completed: false}]`
-->

    <form action="">
      <table>
        <tr v-for="tdl in todoList" :key="tdl.id">
          <td>{
  {tdl.title}} </td>
          <td>{
  {tdl.completed}}</td>
          <td><input type="checkbox" v-model

最低0.47元/天解锁文章