创建一个vue项目
默认端口号:5173
支持组合式API
ref工具:
从vue工具库中引用ref工具,用于存放数据 ref可以实现工具绑定
点击按钮实现count自加1
vue3实现
scoped
在 Vue.js 中,<style scoped>
允许你只为当前组件的模板定义 CSS 样式,而不会影响到其他组件的样式。在一个 Vue 组件的 <style>
标签中添加了 scoped
属性后,Vue 会通过一种机制(通常是 CSS 的 ::v-deep
、/deep/
或 >>>
伪类,但在 scoped 样式内部自动处理)来修改组件中的选择器,以确保这些样式只应用于当前组件的根元素下的元素,从而避免了全局样式冲突。
vue2实现
setup()
程序的入口
reactive和ref
存放数据的函数,可实现数据绑定
(1)reactive:存放对象类型数据,可以返回该对象
(2)ref:存放简单类型或对象类型的数据,返回一个对象
共同点:都可以实现数据绑定
不同点:
reactive:主要用于处理对象或数组等复杂数据类型,将整个对象或数组转为响应式对象。它能够深度监听对象内部属性的变化,并触发视图更新。
ref:主要用于处理基本类型数据(如字符串、数字、布尔值等)或单一值,将单一值转为响应式数据。虽然ref也可以包装对象或数组,但通常不是最佳实践,因为它可能不会完全响应化对象内部的属性变化。
ref:通过.value
属性来访问或修改其内部的值。在模板中,Vue会自动处理ref的.value
访问,但在JavaScript代码中需要显式访问.value
。
reactive:直接通过对象属性访问其值或方法,无需额外的.value
属性。