
Vue
文章平均质量分 97
He guolin
软件工程
展开
-
vue计算属性
参考文献:Vue的快速上手Vue指令上Vue指令下Vue指令的综合案例指令的修饰符v-bind操作class注:在看本文章前优先把参考文献看完!!!基于现有的数据,计算出来的新属性。依赖的数据变化,自动重新计算。例如:这张图中,我们的礼物总数是由我们的数量计算出来的,当我们的数量中有个数据发生变化,礼物总数也会更着变化。语法:1.声明在computer配置项中,一个计算属性对应一个函数。2.使用起来和普通属性一样使用{{计算数学名}}我们平时声明属性是往data里面放的,而这一次要放进与原创 2025-02-09 17:55:07 · 955 阅读 · 0 评论 -
v-bind操作class
参考文献:Vue的快速上手Vue指令上Vue指令下Vue指令的综合案例指令的修饰符注:在看本文章前优先把参考文献看完!!!为了方便开发者进行样式控制,Vue扩展了v-bind的语法,可以针对class类名和style行内式进行控制。语法 :class = “对象/数组”1.对象 -> 键就是类名,值是布尔值。如果值为true,有这个类,否则没有这个类使用场景:一个类名来回切换。2.数组 -> 数组中所有的类,都会添加到盒子上,本质就是一个class列表使用场景:批量添加或删除类。那么我们接原创 2025-01-14 21:10:50 · 491 阅读 · 0 评论 -
指令的修饰符
参考文献:Vue的快速上手Vue指令上Vue指令下Vue指令的综合案例注:在看本文章前优先把参考文献看完!!!通过 “.” 指明一些指令 后缀,不同后缀封装了不同的处理操作 -> 简化代码。例如:① 按键修饰符->键盘回车监听② v-model修饰符③事件修饰符我们以第一个键盘回车监听事件为例子。我们在上一篇文章写了一个记事本的案例,记事本是点击添加任务按钮才能添加任务,这次我们加一个按回车键也能添加任务,那么代码需要修改的地方为:这样按下我们的回车键也可以添加任务。那么我们来看下它的原理是原创 2025-01-12 22:28:53 · 841 阅读 · 0 评论 -
Vue指令的综合案例
参考文献:Vue的快速上手Vue指令上Vue指令下功能需求:1.列表渲染2.删除功能3.添加功能4.底部统计和清空首先先完成第一步,将列表渲染出来,为了让样式稍微好看一点,我加了部分css代码。首先设置标题为记事本,其次设置一个输入添加事件的文本框和一个用于添加任务的按钮。接下来我们在data数据里设置一个数组,里面装存的有我们的任务事件,最右边有个删除按钮。再用v-for循环遍历,让我们的列表事件渲染到视图上。接下来来看下我们渲染后的结果。接下来我们要进行删除功能,当鼠标滑动到当前任务的原创 2025-01-09 23:52:43 · 753 阅读 · 0 评论 -
Vue指令(下)
参考文献:Vue的快速上手Vue指令上1.作用:动态的设置html的标签属性 -> src,url,title等等2.语法:v-bind:属性名=“表达式”(注:也可以直接简写成:属性名=“表达式”)这串代码用于动态的设置我们的图片的地址接下来我们对上述讲过的vue指令做一个小案例。首先我们准备了六张图片,在页面中只展示一张图片,通过点击上一页或者下一页来切换图片。核心思路分析:1.数组存储图片路径->[图片1,图片2,图片3,…]2.准备下标index,数组[下标] -> v-bind设置原创 2025-01-09 15:30:54 · 696 阅读 · 0 评论 -
Vue指令(上)
参考文献:Vue的快速上手Vue会根据不同的 [指令],针对标签实现不同的 [功能]。指令:带有 v-前缀的特殊标签属性。接下来看下vue指令和普通标签v-html:作用:设置元素的innerHTML语法:v-html=“表达式”接下来看个实例这样就可以将我们的百度链接渲染到页面上了。那我们的vue指令一共有多少呢?大家可以查看我们的api官网api官网https://v2.cn.vuejs.org/v2/api/一共14个,常用的10个v-show1.作用:控制元素显示隐藏2.语法原创 2025-01-08 20:14:11 · 690 阅读 · 0 评论 -
[Vue]的快速上手
概念:Vue是一个用于构建用户界面的渐进式 框架。构建用户界面:基于数据渲染出用户的页面下面是代码的数据,而我们构建用户界面需要做的就是将它转化成用户可视化的视图。渐进式:循序渐进Vue的两种使用方法:1.Vue核心包开发场景:局部模块改造2.Vue核心包&Vue插件工程化开发场景:整站开发框架:一套完整的项目解决方案优点:大大提升开发效率(70%)缺点:需要理解记忆规则->官网步骤如下:引包的官网:Vue2官网https://v2.cn.vuejs.org/点击起步,计入安装界原创 2025-01-07 21:57:46 · 1011 阅读 · 0 评论