vue 学习案例20220327

最新推荐文章于 2024-04-11 02:33:16 发布
最新推荐文章于 2024-04-11 02:33:16 发布
阅读量202 收藏
点赞数
文章标签： java 微服务 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45793819/article/details/123770258
版权

vue 购物车
1 导入项目 需要 npm install 下载包.
组件化开发
在这里插入图片描述
组件开发 下载 导入 注册 使用.

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

导入接收到组件首字母大写表示组件 不是标签

组件的拼接
@ 拼接路劲可以直接写 ，vue做了分装
导入的组件跟标签一样使用在这里插入图片描述
在这里插入图片描述

父传给子的 用vi-bind 因为是只读的

对数据的封装
在这里插入图片描述

在这里插入图片描述

父传子 ----》子传父 原因是因为 子组件要修改父组件的数据 ，
在这里插入图片描述
复选框本身就有的 change事件
在这里插入图片描述
穿对象 接对象
在这里插入图片描述

在父页组件中
在这里插入图片描述
在这里插入图片描述

项目结构
在这里插入图片描述
一个数据的结果依赖其他的数据可以使用计算属性
在这里插入图片描述
先写子 组件定义 后写父传
在这里插入图片描述
子类自定义的传参数方法
在这里插入图片描述

更改状态

在这里插入图片描述
保留两位小数
在这里插入图片描述
好的习惯
在这里插入图片描述
写法
先写子 pro 后写父 实例

不一定只有兄弟 可以用evenbus ,嵌套复杂的也可以相互传 ，
穿对象
在这里插入图片描述
在这里插入图片描述

最主要还是要懂得分析结构
在这里插入图片描述

动态组件
占位符 ：占用这块地方渲染
在这里插入图片描述
组件切换
在这里插入图片描述
keep -aline.
让组件缓存
没指定 是让所有组件都缓存
在这里插入图片描述
组件缓存做的事
组件激活做的事
在这里插入图片描述
指定缓存哪些组件 注册名称
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
插槽
让用户添加一些信息 ，这个组件的结尾 （在标签的标签体里添加信息元素）

在这里插入图片描述
在这里插入图片描述

简写 “#”

在这里插入图片描述
在这里插入图片描述

vant库
在这里插入图片描述

具名插槽
在这里插入图片描述
插槽传值.
作用于插槽
在这里插入图片描述
传对象
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

自定义组件
私有指令
共有指令

私有指令
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
bing 只触发一次

update 调用一次 触发一次
在这里插入图片描述
优化 参数 ，操作的内容相同
在这里插入图片描述

在这里插入图片描述

全局申明 的共用 在main.js 里面
定义全局
在这里插入图片描述
提示
在这里插入图片描述
eslint 规范代码开发
tabsize 缩进
自动保存
项目创建

debage
在这里插入图片描述
自动以规则
在这里插入图片描述

多一行
在这里插入图片描述

少一行
在这里插入图片描述

多一个空格
在这里插入图片描述
eslint 规则
在这里插入图片描述
eslint 需要的插件
下载
在这里插入图片描述
后设置文件
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这个需要自己改
在这里插入图片描述
在这里插入图片描述

优化
定义全局axios
在这里插入图片描述
在这里插入图片描述

全局路径
在这里插入图片描述

在这里插入图片描述
上面有缺点 不能复用
在这里插入图片描述
路由
在这里插入图片描述
哈希地址 就是# 后面的
哈希与组件的对应关系

在这里插入图片描述

vue-rount
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

给VUE 装插件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
不会调到一个空页面
在这里插入图片描述
嵌套路由
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

动态路由
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
用于嵌套
在这里插入图片描述

1 2 3 路径参数
在这里插入图片描述

在这里插入图片描述

导航
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

前进后退
在这里插入图片描述

导航首位
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
to
在这里插入图片描述

上一个路径的信息
在这里插入图片描述

在这里插入图片描述

只对某个页面进行过滤
在这里插入图片描述

