开始学习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.mzph.cn/news/642734.shtml

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

相关文章

java web mvc-02-struts2

拓展阅读 Spring Web MVC-00-重学 mvc mvc-01-Model-View-Controller 概览 web mvc-03-JFinal web mvc-04-Apache Wicket web mvc-05-JSF JavaServer Faces web mvc-06-play framework intro web mvc-07-Vaadin web mvc-08-Grails Struts2 Apache Struts是一个用于创…

Redis 笔记二

概览 1.高并发秒杀问题及可能出现的bug 2.秒杀场景JVM级别锁和分布式锁 3.大厂分布式锁Redisson框架 4.从Redisson源码剖析lua解决锁原子性问题 5.从Redisson源码剖析经典锁续命问题 6.Redis主从架构锁失效如何解决 7.Redlock分布式锁高并发下可能存在的问题 8.双十一大促如何将…

alfred自定义谷歌翻译workflow

如果要实现自定义workflow,则必须安装付费版的alfred,囊中羞涩的话可以自行淘宝。自定义步骤如下: 1. 新建空的workflow,填写基本信息 2. 开发python脚本 打开该workflow所在目录,进行下面步骤: 首先安装…

OpenCV第 1 课 计算机视觉和 OpenCV 介绍

文章目录 第 1 课 计算机视觉和 OpenCV 介绍1.机器是如何“看”的2.机器视觉技术的常见应用3.图像识别介绍4. 图像识别技术的常见应用5.OpenCV 介绍6.图像在计算机中的存储形式 第 1 课 计算机视觉和 OpenCV 介绍 1.机器是如何“看”的 我们人类可以通过眼睛看到五颜六色的世界…

一文(10图)了解Cornerstone3D核心概念(万字总结附导图)

Cornerstone3D介绍 Cornerstone3D是一个专门为处理三维医学影像而设计的JavaScript库。 它是Cornerstone项目的一部分,旨在为医学影像社区提供高性能、可扩展且易于使用的开源Web工具,专注于提供交互式的3D医学图像浏览体验,适用于多种医学…

9款最新文生图模型汇总!含华为、谷歌、Stability AI等大厂创新模型(附论文和代码)

2023年真是文生图大放异彩的一年,给数字艺术界和创意圈注入了新鲜血液。从起初的基础图像创作跃进到现在的超逼真效果,这些先进的模型彻底变革了我们制作和享受数字作品的途径。 最近,一些大公司比如华为、谷歌、还有Stability AI等人工智能巨…

【Linux】Linux进程信号(上)

​ ​📝个人主页:Sherry的成长之路 🏠学习社区:Sherry的成长之路(个人社区) 📖专栏链接:Linux 🎯长路漫漫浩浩,万事皆有期待 上一篇博客:【Linux】…

【新加坡机器人学会支持】第三届工程管理与信息科学国际学术会议 (EMIS 2024)

第三届工程管理与信息科学国际学术会议 (EMIS 2024) 2024 3rd International Conference on Engineering Management and Information Science 【国际高级别专家出席/新加坡机器人学会支持】 第三届工程管理与信息科学国际学术会议 (EMIS 2024)将于2024年4月12-14日在中国洛…

算法(4)——前缀和

目录 一、前缀和的定义 二、一维前缀和 三、一维前缀和OJ题 3.1、前缀和 3.2、寻找数组中心下标 3.3、除自身以外数组的乘积 3.4、和为K的数组 3.5、和可被K整除的子数组 3.6、连续数组 四、二位前缀和 4.1、二维前缀和 4.2、矩阵区域和 一、前缀和的定义 对于一个…

40. 组合总和 II - 力扣(LeetCode)

题目描述 给定一个候选人编号的集合 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的每个数字在每个组合中只能使用 一次 。 注意:解集不能包含重复的组合。 输入示例 candidates [10,1,2,7,…

Oracle Apps文件系统和数据库的维护工作ADADMIN

ADADMIN主要用于Oracle Apps文件系统和数据库的维护工作,是Apps DBA常用的工具。其一级菜单的具体功能介绍如下: AD Administration Main Menu: Generate Applications Files:如果系统用户无法访问Message、Form或者Report&#…

开始学习vue2(Vue方法)

一、过滤器 过滤器(Filters)是 vue 为开发者提供的功能,常用于文本的格式 化。过滤器可以用在两个地方:插值表达式 和 v-bind 属性绑定。 过滤器应该被添加在 JavaScript 表达式的尾部,由“管道符 ”进行 调用&#…

【Leetcode 144.二叉树的前序遍历】将二叉树每个节点的值以前序遍历的顺序存入数组中

int* preorderTraversal( struct TreeNode*root, int* returnSize) { }解答代码: int TreeSize(struct TreeNode*root){return rootNULL?0:TreeSize(root->left)TreeSize(root->right)1;}void Prevorder(struct TreeNode*root,int*a,int*pi){if(rootNULL)re…

理解反向代理

反向代理是一个不可或缺的组件。 它在客户端和服务器之间充当中介,提高了安全性、负载平衡和应用性能。 一、反向代理简介 反向代理是一种服务器,它位于客户端和后端服务器之间。与常见的(正向)代理不同,反向代理代表…

宝塔面板部署MySQL并结合内网穿透实现公网远程访问本地数据库

文章目录 前言1.Mysql服务安装2.创建数据库3.安装cpolar3.2 创建HTTP隧道 4.远程连接5.固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 宝塔面板的简易操作性,使得运维难度降低,简化了Linux命令行进行繁琐的配置,下面简单几步,通过宝塔面板cp…

【C++】list的使用

目录 1 构造1.1 无参构造1.2 构造的list中包含n个值为val的元素1.3 用[first, last)区间中的元素构造list1.4 拷贝构造 2 迭代器的使用2.1 begin end2.2 rbegin rend 3 容量操作3.1 empty size 4 获取元素4.1 front back 5 插入、删除、修改5.1 头插-push_front和尾插-push…

oracle 19c rac集群管理 ------ 日志管理

oracle 19C rac 数据库的目录结构及日志路径 在Oracle 19c RAC(Real Application Clusters)集群中,有多个组件和层级生成的日志文件,记录着集群的活动、事件和错误信息,用于故障诊断、性能优化和集群管理。以下是常见…

ubuntu 20.04 更新 autoconf 版本

前言 由于最近打算交叉编译 python,依赖 libffi 库,而交叉编译 libffi 库,由于使用的是 github 上的 libffi,又提示 autoconf 版本太低了,所以,先更新 autoconf 的版本 当前 ubuntu 20.04 上安装的 autuco…

工作三年的我在思考,前端还值得学习吗

一、聊这个话题的背景 最近准备换工作,准备了一段时间的简历后,偶然看到群里面有人发了张图片。 虽然颇有调侃的意味,但是联想起过往在公司的工作,项目架构设计向来由后端主管,领导们也基本都是后端,自己日…

消息队列RabbitMQ.02.交换机的讲解与使用

目录 RabbitMQ中交换机的基本概念与作用解析 交换机的作用: 交换机的类型: 直连交换机(Direct Exchange): 将消息路由到与消息中的路由键(Routing Key)完全匹配的队列。 主题交换机&#x…