![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue3
文章平均质量分 72
<编程路上>
这个作者很懒,什么都没留下…
展开
-
vue3学习14:html基础知识学习(css)
CSS 指的是层叠样式表(Cascading Style Sheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS 节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在 CSS 文件中。标签选择器结构:标签名 { css属性名:属性值; }类选择器.类名 { css属性名:属性值; }id选择器#id属性值 { css属性名:属性值; }通配符选择器结构:* { css属性名:属性值; }class类名与id属性值的区别1class类名相当于姓名,可原创 2022-07-13 14:25:19 · 681 阅读 · 0 评论 -
vue3学习13:html一些基本知识(标签)
自学用,总结可能不够全面。html组成部分:html标签:网页的整体head标签:网页的头部body标签:网页的身体title标签:网页的标题1.h标签文字都有变大,并且从h1 → h6文字逐渐减小,独占一行2.段落标签3.换行标签让文字强制换行显示4.水平线标签分割不同主题内容的水平线显示:5.文本加粗6.下划线7.倾斜8.删除线9.图片标签src:目标图片的路径alt:替换文本,当图片加载失败时,才显示alt的文本title:当鼠标悬停时,才显示的文本widt原创 2022-07-12 22:11:16 · 2786 阅读 · 0 评论 -
vue3学习12:img无法显示图片
无法显示图片问题解决方法,只需要加~即可。原创 2022-07-12 10:05:18 · 1088 阅读 · 0 评论 -
vue3学习11:vuex基本使用
需要导入包:创建store/index.js让我们来创建一个 store。在main.js创建一个VueXx.vue在App.vue引用该组件:效果如下:你可以通过 store.state 来获取状态对象,并通过 store.commit 方法触发状态变更, 可以通过 this.$store 访问store实例。mapState 辅助函数当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性原创 2022-07-11 10:34:19 · 266 阅读 · 0 评论 -
vue3学习10:路由基本学习(vue-router)基本使用
vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目中组件的切换。第一步:第二步:vue3设置路由添加一个src/router/index.js文件第三步:在index.js从 vue-router 中按需导入两个方法:第四步:加几个vue组件进行测试:HoMe.vueBookCase.vueBookOne.vueBooktwo.vue第五步:在index.vue导入需要使用路由控制的组件,创建路由实例对象,如下:在原创 2022-07-10 15:59:54 · 2332 阅读 · 0 评论 -
vue3学习9:使用element plus
ElementPlus 是一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。本次举例怎么使用:首先安装然后进行全局引入,在main.js加入:现在可以试一下举个栗子...原创 2022-07-10 10:55:59 · 3056 阅读 · 0 评论 -
vue3学习8:计算属性
计算属性本质上就是一个 function 函数,它可以实时监听 data 中数据的变化,并 return 一个计算后的新值。计算属性关键词: computed。举个栗子原创 2022-07-09 14:37:45 · 575 阅读 · 0 评论 -
vue3学习7:props以及验证
props 是组件的自定义属性,组件的使用者可以通过 props 把数据传递到子组件内部,供子组件内部进行使用。在封装 vue 组件时,可以把动态的数据项声明为 props 自定义属性。自定义属性可以在当前组件的模板结构中被直接使用。然后需要在父组件中调用:具体代码如下:HiVue.vue:app.vue效果如下:如果父组件给子组件传递了未声明的 props 属性,则这些属性会被忽略,无法被子组件使用。可以使用 v-bind 属性绑定的形式,为组件动态绑定 props 的值。举个栗子修原创 2022-07-09 10:48:40 · 1558 阅读 · 0 评论 -
vue3学习6:组件的全局注册和局部注册,:deep()
vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。每个 .vue 组件都由 3 部分构成,分别是:⚫ template -> 组件的模板结构⚫ script -> 组件的 JavaScript 行为⚫ style -> 组件的样式其中,每个组件中必须包含 template 模板结构,而 script 行为和 style 样式是可选的组成部分。vue 中注册组件的方式分为“全局注册”和“局部注册”两种,其中:⚫ 被全局注册的组件,可以在全局任何一个组件内使用⚫ 被局原创 2022-07-09 10:28:51 · 2328 阅读 · 0 评论 -
vue3学习5:v-for
vue 提供了 v-for 指令,用来辅助开发者基于一个数组来循环渲染相似的 UI 结构。 v-for 指令需要使用 item in items 的特殊语法,其中, items 是待循环的数组, item 是当前的循环项。v-for 指令还支持一个可选的第二个参数,即当前项的索引。语法格式为 (item, index) in items。当列表的数据变化时,默认情况下,vue 会尽可能的复用已存在的 DOM 元素,从而提升渲染的性能。但这种默认的性能优化策略,会导致有状态的列表无法被正确更新。为了给 vu原创 2022-07-08 18:40:27 · 5137 阅读 · 0 评论 -
vue3学习4:v-if,v-show,v-else,v-else-if
v-if 指令会动态地创建或移除 DOM 元素,从而控制元素在页面上的显示与隐藏;v-show 指令会动态为元素添加或移除 style=“display: none;” 样式,从而控制元素的显示与隐藏。如果需要非常频繁地切换,使用 v-show如果运行时条件很少改变,使用 v-if举个栗子v-if与v-elsev-if和v-else是在一起用的,当v-if的条件值为false时,就是执行v-else语句所在的标签v-else-if充当 v-if 的“else-if 块”,可以连续使用举个原创 2022-07-08 16:16:49 · 851 阅读 · 0 评论 -
vue3学习3:按键修饰符,v-model
按键修饰符在监听键盘事件时,可以为键盘相关的事件添加按键修饰符v-model 双向数据绑定指令v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作:为了方便对用户输入的内容进行处理,vue 为 v-model 指令提供了 3 个修饰符v-model.number 自动将用户的输入值转为数值类型v-model.trim 自动过滤用户输入的首尾空白字符v-model.lazy 在“change”时而非“input”时更新......原创 2022-07-08 14:11:04 · 1587 阅读 · 0 评论 -
vue3学习2:vue 的指令v-on,event
作用:如果我们想监听用户的点击, 拖拽, 键盘事件等, 可以使用v-on指令,v-on就是用于绑定事件的,通过 v-on 绑定的事件处理函数,需要在 methods 节点中进行声明。简写:@举个栗子v-on 指令所绑定的事件处理函数中,可以接收到事件对象 event。event是vue提供的特殊变量,用来表示原生的事件参数对象event。event 是 vue 提供的特殊变量,用来表示原生的事件参数对象 event。event是vue提供的特殊变量,用来表示原生的事件参数对象event。event原创 2022-07-08 12:51:46 · 1863 阅读 · 0 评论 -
vue3学习1:vue 的指令v-text,v-html,v-bind
指令是vue自定义的以v-开头的自定义属性。每个不同的属性都有各自不同的意义和功能作用 : 操作元素中的纯文本简写: {{}}举个栗子:可以看出会覆盖元素中默认的文本内容。;使用只会将值放入{{}}中,它专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达式作用 : 操作元素中的HTML标签,v-text会将元素当成纯文本输出,v-html会将元素当成HTML标签解析后输出举个栗子{{}}/v-text不能解析html元素,只会照样输出作用 :原创 2022-07-08 11:03:45 · 823 阅读 · 0 评论