选项式api和组合式api是两种不同的语法习惯,<template>标签内还是该怎么写就怎么写,不一样的只是<script>里面的语法改变了。
目录
选项式api:
组合式api:
1)省略各种关键字:
省略前:
省略后:
2)声明响应式数据 ref()函数
3)嵌套组件间参数传递
4)变量解构赋值
5)computed()函数
6)生命周期函数
路由嵌套:
1) 在add2的路由中设置cildren属性。
2)设置路由响应位置
3)直接访问路由add3
选项式api:
import { } from ' '
export default{
components:{ }, // 挂载import导入的组件对象
data(){ }, // 定义对象及属性值
methods(){ }, // 创建函数对象
mounted(){ } // 各种生命周期函数
}
<script> //model import HelloWorld from '@/components/HelloWorld.vue' import qs from "qs" export default{ components:{ HelloWorld }, data(){ return{ student:{ name:"张三", age:5 }, url:"https://www.baidu.com", 加粗内容:"<b>我不喜欢钱</b>", score:999 } }, methods:{ show(){ alert(JSON.stringify(this.student)) } , testPost(){ this.$axios({ url:"/demo", method:"post", data:qs.stringify({ //使用qs.stringify({}) 将json数据转换为普通的键值对表单数据,后端单元方法直接声明形参接收 //不使用qs.stringify({}) 直接发送请求体格式的请求数据,后端单元方法必须使用@RequestBody注解来接收 name:'张三', age:20 }) }).then(res=>{console.log(res)}) } } } </script>
组合式api:
1)省略各种关键字:
使用组合式api,只需要在<script >添加关键字setup
标签内部的关键字export default data return 都可以省略不写
并且import导入的资源无需手动挂载
省略前:
省略后:
2)声明响应式数据 ref()函数
const直接声明的name,age是常量,只能渲染一次。
而使用ref()和reactive()声明的变量值可以多次更改。
ref() reactive()区别在于:
通常使用ref()声明变量
reactive()参数接收的必须是一个对象。用来处理对象嵌套对象时使用该函数。
3)嵌套组件间参数传递
在MyAdd3组件中嵌套一个MyAdd4组件,进行参数传递id4=123。
在MyAdd4中使用 defineProps([ ])接收参数,直接使用
4)变量解构赋值
使用toRef()函数进行解构。
5)computed()函数
虽然能在<template>标签中直接进行三目运算符运算,但是为了提高效率,通常使用computed()函数事先储存运算结果,只有在检测到变量改变时才重新进行方法调用,该函数类似于生命周期函数。
6)生命周期函数
和选项式api一样,不过方法名前多加了一个on。
路由嵌套:
有两个组件add2.vue,add3.vue.
实现路由访问add3.vue界面,最终显示add2界面 嵌套了add3界面。
1) 在add2的路由中设置cildren属性。
2)设置路由响应位置
3)直接访问路由add3