本文转自测试人社区，原文链接： https://ceshiren.com/t/topic/28733

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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
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提交按钮