这是我参与「第四届青训营」笔记创作的第 1 天

内容

- 前端工程师是使用Web技术栈解决多端图形用户界面交互问题

- 前端技术栈包括

HTML 内容 CSS 样式 JS 行为

- 前端应该关注

功能 美观 无障碍 安全 性能 兼容 体验

- 开发环境

浏览器＋编译器

- HTML

（HyperText Markup Language 超文本标记语言）

一些常用标签

标题标签  <h> 
段落标签  <p>
换行标签 	<br>
水平线标签 <hr>
文本格式化标签  
	加粗    <b> <strong>
	下划线 <u> <ins>
	倾斜    <i>   <em>
	删除线 <s>  <del>
        图片标签	<img src="地址" alt="这是图像" title="这是title文字鼠标悬停时显示的文本">   
音频标签   <audio src="地址">
视频标签   <video src="地址">
链接标签   <a href="地址"> </a>
输入	<input placeholder="请输入用户名">  
         <textarea>多文字输入</textarea>
列表标签  
	有序   
               <ol>
		  <li></li>
	       </ol>
	无序   
               <ul>
		  <li></li>
	       </ui>	
	自定义 
               <dl>
		   <dt></dt>
		   <dd></dd>
		   <dt></dt>
		   <dd></dd>
	       </dl>

- DOM与BOM

DOM (Document Object Model 文档对象模型)是为了操作文档出现的 API，document 是其的一个对象；

BOM (Browser Object Model 浏览器对象模型)是为了操作浏览器出现的 API，window 是其的一个对象。

DOM操作

BOM操作

一些奇奇怪怪的扩展

脚手架文件结构

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

插件

1. 功能：用于增强Vue

2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

3. 定义插件：

   对象.install = function (Vue, options) {
    
       // 1. 添加全局过滤器
       Vue.filter(....)
   
       // 2. 添加全局指令
       Vue.directive(....)
   
       // 3. 配置全局混入(合)
       Vue.mixin(....)
   
       // 4. 添加实例方法
       Vue.prototype.$myMethod = function () {...}
       Vue.prototype.$myProperty = xxxx
   }
   

4. 使用插件：Vue.use()