牛犊6
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue入门学习小案例-小王记事本
04-05
Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王记事本 Vue入门学习小案例-小王...
Vue学习案例(每日更新，加油！！！不断更新中……)
qq_69325307的博客
12-20 567
Vue学习。
Vue入门
BAIQW的博客
07-07 799
vue是一个构建用户界面UI的渐进式javascript框架，渐进式的框架是指可以一步一步的由浅入深的去使用这个框架，该框架可以逐步引入项目。作者：尤雨溪vue官网 https://cn.vuejs.org/1.体积小 压缩后33k左右，体积小意味着下载速度很快。运行快，数据传输快。2.更高的运行效率 基于虚拟dom，一种预先通过javascript进行各种计算，把最终的DOM操作计算出来并进行优化的技术。所谓虚拟dom指的是对真实dom的一种模拟。相对于直接操作真实dom，我们构建一棵虚拟的dom树，将各
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
CYK_byte的博客
10-16 1万+
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
Vue简单练手案例
A_Common_Man的博客
05-05 4408
适合vue初学者的3个练手小案例，加深对数据驱动视图的理解，体会到与原生js直接操纵Dom节点的区别
Vue简单入门及案例
qq_54605990的博客
04-27 1794
VUE入门 简介： JavaScript框架 简化Dom操作 响应式数据驱动 之前基于DOM----->（1）获取DOM元素 （2）操作DOM元素 Vue官网： https://cn.vuejs.org Vue.js的优点 体积小 压缩后33K 更高的运行效率 基于虚拟dom，一种可以与预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM 双向数据绑定 让开发者不用再去操作D
webpack使用Vue学习案例
08-25
在"webpack使用Vue学习案例"中，我们将深入理解如何将这两个强大的工具结合，以构建高效的前端项目。 首先，让我们了解Webpack的基础。Webpack 将应用程序视为由多个模块组成，这些模块可以是 JavaScript 文件、CSS...
Vue学习Day9案例
04-30
在Vue学习的第九天，我们将深入探讨如何在实际项目中运用Vue.js，特别是与数据获取相关的实践案例。在这个"Vue学习Day9案例"中，我们重点关注`Src`目录及其子目录`Src_ajax_user`，这通常代表了一个Vue应用的数据...
springboot+vue整合案例
12-05
Spring Boot是Spring框架的一种快速启动方式，它简化了配置并提供了开箱即用的功能，而Vue.js则是一种轻量级的前端JavaScript框架，以数据驱动和组件化著称，易于学习和使用。 首先，让我们深入了解Spring Boot。...
vue2案例todolist
05-23
在本Vue2案例“todolist”中，我们将深入探讨Vue.js框架的核心概念和技术，以便创建一个简单的待办事项管理应用。Vue.js是一个轻量级、高性能的前端JavaScript框架，广泛用于构建用户界面。以下是该案例涉及的主要...
vue案例学习视频
03-27
总共12章课程，从简介到实战都有介绍，实战是重点。很不错 分享给有需要的同学
vue.js学习实例
08-29
基于vue.js2.0,里面设计及了多种插件,tab,touch,轮播，时间选择，toast等， 并且有文档说明，用法详解。
vue.js学习经典实例（本人总结）
12-08
基于vue.js开发，移动前端的例子，聊天窗口，消息列表，tab切换。
VUE入门+5个小案例
热门推荐
Beyondczn的博客
02-23 3万+
本文是我心血来潮学习Vue框架所做的笔记，也供童鞋们学习参考。作为后端的开发人员，学习前端的Vue框架只是单纯地去了解下前端框架的内容，所以并没有深入地去学习，因此本文只适合Vue入门的童鞋哦。由于我的能力有限，所写的内容可能有错误，小伙伴们可以在评论区中进行讨论。这篇笔记是根据哔哩哔哩大学中黑马程序员up主的视频内容进行记录的。视频地址：前端基础必会教程-4个小时带你快速入门vue，欢迎童鞋们去三连哦。 一、Vue基础 1.第一个Vue程序 步骤： 引入vue开发环境 <script sr.
vue快速入门的三个小实例,vue从入门到精通教程
chatgpt001的博客
10-16 2010
使用v-bind指令∶作用：动态绑定属性预期：any (with argument) | Object (without argument)参数：attrOrProp (optional)v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值(这个学到组件时再介绍)在开发中，有很多属性需要动态进行绑定，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等。作用:绑定事件监听器缩写:@
Vue-详解+案例，你赶紧学会吧
2401_84139924的博客
04-11 991
大家好！一起看下Vue.js 吧！提示：以下是本篇文章正文内容，下面案例可供参考一、vue是什么？Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。二、使用步骤1.声明和渲染代码如下（第一个vue应用）：el元素命中的内部建议使用id选择器 其他类 标签 选择器也可以。
分享几个Vue案例供大家一起学习
WebView
12-23 4514
1、适合学习Vue的同学们的第二个项目，同样来自慕课网，代码同样进行了详细注释。 完成后可以算是Vue学习的初级水平。 (https://github.com/SD-Gaming/Vue2.0-ShoppingCart-MOOC) 2、用了Vue-router，axios 完成后算是初中级水平 (https://github.com/SD-Gaming/Vue2.0_CNode.bbs) 3、 V...
vuejs学习小案例
南北极之间
07-06 1109
1、购物车： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <style> [v-cloak] { display: none; ...
vue学习小案例（一）：品牌列表案例
zerobaek的博客
01-22 5555
演示目标区域代码（#app）： 用户进行添加查询操作的区域： &lt;div class="panel panel-primary"&gt; &lt;div class="panel-heading"&gt; &lt;h3 class="panel-title"&gt;添加品牌&lt;/h3&gt; &lt;/div&gt; &lt
vue阶段案例学习计划表
最新发布
06-20
Vue.js是一个流行的前端JavaScript框架，用于构建用户界面。学习Vue阶段案例学习计划可以按照递进的方式进行，以下是建议的一个初级到中级的学习路径： 1. **入门阶段**: - **安装配置**: 学习如何安装和设置Vue CLI（命令行工具），创建新项目。 - **基础组件**: 实践Vue的基本概念，如组件、模板、数据绑定、props、事件和生命周期钩子。 - **实例化**: 创建一个简单的单页应用，理解如何使用`<template>`、`<script>`和`<style>`。 2. **中级阶段**: - **组件化**: 深入研究组件化思想，自定义组件、父子组件通信、路由导航等。 - **指令**: 学习v-bind、v-if、v-for等指令的用法，并了解自定义指令。 - **Vuex状态管理**: 学习如何在多组件间共享状态，以及使用Vuex实现复杂的状态管理。 3. **高级阶段**: - **组件库**: 探索Vue的生态系统，如Vuetify或Element UI，了解如何使用成熟的UI库。 - **API和插件**: 学习Vue的官方API和第三方插件，如axios请求库、Vuex-persistedstate等。 - **响应式原理**: 深入理解Vue的响应式系统，包括数据劫持和依赖收集机制。 4. **实战项目**: - **构建实际项目**: 选择一个实际项目进行开发，例如博客系统、电子商务网站或管理后台，应用所学知识。 - **性能优化**: 学习如何优化Vue应用的性能，如懒加载、虚拟DOM等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值