随笔分类 - 前端学习 / vue学习-官方教程
摘要：官方教程链接 父组件还可以通过插槽 (slots) 将模板片段传递给子组件： App.vue <script setup> import { ref } from 'vue' import ChildComp from './ChildComp.vue' const msg = ref('from
阅读全文
摘要：官方教程链接 子组件还可以向父组件触发事件 子组件声明触发的事件，并且带参数触发 <script lang="ts" setup> const emit = defineEmits(['res']) emit('res','hi thisismy msg') // 第一个参数是事件名称，其他参数都会
阅读全文
摘要：官方教程链接 子组件可以通过 props 从父组件接受动态数据 首先，需要声明它所接受的 props： const props = defineProps({ msg: String }) 在父组件中传数据 <template> <Props :msg="hiHi"/> </template> <s
阅读全文
摘要：官方教程链接 侦听器： import { ref, watch } from 'vue' const count = ref(0) watch(count, (newCount) => { console.log(`new count is: ${newCount}`) }) pre标签：识别jso
阅读全文
摘要：官方教程链接 ref标签（模板引用） 手动操作 DOM，使用模板引用，就是指向模板中一个 DOM 元素的 ref <p ref="pElementRef">hello</p> 要访问该引用，我们需要声明一个同名的 ref： const pElementRef = ref(null) 生命周期 详见前
阅读全文
摘要：官方教程链接 Class 与 Style 绑定 Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强 <span :class="{done:item.done}">{{ item.text }}</span> 如果item.done是true，以上代码实际为 <s
阅读全文
摘要：学习教程 使用 v-for 指令来渲染一个基于源数组的列表 <ul> <li v-for="todo in todos" :key="todo.id"> {{ todo.text }} </li> </ul> 更新列表的方式1（添加元素） todos.value.push(newTodo) 更新列表
阅读全文
摘要：使用教程 使用 v-if , v-else 指令来有条件地渲染元素： 如下例，当 awesome 值为真值 (Truthy) 时渲染第一个 h1 ，否则渲染第二个 h1 <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1>
阅读全文
摘要：学习教程 同时使用 v-bind 和 v-on 来在表单的输入元素上创建双向绑定： <input :value="text" @input="onInput"> 在文本框里输入，同时更新 里的文本。实现如下 <script setup> import { ref } from 'vue' const
阅读全文
摘要：教程链接 使用 v-on 指令监听 DOM 事件 <button v-on:click="increment">{{ count }}</button> 简写语法 <button @click="increment">{{ count }}</button> <script setup> impor
阅读全文
摘要：学习教程-官方教程 在 Vue 中，mustache 语法 (即双大括号) 只能用于文本插值。为了给 attribute 绑定一个动态值，需要使用 v-bind 指令： <div v-bind:id="dynamicId"></div> v-bind 专门的简写语法： <div :id="dynam
阅读全文
摘要：学习教程-vuejs官方教程 上班看不了视频，所以看文字版教程 什么是响应式 能在改变时触发更新的状态被称作是响应式的。 API reactive() 由 reactive() 创建的对象都是 JavaScript Proxy，其行为与普通对象一样 reactive() 只适用于对象 (包括数组和内
阅读全文
