开始学习Vue2(脚手架,组件化开发)

一、单页面应用程序

单页面应用程序(英文名:Single Page Application)简 SPA,顾名思义,指的是一个 Web 网站中只有唯一的 一个 HTML 页面,所有的功能与交互都在这唯一的一个页面内完成。

二、vue-cli 脚手架

什么是脚手架

vue -cli Vue.js 开发的标准工具。它简化了程序员基于webpack 创建工程化的 Vue 项目的过程

引用自 vue -cli 官网上的一句话:程序员可以专注在撰写应用上,而不必花好几天webpack 配置的问题

 安装和使用

1、脚手架基于 node 下才可安装

node -v   检测 node 版本(安装成功, 自带 npm 工具)

npm  install   -g cnpm

- -registry=https://registry.npm.taobao.org

注意:npm 安装失败建议先用 npm 安装一下 cnpm 用淘宝镜像安装

2、安装脚手架

vue -cli2.x

np m i vue -cli -g

vue -cli3.x

npm install -g @vue/cli

注: 两个版本不能同时存在

卸载:

np m un vue -cli  @vue/cli

验证:vue -cli 安装成功 vue   -V

3、利用 vue -cli 搭建项目

Vue  in it   模板名称 项目名称(1.x    2.x

Vue  create  项目名称  (3.x  4.x

4、启动开发环境    Npm    serve

vue 项目的运行流程

在工程化的项目中,vue 要做的事情很单纯:通过 main.jsApp.vue 渲染到 index.html 的指定区域中。

其中:

 App.vue 用来编写待渲染的模板结构

index.html 中需要预留一个 el 区域

main.js App.vue 渲染到了 index.html 所预留的区域中

三、组件化开发

> 什么是组件化

组件化开发指的是:根据封装的思想,把页面上可重用的 UI

结构封装为组件,从而方便项目的开发和维护。

vue 是一个支持组件化开发的前端框架。

vue 中规定:组件的后缀名是 .vue。之前接触到的

App.vue 文件本质上就是一个 vue 的组件

使用组件

. 组件开发三步曲:声明注册使用(不搭脚手架)

组件的使用事项:

1.组件必须要有一个根元素

2.当组件在使用中,标签中不需要嵌套东西可以使用单标签

3.在组件复用的时候,就使用双标签

组件开发三步曲:声明注册使用

 vue 组件的三个组成部分:(搭脚手架)

每个 .vue 组件都由 3 部分构成,分别是:

template -> 组件的模板结构

script -> 组件的 JavaScript 行为

style -> 组件的样式

其中,每个组件中必须包含 template 模板结构,而 script行为和 style 样式是可选的组成部分。

 vue 组件的使用

声明组件、注册组件、使用组件

 通过 components 注册的是私有组件

通过 components 注册的是私有子组件

 全局组件

vue项目的main.js入口文件中,通过vue.component()方法,可以注册全局组件

组件中的 props

 什么是 props

props是组件的自定义属性,在封装通用组件的时候,合理地使用props以极大的提高组件的复用性!

 prop 是只读属性

要想修改props的值,可以把props的值转存到data中,因为data中的数据都是可遗可写的!

 prop 的默认值 default

在声明自定义属性时,可以通过defau性来定义属性的默认值。

 prop  type 值类型

在声明自定义属性时,可以通过1ype来定义属性的值类型

Required 的意思时谁用我这个组件就必须要传递 init 的值,如果不传就会报错

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/343774.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

omron adept控制器维修SmartController EX

欧姆龙机器人adept运动控制器维修SmartController EX 19300-000 维修范围:姆龙机器人;码垛机器人;搬运机器人;焊机机器人;变位机等。 Adept Viper s650/s850用于装配、物料搬运、包装和机械装卸,循环周期短…

大模型+自动驾驶

论文:https://arxiv.org/pdf/2401.08045.pdf 大型基础模型的兴起,它们基于广泛的数据集进行训练,正在彻底改变人工智能领域的面貌。例如SAM、DALL-E2和GPT-4这样的模型通过提取复杂的模式,并在不同任务中有效地执行,从…

《汇编语言》- 读书笔记 - 第8章 - 数据处理的两个基本问题(阶段总结)

《汇编语言》- 读书笔记 - 第8章 - 数据处理的两个基本问题(阶段总结) 8.1 bx、si、di 和 bp (可用于内存寻址)8.2 机器指令处理的数据在什么地方8.3 汇编语言中数据位置的表达1. 立即数(idata)2. 寄存器3. 段地址(SA)和偏移地址(EA) 8.4 寻址方式8.5 指…

HPA自动扩缩容

HPA是什么??? Horizontal Pod Autoscaling: k8s自带的模块,pod的水平自动伸缩,对象是pod。 pod占用cpu比率达到一定的阈值,将会触发伸缩机制。 replication controller 副本控制器 deployment controll…

【ZYNQ入门】第九篇、双帧缓存的原理

目录 第一部分、基础知识 1、HDMI视频撕裂的原理 2、双帧缓存的原理 第二部分、代码设计原理 1、AXI_HP_WR模块 2、AXI_HP_RD模块 3、Block design设计 第三部分、总结 1、写在最后 2、更多文章 第一部分、基础知识 1、HDMI视频撕裂的原理 在调试摄像头的时候&#xf…

CMS如何调优

业务JVM频繁Full GC如何排查 原则是先止损,再排查。 FGC的原因是对象晋升失败或者并发模式失败,原因都是老年代放不下晋升的对象了。 1.可能是大对象导致的内存泄漏。快速排查方法:观察数据库网络IO是否和FGC时间点吻合,找到对应…

Servlet生命周期

第一阶段: init()初始化阶段 当客户端想Servlet容器(例如Tomcat)发出HTTP请求要求访问Servlet时,Servlet容器首先会解析请求,检查内存中是否已经有了该Servlet对象,如果有&#xff…

机器人制作开源方案 | 全自动导航分拣机器人

作者:孙国峰 董阳 张鑫源 单位:山东科技大学 机械电子工程学院 指导老师:张永超 贝广霞 1. 研究意义 1.1 研究背景 在工业生产中,机器人在解决企业的劳动力不足,提高企业劳动生产率,提高产品质量和降低…

【c++学习】数据结构中的链表

c链表 数据结构中的链表代码 数据结构中的链表 链表与线性表相对&#xff0c;链表数据在内存中的存储空间是不连续的&#xff0c;链表每个节点包含数据域和指针域。 代码 下述代码实现了链表及其接口 包括增、删、查、改以及其他一些简单的功能 #include <iostream>u…

FRRouting学习(一) 配置日志文件

以配置isis event事件日志为例 1、在配置之前&#xff0c;/var/log/frr路径下是没有文件的&#xff1a; 2、在vtysh config之下输入&#xff1a;log file /var/log/frr/isisd.log debugging 后面的debugging表示日志级别&#xff0c;可以根据自己修改 3、配置好了之后&#xf…

java——数据类型与变量

目录 &#x1f469;&#x1f3fb;‍&#x1f4bb;字面常量 &#x1f469;&#x1f3fb;‍&#x1f4bb;数据类型 &#x1f469;&#x1f3fb;‍&#x1f4bb;变量 ❗整型变量 &#x1f449;int(整型)默认值 &#x1f449;long(长整型) &#x1f449;short(短整型) &…

webpack如何把dist.js中某个模块js打包成一个全局变量,使得在html引入dist.js后可以直接访问

webpack可以通过使用expose-loader来将模块中的一个js文件暴露为全局可以访问的变量。下面是一个示例代码&#xff1a; 1、安装expose-loader npm install expose-loader --save-dev 2、webpack.config.js配置文件 值得注意的是&#xff1a;我在本地使用16.14.2版本的node打包…

Springboot+vue的医院后台管理系统(有报告),Javaee项目,springboot vue前后端分离项目

演示视频&#xff1a; Springbootvue的医院后台管理系统&#xff08;有报告&#xff09;&#xff0c;Javaee项目&#xff0c;springboot vue前后端分离项目 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的医院后台管理系统&#xff0c;采用M&#xff08…

博捷芯划片机在半导体芯片切割领域的领先实力

在当今高速发展的半导体行业中&#xff0c;芯片切割作为制造过程中的核心技术环节&#xff0c;对设备的性能和精度要求日益提升。在这方面&#xff0c;国内知名划片机企业博捷芯凭借其卓越的技术实力和持续的创新精神&#xff0c;成功研发出具备完全自主知识产权的半导体切割划…

基于springboot+vue的海滨体育馆管理系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 研究背景…

牛客周赛 Round 18 解题报告 | 珂学家 | 分类讨论计数 + 状态DP

前言 整体评价 前三题蛮简单的&#xff0c;T4是一个带状态的DP&#xff0c;这题如果用背包思路去解&#xff0c;不知道如何搞&#xff0c;感觉有点头痛。所以最后还是选择状态DP来求解。 欢迎关注 珂朵莉 牛客周赛专栏 珂朵莉 牛客小白月赛专栏 A. 游游的整数翻转 这题最好…

基于GPT3.5逆向 和 本地Bert-Vits2-2.3 的语音智能助手

文章目录 一、效果演示二、操作步骤三、架构解析 一、效果演示 各位读者你们好&#xff0c;我最近在研究一个语音助手的项目&#xff0c;是基于GPT3.5网页版的逆向和本地BertVits2-2.3 文字转语音&#xff0c;能实现的事情感觉还挺多&#xff0c;目前实现【无需翻墙&#xff0…

UV紫外激光打标机的优缺点是什么

​ UV紫外激光打标机具有以下优点&#xff1a; 1. 精度高&#xff1a;紫外激光打标机的光束质量好&#xff0c;聚焦光斑小&#xff0c;可以实现在各种材料上进行超精细打标。 2. 速度快&#xff1a;由于紫外激光的独特特性&#xff0c;打标速度非常快&#xff0c;提高了生产效…

SpringSecurity认证登录成功后获取角色菜单

目录 前言 一、RBAC模型 二、实战应用 1. 建立用户、角色、资源实体类 2. 数据层查询角色资源 3. 业务层实现&#xff0c;调用数据层查询接口 4. SystemController控制器菜单获取方法 5. menu.jsp菜单页面实现 前言 本篇文章接SSM项目集成Spring Security 4.X版本&…

搭建nodejs服务器

简单搭建nodejs服务器&#xff0c;用于爬虫js逆向. 1、安装镜像源 下载nrm npm install -g nrm 设置下载源&#xff1a;&#xff08;最好使用npm源或者淘宝源&#xff09; 例子&#xff1a;npm config set registry http://registry.npmjs.org 查看是否设置成功&#xff1a…