Vue框架入门:基础介绍与核心概念

发表时间: 2024-07-18 17:35

本文转自测试人社区,原文链接: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提交按钮

软件测试开发免费视频教程分享 - 公众号 - 测试人社区