VUE2 Day01指令

最新推荐文章于 2024-08-28 11:59:16 发布
最新推荐文章于 2024-08-28 11:59:16 发布
阅读量387 收藏 6
点赞数 7
分类专栏： VUE2+3学习资料 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52284271/article/details/134071333
版权

Vue基本概念
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
v-show底层原理：切换 css 的 display: none 来控制显示隐藏
v-if 底层原理：根据 判断条件 控制元素的 创建 和 移除（条件渲染）

控制元素显示隐藏

在这里插入图片描述
条件判断
在这里插入图片描述
注册事件 v-on
在这里插入图片描述
在这里插入图片描述

让提供的所有methods中的函数，this都指向当前实例

v-on调用传参
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
key给元素添加唯一标识
在这里插入图片描述
在这里插入图片描述

瑜 ～
关注
  • 7
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue指令--day01
Navie的博客
03-28 300
day1 vscode 使用 snippets 为 .vue 生成模板 ctrl + shift + p 输入 snippets 后，选择首选项：配置用户代码片段 输入vue 后点击 vue.json后就可以在里面输入模板 当我们新建.vue文件后 输入vue后按tab键，就能够生成一套我们在vue.json里定义的模板 1.基本语法 MVVM是前端视图层的概念，主要关注于视图层分离，三部...
Vue入门day01笔记
10-27
### Vue入门day01笔记详解 #### 库与框架的区别 在软件开发中，库（library）和框架（framework）都是提高开发效率、简化开发流程的重要工具，但它们有着本质的区别。 - **库（Library）**： - 库通常为开发者...
学习vue框架day01 指令和选项
zpqyqs的博客
05-25 60
7.vue框架的核心思想： 数据驱动视图更新。3.常用的指令（四大金刚）5.vue中的this。
day1学习vue2笔记 vue指令
weixin_51715424的博客
08-10 801
vue基础学习
vue-day01
ZHUSHANGLIN的博客
07-31 297
在Vue中可以通过自定义按键修饰符别名< div id = " app " > 预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法 < input type = " text " v-on: keydown.f5 = " prompt() " > < script > Vue . config . keyCodes . f5 = 116;alert('我是 F5！');} } });
Vue学习day01笔记
m0_73158362的博客
06-03 454
概念：Vue (读音 /vjuː/，类似于 view) 是一套 **构建用户界面 ** 的渐进式框架基于数据渲染出用户可以看到的界面所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点所谓框架：就是一套完整的解决方案举个栗子如果把一个完整的项目比喻为一个装修好的房子，那么框架就是一个毛坯房。我们只需要在“毛坯房”的基础上，增加功能代码即可。提到框架，不得不提一下库。库，类似工具箱，是一堆方法的集合，比如 axios、lodash、echarts等。
VUE入门day01
weixin_44303986的博客
10-11 371
1.什么是VUE： VUE是渐进式的基于MVVM设计模式的纯前的JS框架 渐进式：可以在项目中逐步使用VUE的功能，也可以和其他技术混搭。 vs 全家桶：要使用，就必须使用全套所有技术。且不能和其他技术混搭。 框架：原生DOM vs JQuery函数库 vs VUE框架 dom纯手工，更复杂 jquery写更少的代码，完成更多的事 框架：彻底简化了步骤，无需人工干预 VUE只适合于数据操作为主的项目 2.MVVM设计模式 传统前端划分： HTML：专门保存网页内容和结构的文档 CSS：专门定义网页样式的文档
Vue DAY01
qq_40185402的博客
11-02 229
Vue 第一天
VUE-DAY01
qq_42221321的博客
01-05 214
04、简单Vue创建实例 总结: (1)定义变量:let 定义变量 ； const 定义常量； (2)const app = new Vue ({ el:加上绑定的元素； data:{ } }) 其中创建实例关键字为new，Vue指调用vue.js中的Vue函数直接调用函数进行创建实例，类似于var app= function vue(); <div id="app"> <p>{{message}}</p> <p>{{
Vue基础day01
阿卡内的博客
04-05 580
Vue基础day01
vue2-day3.zip
08-10
在"day3"的学习内容中，你可能会深入理解如何使用这些指令创建复杂的组件，并掌握响应式系统的工作原理，这是Vue实现数据变化自动更新视图的关键。 其次，Vue的组件化系统是其强大之处。组件可以看作是可复用的UI...
day01-VUE进阶
10-29
2. 使用 Vue CLI 创建前端工程的两种方式：vue create 项目名称和 vue ui。 3. 了解项目结构：node_modules、assets、components、App.vue、main.js、package.json 和 vue.config.js。 4. 启动前端项目，了解服务...
Vue基础day2学习资料.zip
03-31
首先，"day02_Vue01-基础语法3.ppt"可能是一个关于Vue基础语法的演示文稿。这通常会覆盖以下内容： 1. **Vue实例**：Vue应用程序的核心是Vue实例，它通过`new Vue()`创建。实例可以包含数据、方法、生命周期钩子等...
vue2-day4.zip
08-10
总的来说，"vue2-day4.zip"的学习内容可能涵盖了Vue 2的核心特性和实际开发技巧，包括组件化、数据绑定、指令、计算属性、事件处理、虚拟DOM、以及状态管理。通过这一天的学习，你应该具备了更强大的Vue开发能力。...
vue ref和reactive区别
灰海
08-25 1525
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
AI 大模型时代，对前端工程师有哪些机遇和挑战？
最新发布
Z4400840的博客
08-28 384
AI 大模型时代为前端工程师带来了丰富的机遇，同时也带来了挑战。前端工程师需要积极适应这些变化，掌握新的技能，以抓住时代发展的红利。通过不断学习和提升技术水平，前端工程师可以在AI时代中发挥更大的作用，创造更多的价值。
零基础5分钟上手亚马逊云科技-云原生架构设计
m0_66628975的博客
08-26 1659
欢迎来到小李哥全新亚马逊云科技AWS云计算知识学习系列，适用于任何无云计算或者亚马逊云科技技术背景的开发者，通过这篇文章大家零基础5分钟就能完全学会亚马逊云科技一个经典的服务开发架构方案。我会每天介绍一个基于亚马逊云科技AWS云计算平台的全球前沿云开发/架构技术解决方案，帮助大家快速了解国际上最热门的云计算平台亚马逊云科技AWS最佳实践，并应用到自己的日常工作里。
前端宝典十六：深入浅出8大设计模式
franktaoge的博客
08-24 1415
本文主要探讨前端开发中的各种设计模式，主要分类有： - 单例模式 - 建造者模式 - 代理模式 - 装饰器模式 - 适配器模式 - 策略模式 - 观察者模式 - 发布订阅模式 通过对他们实际开发中的使用场景的解析，深入浅出的一起更全面直观的进行学习：
vue2实现可折叠日历
09-17
可以使用Vue.js和一些CSS样式实现可折叠日历。 首先，在Vue项目中创建一个组件，用于显示日历。可以使用v-for指令来循环渲染日历的每一天，然后根据需要添加样式和交互行为。 在组件的模板中，你可以使用表格来布局日历，并使用v-for指令循环渲染表格的行和列。每个单元格可以用一个对象来表示，包括日期、事件等信息。 在组件的数据中，你需要定义一个数组来存储日历的数据。你可以使用JavaScript的Date对象来生成日历的日期数据，并将它们添加到数组中。 接下来，你可以为日历添加折叠功能。你可以使用Vue的条件渲染，通过控制一个变量来展开或折叠日历的内容。 最后，你可以为日历的每个日期添加点击事件，以实现一些交互行为，例如显示日期的详细信息或执行相关操作。 以下是一个简单的示例代码： ```vue <template> <div> <button @click="toggleCalendar">{{ isOpen ? '折叠日历' : '展开日历' }}</button> <table v-if="isOpen"> <thead> <tr> <th v-for="day in daysOfWeek" :key="day">{{ day }}</th> </tr> </thead> <tbody> <tr v-for="(week, index) in weeks" :key="index"> <td v-for="day in week" :key="day.date" @click="showDetails(day)"> {{ day.date }} </td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { isOpen: false, daysOfWeek: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], weeks: [] } }, methods: { toggleCalendar() { this.isOpen = !this.isOpen; }, showDetails(day) { // 处理点击日期的逻辑 } }, mounted() { // 生成日历数据的逻辑 } } </script> <style scoped> /* 添加样式以美化日历 */ table { width: 100%; } th, td { padding: 10px; text-align: center; } td:hover { cursor: pointer; background-color: #e9e9e9; } </style> ``` 以上代码只是一个简单的示例，你可以根据你的需求进行修改和扩展。希望能对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值