随笔分类 - 前端 / vue-入门
摘要：动态组件 有些场景下会需要在两个组件之间来回切换，比如tab页面 App.vue <template> <!--组件标签--> <component :is="tabComponent"></component> <button @click="changeHandle">切换组件</button>
阅读全文
摘要：组件生命周期 每个Vue组件实例在创建是都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模版，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。 生命周期函数都是会自己执行 app.vue <template>
阅读全文
摘要：插槽-基本使用方式 我们已经了解了组件能够接收任意类型的JavaScript值作为props，但是组件要如何接收模版内容呢？在某些场景中，我们可能想要为子组件传递一些模版片段，让子组件在他们的组件中渲染这些片段。 最基本的使用方式 app.vue <template> <!--单标签就是仅应用当前组
阅读全文
摘要：透传Attribute 透传Attribute指的是传递给一个组件，却没有被该组件声明为props或emits的attribute或者v-on事件监听器。最常见的列子就是class、style和id。 当一个组件以单个元素为根路径渲染时，透传的attribute会自动被添加到根元素上 app.vue
阅读全文
摘要：本人是一名四年的软件测试人员，想努力向测试开发方向发展，因此在学习的道路上不停在探索。 软件测试所需要的知识面太过庞大，但感觉好的测试开发都是会写前端的，也算是在模仿前辈们的脚步前进，希望不会让自己太受打击了，哈哈哈。 对于前端，其实是断断续续有在接触，包括html、css、js，但是苦于不知道行进
阅读全文
摘要：组件事件 在组件的模版表达式中，可以直接使用$emit方法触发自定义事件 触发自定义事件的目的是组件之间传递数据，通过组件事件可以实现子级传递参数给父级 App.vue <template> <ComponentEvent /> </template> <script> import Compone
阅读全文
摘要：组件传递数据_Props 静态数据传递 组件与组件之间不是完全独立的，而是有交集的，那就是组件与组件之间是可以传递数据的 传递数据的解决方案就是props app.vue <template> <!--主要要生效Header中的样式，需要删除main.json中默认的main.css样式--> <!
阅读全文
摘要：组件注册方式 一个vue组件在使用前需先被“注册”，这样vue才能在渲染模版是找到其对应的实现。组件注册有两种方式：全局注册和局部注册 全局注册 在最外层注册一次，在最内层组件都能使用 main.js import { createApp } from 'vue' import App from '
阅读全文
摘要：组件嵌套关系 组件允许我们将UI划分为独立的，可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被阻止成层层嵌套的树状结构 这和我们嵌套HTML元素的方式类似，Vue实现了自己的组件模型，使我们可以在每个组件内封装自定义内容和逻辑 APP.vue <template> <!--主
阅读全文
摘要：模版引用 虽然Vue的声明性渲染模型抽象了大部分的DOM的直接操作，但在某些情况下，我们仍然需要直接访问底层DOM元素。要实现这一点，我们可以使用特殊的ref attribute 挂载结束后引用都会被暴露在this.
摘要：组件组成 组件最大的优势就是可复用性 当使用构建步骤是，我们一般将vue组件定义在一个单独的.vue文件中，这杯叫做单文件组件（简称SFC） 组件组成结构 <!--承载所有的html标签,组件中必须要有的部分--> <template> <div>承载标签</div> </template> <!-
阅读全文
摘要：表单输入绑定 在前端处理表单时，我们常常需要将表单输入框的内容同步给JavaScript中相应的变量。手动连接值绑定和更改事件监听器可能会比较麻烦，v-model指令帮我们简化了这一步骤。 <template> <h3>表单输入绑定</h3> <form> <!--v-model：在页面中输入信息的
阅读全文
摘要：style绑定 数据绑定的一个常见需求场景式操作元素的css style列表，因为style是一个Attribute，我们可以和其他Attribute一样使用v-bind，将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且容易出错的。因此，vue专门为style的v-
阅读全文
摘要：侦听器 我们可以使用watch选项在每次响应式属性发生变化时触发一个函数 <template> <h3>侦听器</h3> <!--不可以被监听，是固定的数据--> <p>{{ message }}</p> <!--可以被监听，只能监听响应式数据(变化的数据)--> <button @click="u
阅读全文
摘要：class绑定 数据绑定的一个常见需求场景是操纵元素的CSS class列表，因为class是Attribute，我们可以和其他Attribute一样使用v-bind将它们动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，vue专门为class和v-bind用
阅读全文
摘要：数组变化侦测 变更方法 变更方法，顾名思义，就是对调用他们的原数字进行变更。vue能够侦听响应式数组的变更方法，并在他们被调用时触发相关的UI更新。这些变更方法包括： push() pop() shift() unshift() splice() sort() reverse() 替换一个数组 相对
阅读全文
摘要：计算属性 模版中的表达式虽然方便，但是也只能用来做简单的操作。如果在模版中写太多的逻辑，会让模版中变得臃肿，难以维护。因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑。 <template> <h3>计算属性</h3> <h3>{{ itaj.name }}</h3> <p>{{ itaj.c
阅读全文
摘要：事件修饰符 在处理事件时调用event.preventDefault()或event.stopPropagation()是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理DOM事件的细节会更好。 为解决这一问题，Vue为V-on提供了事件修饰符，常用有以下几个： .s
阅读全文
摘要：事件参数 事件参数可以获取event对象和通过事件传递数据 获取event对象 <template> <h3>内联事件处理器</h3> <button @click="addCount">func-add</button> <p>{{ count }}</p> </template> <script
阅读全文
摘要：事件处理 我们可以使用v-on指令（简写为@）来监听DOM事件，并在事件触发时，执行对应的javascript。用法v-on:click="methodName"或者@click="handler" 事件处理器的值可以是： 内联事件处理器：事件被触发时执行的内联JavaScript语句（与oncli
阅读全文
