本文转自测试人社区，原文链接：Python 测开28期 – WL – 学习笔记 – Vue – 学习笔记 – 测试人社区
Vue 基本介绍
Vue 背景介绍
- 前段框架，Vue 是之一
- Angular：google
- React：facebook
- Vue：尤雨溪
定义
- 是一套用于构建用户界面的渐进式框架
- 被设计为可以自底向上逐层应用
- 轻量级框架
- 便于与第三方库或既有项目整合
- 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 开发工具
- 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提交按钮
软件测试开发免费视频教程分享 – 公众号 – 测试人社区
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/82127.html
