绍兴专门做网站,vi设计手册模板ppt,景点网站应该怎么做,竹林wordpress主题文章目录 前言了解组合式API简单类型 ref封装对象类型 user.name子组件数组类型 reactive封装 组合式 API 基础练习基础练习优化 前言
Vue 3 的组合式 API#xff08;Composition API#xff09;是一组函数和语法糖#xff0c;用于更灵活和可组合地组织 Vue 组件的代码逻辑… 文章目录 前言了解组合式API简单类型 ref封装对象类型 user.name子组件数组类型 reactive封装 组合式 API 基础练习基础练习优化 前言
Vue 3 的组合式 APIComposition API是一组函数和语法糖用于更灵活和可组合地组织 Vue 组件的代码逻辑。与 Vue 2 的 Options API 不同组合式 API 不再以选项的形式存在而是通过 script setup 标签来使用。
组合式 API 提供了以下几个核心函数
setup()组件创建之前调用的函数用于定义组件的状态、计算属性、方法、事件等。setup() 函数可以返回一个对象包含模板中需要用到的数据和方法。ref()接收一个初始值并返回一个响应式对象可以通过 .value 属性获取或修改值。reactive()接收一个普通对象并返回一个响应式的对象内部所有属性都是响应式的。computed()接收一个计算函数作为参数返回一个响应式的计算属性。watch()监听数据变化并执行回调函数。onMounted()、onUpdated()、onUnmounted()生命周期钩子函数分别在组件挂载、更新和卸载时调用。
使用组合式 API 的好处包括
更好的代码组织性将相关代码组织在同一个函数内更方便阅读和维护更容易重用代码可以编写可复用的函数或复杂逻辑的组合函数更好的类型推断和 IDE 支持。
组合式 API 可以与 Options API 共存因此可以按需选择使用。
了解组合式API
新建项目后在根组件中重新生成vue 然后删掉script标签内代码全部删掉
templatediv{{ name }}/div
/template
!-- 加上setup就是组合式API --
script setup
let name 张三
/script
style scoped
/style其中name 是一个响应式的数据属性初始值为 ‘张三’ 在模板中使用插值语法 {{}} 来动态展示 name 属性的值
简单类型 ref封装
上面的例子比较简单下面看简单类型加上ref封装变成响应式数据
templatediv{{ name }}brbutton clickchange换名字/button/div
/template
!-- 加上setup就是组合式API --
script setup
let name 张三
function change(){name 张三去打水了
}
/script
style scoped
/style运行后代码并没有改变
定义的数据默认不支持响应式代码一变立刻同步到视图上配置式API默认支持
接下来需要导入东西
import {ref} from vue组合式API想把数据变成响应式的需要用ref对数据做一个封装
简单类型需要用ref进行封装而对象类型不需要
调用.value属性
templatediv{{ name }}brbutton clickchange换名字/button/div
/template
!-- 加上setup就是组合式API --
script setup
import {ref} from vuelet name ref (张三)
function change(){name.value 张三去打水了
}
/script
style scoped
/style接下来点击按钮数据改变
对象类型 user.name
templatediv{{ name }}--{{ user.name }}brbutton clickchange换名字/button/div
/template
!-- 加上setup就是组合式API --
script setup
import {ref} from vuelet name ref (张三)
// 对象类型
let user {name: 李四
}
function change(){name.value 张三去打水了user.name 李四去挑水
}
/script
style scoped
/style在上面的代码中user 对象的 name 属性值为 ‘李四’该属性与 name 响应式变量不同二者无关。 在模板中{{ user.name }} 用于显示 user 对象的 name 属性值而 {{ name }} 则用于显示 name 响应式变量的值。
子组件
之前使用子组件是导入、注册、使用在组合式API内是导入之后直接使用
导入
import HelloWorld from /components/HelloWorld.vue;使用 HelloWorld/HelloWorld效果
数组类型 reactive封装
templatediv{{ name }}--{{ user.name }}brp v-for(item, index) in arr :keyindex{{ item }}/pbutton clickchange换名字/buttonHelloWorld/HelloWorld/div
/template
!-- 加上setup就是组合式API --
script setup
import {ref} from vueimport HelloWorld from /components/HelloWorld.vue;
let name ref (张三)
// 对象类型
let user {name: 李四
}
//数组类型
let arr [a,b,c]function change(){name.value 张三去打水了user.name 李四去挑水arr.splice(0,1)
}
/script
style scoped
/style运行后会把第一个数据删掉 但是再删就删不掉了
接下来也给数组封装一下reactive
templatediv{{ name }}--{{ user.name }}brp v-for(item, index) in arr :keyindex{{ item }}/pbutton clickchange换名字/buttonHelloWorld/HelloWorld/div
/template
!-- 加上setup就是组合式API --
script setup
import {ref,reactive} from vueimport HelloWorld from /components/HelloWorld.vue;
let name ref (张三)
// 对象类型
let user {name: 李四
}
//数组类型
let arr reactive([a,b,c])function change(){name.value 张三去打水了user.name 李四去挑水arr.splice(0,1)
}
/script
style scoped
/style组合式 API 基础练习
新建两个子组件Add、List生成基本结构后删除script标签内默认生成的配置项
根组件中 使用了 List 组件该组件的代码未展示可以理解为列表组件 引入了 reactive 函数创建了一个响应式的数组 arr用于存储待办列表中的数据
templatedivh1待办列表/h1List/List/div
/templatescript setup
import List from /components/List.vue
import { reactive } from vue;// 定义数组
let arr reactive([看电影,玩游戏])
/script
style scoped
/styleList子组件中
在列表组件 script setup 中使用了 defineProps 函数来定义组件的属性可以用于定义组件的 props。在这里定义了一个 list 属性类型为数组类型 Array。
在模板中使用了 v-for 循环遍历 list 数组中的数据然后使用 {{ item }} 渲染每一项的数据。这里加上了 :keyindex以便 Vue 可以快速识别每个列表项并渲染正确的数据。
templatedivolli v-for(item, index) in list :keyindex{{ item }}/li/ol/div
/templatescript setup
// 组合式写法自定义属性
let myProps defineProps({list :{type: Array}
})
/script
style scoped
/style接下来在父组件中传递一个属性数据 List :listarr/List接下来在父组件中传入子组件App
导入
import Add from /components/Add.vue;使用 Add itemrecive/Add定义方法
function recive(v) {arr.push(v)
}接下来就剩子组件Add了
templatedivinput typetext v-modelitembutton clicksend添加/button/div
/templatescript setup
// 定义事件 数据名item
import {ref} from vue
let item ref()// 定义事件 send
// 组合式API自定义事件
let emits defineEmits([item])
function send(){if ( item.value! ) {// 不为空 发送数据emits(item,item.value)// 清空输入框避免重复添加item.value }}
/script
style scoped
/* 输入框样式 */
input {padding: 8px 16px;font-size: 16px;outline:none;border: 1px solid black;border-radius: 4px;margin-right: 8px;}/* 按钮样式 */button {padding: 8px 16px;font-size: 16px;background-color: #409EFF;color: white;border: none;border-radius: 4px;cursor: pointer;}
/style基础练习优化 以下是对代码的注释和步骤的解释
templatedivh1待办列表/h1Add itemrecive/AddList removedel :listarr/List/div
/template上面的代码是 App.vue 文件的模板部分主要是引入 Add.vue 和 List.vue 组件并绑定对应的自定义事件。
script setup
import List from /components/List.vue
import Add from /components/Add.vue
import { reactive } from vue// 定义数组
let arr reactive([玩游戏,看电影])function recive(v){arr.push(v)
}
function del(i){arr.splice(i,1)
}
/script上面的代码是 App.vue 文件的逻辑部分。引入 List.vue 和 Add.vue 组件并用 reactive 定义了一个响应式数组 arr用于存储待办列表。
recive 函数用于接收从 Add.vue 组件传递过来的数据并将其添加到 arr 数组中。
del 函数用于接收从 List.vue 组件传递过来的数据并将对应的列表项从 arr 数组中删除。
templatedivinput typetext v-modelitembutton clicksend添加/button/div/template上面的代码是 Add.vue 文件的模板部分主要包含一个输入框和一个按钮用于向父组件派发数据。
script setup
// 定义事件 数据名item
import {ref} from vue
let item ref()// 定义事件 send
// 组合式API自定义事件
let emits defineEmits([item])
function send(){if ( item.value! ) {// 不为空 发送数据emits(item,item.value)// 清空输入框避免重复添加item.value}
}
/script上面的代码是 Add.vue 文件的逻辑部分用 defineEmits 定义了一个自定义事件 item用 ref 定义了一个响应式变量 item用于获取输入框内的值。当点击添加按钮时根据输入框内的值触发自定义事件并将输入框内的值作为参数传递给父组件最后清空输入框。
templatedivolli clicksend(index) v-for(item, index) in list :keyindex{{ item }}/li/ol/div/template上面的代码是 List.vue 文件的模板部分主要用于展示待办列表。
script setup//组合式写法 自定义属性let myProps defineProps({list:{type: Array}})let emits defineEmits([remove])function send(i){emits(remove,i)}/script上面的代码是 List.vue 文件的逻辑部分用 defineProps 定义了一个 list 属性用于接收父组件传递过来的数据。用 defineEmits 定义了一个自定义事件 remove当每个列表项被点击时触发该事件并向父组件派发一个消息。
style scopedli{color: #223;margin: 10px 0;font-size: 25px;}li:hover{cursor: pointer;color: #31c27c;}li:hover::after{content: -点击已办;color: red;}
/style上面的代码是 List.vue 文件的样式部分主要用于美化待办列表的样式。
