开始学习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 的值,如果不传就会报错

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mp4文件可以转成mp3音频吗

现在是个非常流行刷短视频一个年代,刷短视似乎成了人们休闲娱乐的一种方式,在日常刷短视频过程中,肯定会有很多同学被短视频 bgm 神曲洗脑,比如很多被网红翻唱带火的歌曲,例如其中"不负人间”,就是其中…

【GitHub项目推荐--12 年历史的 PDF 工具开源了】【转载】

最近在整理 PDF 的时候,有一些需求普通的 PDF 编辑器没办法满足,比如 PDF 批量合并、编辑等。 于是,我就去 GitHub 上看一看有没有现成的轮子,发现了这个 PDF 神器「PDF 补丁丁」,让人惊讶的是这个 PDF 神器有 12 年的…

安全基础~通用漏洞2

文章目录 知识补充盲注Boolean盲注延时盲注报错注入二次注入 知识补充 盲注常用 if(条件,5,0) #条件成立 返回5 反之 返回0 left(database(),1),database() #left(a,b)从左侧截取a的前b位 盲注 盲注就是在注入过程中,获取的数据不能回显至前端页面。 …

HYBBS 表白墙网站PHP程序源码 可封装成APP

源码介绍 PHP表白墙网站源码,可以做校园内的,也可以做校区间的,可封装成APP。告别QQ空间的表白墙吧。 安装PHP5.6以上随意 上传程序安装,然后设置账号密码,登陆后台切换模板手机PC都要换开启插件访问前台。 安装完…

1. Matplotlib的Figure基础概念

1. Matplotlib的Figure基础概念 一 **角色和作用**二 **类比:**三 **基本使用示例** Matplotlib是一个用于绘制二维图形的Python库,广泛应用于数据可视化领域。其灵活性和强大的功能使得用户能够轻松创建各种类型的图表,包括折线图、散点图、…

Linux服务器系统修改SSH端口教程

修改端口号是通过修改SSH的配置文件实现的,在服务器终端先激活root用户,然后输入: vim /etc/ssh/sshd_config找到#Port 22这个位置 键盘按i进入编辑模式 删除掉Port 22前面的#,然后键盘按一下回车键(如果没有#可不必…

k8s---helm

Helm是什么? 在没有helm之前。部署一个服务,需要deployment、service、ingress、挂在卷等等相关配置都需要人工来配置。 helm的作用就是通过打包的方式,把需要人工编写的配置集成在一起。是一键式的部署服务。类似于yum功能。 由官方提供的…

Web开发4:单元测试

在Web开发中,单元测试是一种重要的开发实践,它可以帮助我们确保代码的质量和可靠性。通过编写和运行单元测试,我们可以验证代码的正确性,减少错误和缺陷,并提高代码的可维护性。本文将介绍单元测试的概念、好处以及如何…

探索无限:山海鲸可视化搭建的地理展览馆的奇幻之旅

在浩瀚的数字世界中,你是否曾渴望探寻那未曾踏足的秘境,感受大自然的鬼斧神工,或是追溯那遥远的文明印记?现在,山海鲸可视化为你揭开了这一奇幻的探索之旅。 置身山海鲸的世界,就如同手握一把神奇的钥匙&am…

Java框架篇面试题

📕作者简介: 过去日记,致力于Java、GoLang,Rust等多种编程语言,热爱技术,喜欢游戏的博主。 📗本文收录于java面试题系列,大家有兴趣的可以看一看 📘相关专栏Rust初阶教程、go语言基…

c语言小游戏之扫雷

目录 一:游戏设计理念及思路 二:初步规划的游戏界面 三:开始扫雷游戏的实现 注:1.创建三个文件,test.c用来测试整个游戏的运行,game.c用来实现扫雷游戏的主体,game.h用来函数声明和包含头文…

如何在飞书创建企业ChatGPT智能问答助手应用并实现公网远程访问(1)

文章目录 前言环境列表1.飞书设置2.克隆feishu-chatgpt项目3.配置config.yaml文件4.运行feishu-chatgpt项目5.安装cpolar内网穿透6.固定公网地址7.机器人权限配置8.创建版本9.创建测试企业10. 机器人测试 前言 在飞书中创建chatGPT机器人并且对话,在下面操作步骤中…

Java 数据结构集合

文章目录 Java 数据结构1. 基本数据结构1.1 数组 (Array)1.2 链表 (Linked List)1.3 栈 (Stack)1.4 队列 (Queue)双向队列优先级队列 2. 树形数据结构2.1 二叉树 (Binary Tree)2.2 堆 (Heap) 3. 散列数据结构3.1 哈希表 (Hash Map)3.2 LinkedHashMap3.3 TreeMapConcurrentHashM…

【python文件】生成的csv文件没两行数据之间有一个空行

问题描述 用python代码将数据写入csv文件,但生成的csv文件没两行数据之间有一个空行,如下图所示: 解决办法 在open函数中添加newline,如以下代码所示,即可解决这一问题。 with open(r"C:\Users\xxx\Desktop\DR…

Linux的奇妙冒险———vim的用法和本地配置

vim的用法和本地配置 一.vim的组成和功能。1.什么是vim2.vim的多种模式 二.文本编辑(普通模式)的快捷使用1.快速复制,粘贴,剪切。2.撤销,返回上一步操作3.光标的控制4.文本快捷变换5.批量化操作和注释 三.底行模式四.v…

【征服Redis12】redis的主从复制问题

从现在开始,我们来讨论redis集群的问题,在前面我们介绍了RDB和AOF两种同步机制,那你是否考虑过这两个机制有什么用呢?其中的一个重要作用就是为了集群同步设计的。 Redis是一个高性能的键值存储系统,广泛应用于Web应用…

服务器感染了.wis[[Rast@airmail.cc]].wis勒索病毒,如何确保数据文件完整恢复?

导言: 在当今数字化的时代,恶意软件攻击已经变得越来越复杂和狡猾,[[MyFilewaifu.club]].wis [[backupwaifu.club]].wis[[Rastairmail.cc]].wis勒索病毒是其中的一种新威胁。本文91数据恢复将深入介绍[[MyFilewaifu.club]].wis [[backupwaif…

Dify学习笔记-基础介绍(一)

1、简介 Dify AI是一款强大的LLMOps(Language Model Operations)平台,专为用户提供便捷的人工智能应用程序开发体验。 该平台支持GPT系列模型和其他模型,适用于各种团队,无论是用于内部还是外部的AI应用程序开发。 它…

基于springboot+vue的美容院管理系统(前后端分离)

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

JAVA用Zxing生成的二维码扫码桩识别出现\000026

使用Zxing生成的二维码,扫码桩扫描偶先扫描出\000026 文章目录 [TOC](文章目录) 前言一、出现原因分析二、解决方式三、iso ECI 字符集编码说明 前言 Hutool QrCodeUtil(底层Zxing) 生成二维码扫码桩扫描二维码 出现类似:"\…