随笔分类 -  Vue

 
Vue基础 の ref reactive
摘要：响应式引用： 原理： 通过proxy对数据进行封装（接受对象） 数据变化时触发模板内容更新 ref 处理基础数据类型 <script> const root = Vue.createApp({ template:` <div> {{name}} </div> `, setup(props,conte 阅读全文
posted @ 2021-03-28 15:01 周涵柔 阅读(69) 评论(0) 推荐(0)
Vue基础 の render() 函数
摘要：<div id="app"></div> <script> const root = Vue.createApp({ template:` <div> <my-title :level='2'> hey <my-title/> </div> ` }) //定义 全局组件 root.component 阅读全文
posted @ 2021-03-27 16:17 周涵柔 阅读(57) 评论(0) 推荐(0)
Vue基础 の Vue3.0 teleport基础使用
摘要：Teleport 是什么Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。 如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难。使用Teleport 就可以方便的解决组件间 css 层级问题—————— 阅读全文
posted @ 2021-03-27 15:30 周涵柔 阅读(358) 评论(0) 推荐(0)
Vue基础 の 组件 父 --> 子 de传值
摘要：Step1: 父组件调用 子组件 父组件通过 标签上的属性向子组件传值 Step2：子组件通过 props 接受父组件传送的属性，子组件便可以使用。 静态传值： <script> const root = Vue.createApp({ template:` <div> <component—chi 阅读全文
posted @ 2021-03-26 22:02 周涵柔 阅读(74) 评论(0) 推荐(0)
Vue基础 の 组件
摘要：__全局组件__： 优缺点：一直挂载影响性能 使用简单 命名规范：下划线，小写 全局组件的定义： <body> <div id="app"></div> <script> const root = Vue.createApp({ template:` <div> 组件1 <div>组件</div> 阅读全文
posted @ 2021-03-26 21:46 周涵柔 阅读(54) 评论(0) 推荐(0)