Web前端单词大全（html+css+js+vue）

Posted 2023-05-02

参考技术A broswer 浏览器（客户端）
html 超文本标记语言
css 层叠样式表
javascript 语言名字(类似python/php/c…)
title 标题
body 身体
head 头
div 盒子(类似收纳箱)
font 字体
width 宽
height 高
background 背景
color 颜色
ul (Unordered List) 无序列表
ol (Ordered List) 有序列表
li (List Item) 列表项
dl (Definition List) 自定义列表
form 表单
action 地址
method 方法
input 输入框
text 文本
password 密码
radio 单选
checkbox 多选
select 下拉菜单
option 选项
padding 内边距
margin 外边距
border 边线
solid 直线
dashed 虚线
dotted 点线
overflow 溢出
hidden 隐藏
visibility 可见度
table 表格
thead 表头
tbody 表格内容
tr (table row) 行
td/th (table data, table headline)列
rowspan 合并行
colspan 合并列
collapse 合并
position 定位
relative 绝对定位
absolute 相对定位
fixed 固定定位
static 静态定位
script 脚本
string 字符串
number 数字
boolean 布尔
undefined 未定义
null 空(None)
function 函数
document 文档
get 获取
element 元素
by 通过
id id
tagName 标签名
window 窗口
object 对象
array 数字(类似python中的list列表)
setInterval 定时器
clearInterval 清除定时器
$ 美元符号
next 下一个
prev 前一个（previous）
parent 父母/双亲
children 孩子
click 点击
mouseleave 鼠标移开
mouseenter 鼠标进入
animate 动画
slide 滑动
fade 渐进
show 显示
hide 隐藏
test 测试
stopProperation 阻止冒泡
preventDefault 阻止默认行为
DOM document object model 文档对象模型
ajax 啊甲克斯
type 类型
url 统一资源定位符
data 数据
dataTpye 数据类型
success 成功
error 失败
done 成功
fail 失败
mustache 胡子
computed 计算
watch 监听
filters 过滤器
mounted 挂载，生成
axios vue中的ajax
let 变量
const 常量

web前端技术内容详解之Vue.js框架

Vue.js是一个渐进式框架，只需要具备基本的HTML/CSS/JavaScript基础就可以快速上手。在用Vue.js构建大型应用时推荐使用NPM安装，但是需要注意npm的版本需要大于3.0。

在通过npm安装项目后，我们需要对其目录进行解析：
（1）Build：项目构建（webpack）相关代码;
（2）config：配置目录，包括端口号等。
（3）node_modules：npm加载的项目依赖模块
（4）src：这个目录当中的内容包含了我们基本上要做的事情，这里包含了几个文件：
（一）assets：存放图片
（二）components：存放组件文件
（三）App.vue：项目入口文件，组件也可以直接写在这里不适用components
（四）main.js：核心文件
（5） static：静态资源目录
（6） test：初始测试目录
（7） .xxxx：配置文件，包括git配置和语法配置等
（8） index.html：首页
（9） package.json：项目配置文件
（10） README.md：说明文档
程序=数据结构+算法，但这话在前端里并不纯粹，因为前端需要和界面打交道，所以大概总结下基础操作dom的前端开发方式：前端程序=拼界面+操作ui+算法。Vue的mvvm框架给了前端另一种思路：完全基于数据驱动的编程。帮助你从繁杂的dom操作中解脱出来，回归本质。
使用Vue的过程就是定义MVVM各个组成部分过程的过程
（1）定义View
（2）定义Model
（3）创建一个Vue实例或“ViewModel”
在创建Vue实例的时候，需要传入选项对象，可以包含挂载元素、数据等。Vue.js有很多数据绑定语法，最基础的的是文本插值，在运行时{{ message }}会被数据对象的message属性替换。

Vue实例被创建前会经过初始化，然后在数据变化时更新DOM，在这个期间也会调用一些生命周期钩子，从而我们可以自定义逻辑。总共可以分为8个段：
（1）beforeCreate 初始化实例后 数据观测和事件配置之前调用
（2）created 实例创建完成后调用
（3）beforeMount 挂载开始前被用
（4）mounted el被新建vm.$el替换并挂在到实例上之后调用
（5）beforeUpdate 数据更新时调用
（6）updated 数据更改导致的DOM重新渲染后调用
（7）beforeDestory 实例被销毁前调用
（8）destroyed 实例销毁后调用
需要注意的是created和mounted的区别，created是实例已经创建但未挂载，所以一些dom操作要放在mounted中。
Vue组件的API来自props（允许外部环境传递数据给组件）、events（允许组件触发外部环境副作用）和slots（允许外部环境将额外的内容组合在组件中）三个部分，组件的data属性必须是函数。尽管有props和events，但有时候需要js直接访问子组件，所以可以使用ref为子组件指定一个索引ID。
Vue.js的插件应当有一个公开方法install。该方法的第一个参数是Vue构造器 , 第二个参数是一个可选的选项对象。
可通过全局方法Vue.use()使用插件:
//调用 MyPlugin.install(Vue)
Vue.use(MyPlugin)
也可以传入一个选项对象:
Vue.use(MyPlugin, { someOption: true })

在vue-router中有两种导航方式：
（1）router-link声明式导航
<router-link to="/foo">Go to Foo</router-link>
router-link对应的路由匹配成功，将自动设置class属性值.router-link-active。
（2）编程式导航：
router.push(‘home‘)
// 对象
router.push({ path: ‘home‘ })
// 命名的路由
router.push({ name: ‘user‘, params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: ‘register‘, query: { plan: ‘private‘ }})