本文转自测试人社区,原文链接: https://ceshiren.com/t/topic/28733
Vue 基本介绍
Vue 背景介绍
- 前段框架,Vue 是之一
- Angular:google
- React:facebook
- Vue:尤雨溪
定义
- 是一套用于构建用户界面的渐进式框架
- 被设计为可以自底向上逐层应用
- 轻量级框架
- 便于与第三方库或既有项目整合
- vue 的核心库只关注图层
Vue 项目示例 与 基本结构
Vue 开发工具
- VSCode
- VSCode 推荐插件
- JavaScript(ES6) code snippets:包含 ES6 语法的 js 代码段
- Vetur:VSCode 支持 VUE 的工具
- Auto Close Tag:自动添加 HTML/XML 结束标签
- Auto Rename Tag:自动重命名对应的 HMTL/XML 标签
- Higlight Matching Tag:突出显示匹配的开始和结束标签
- open in browser:预览 html 文件
HTML 基本结构
- 文档声明:
<!DOCTYPE html>
- 文档主体:
<html lang="en">
- 文档配置:
<head></head>
- 设置网页编码格式:
<meta charset="UTF-8" />
- 设置网页标题:
<title>测试</title>
- 导入 JavaScript 文件:
<script src="xxx/xx.js"></script>
- 正文内容:
- JavsScript脚本:
<script></script>
- Css 样式表:
<style></style>
常用标签
- 基本格式: <标签名 属性1=“属性值1” 属性2=“属性值2”></标签名>
- 标签常见形式
- 双标签:<标签名称></标签名称>
- 单标签:<标签名 />
- HTML 标签常用属性
- 常见全局属性
- id:规定元素的唯一 id
- class:规定元素的类名
- style:规定元素的行内样式
- 常见其他属性
- click:全局时间属性,当点击鼠标时运行脚本
- src:规定图像的 URL
- href:规定链接的目标 URL
- 常用标签
- 注释标签:
< !-- 注释内容 -- >
- 标题标签:
<h1></h1><h2></h2>...<h6></h6>
,共六级 - 段落标签:
<p></p>
- 容器标签:
<div></div>|<span></span>
- 图像标签:
<img />
- 超链接标签:
<a></a>
- 表单标签:
<input>
,type:number
只能输入数字,text
能输入任何值,radio
单选框,submit
提交按钮