本文转自测试人社区，原文链接：Python 测开28期 - WL - 学习笔记 - Vue - 学习笔记 - 测试人社区
Vue 基本介绍Vue 背景介绍前段框架，Vue 是之一Angular：googleReact：facebookVue：尤雨溪定义是一套用于构建用户界面的渐进式框架被设计为可以自底向上逐层应用轻量级框架便于与第三方库或既有项目整合vue 的核心库只关注图层Vue 项目示例 与 基本结构<!-- 文档声明 --><!DOCTYPE html><!-- 文档主体 --><html lang="en"> <!-- 文档配置 --> <head> <!-- 设置网页编码格式 --> <meta charset="UTF-8" /> <!-- 设置网页兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- 设置网页显示区域 --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- 设置网页标题 --> <title>测试集合</title> <!-- 1. vue 引入 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <!-- 正文内容 --> <body> <!-- 2. 定义一个容器，给容器标注 id，方便后边操作 --> <div id="app"> {{message}} </div> </body></html><!-- js脚本 --><script> // 实例化 vue var vm = new Vue({ // 需要传入对象 el: "#app", // 指定挂载元素 data:{ // 挂载元素的值 message: "Hello laoda" }, methods:{ }, });</script><!-- CSS 样式表 --><style></style>Vue 开发工具VSCodeVSCode 推荐插件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：规定元素的唯一 idclass：规定元素的类名style：规定元素的行内样式常见其他属性click：全局时间属性，当点击鼠标时运行脚本src：规定图像的 URLhref：规定链接的目标 URL常用标签注释标签：< !-- 注释内容 -- >标题标签：<h1></h1><h2></h2>...<h6></h6>，共六级段落标签：<p></p>容器标签：<div></div>|<span></span>图像标签：<img />超链接标签：<a></a>表单标签：<input>，type：number只能输入数字，text能输入任何值，radio单选框，submit提交按钮软件测试开发免费视频教程分享 - 公众号 - 测试人社区
