- 浏览器内核（Rendering Engine）主要包括两部分渲染引擎和js引擎
渲染引擎负责读取网页内容，整理讯息计算网页的显示方式显示网页 js引擎负责解析执行js获取网页动态效果
IE Trident内核 firefox Gecko内核 safari webkit内核 Chrome chromium/Blink opera Blink
- web标椎 主要包括结构（Structure）、表现（Presentation）和行为（behavior）
结构 用于对网页元素进行整理和分类，HTML
表现 用于设置网页元素的板式、颜色、大小等外观样式，主要指css
行为 是指网页模型的定义及交互的编写，主要是javascript
- HTML 超文本标记语言
HTML标签分类
- 常规元素（双标签 ）
- 空元素（单标签
）
预格式化文本
- background 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
格式工厂 多媒体转换工具
-
媒体查询 @media screen and(max-width:800px){ body{
} }
-
响应式开发原理 通过使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而达到适配各设备的目的
超小屏幕（手机） <768px 设置宽度100% 小屏设备（平板）768<= <992 设置宽度750px 中等屏幕（）<=992 <1200 设置宽度970px 宽屏设备 >=1200 设置宽度1170px
- vue 渐进式JavaScript框架
1.指令 本质是自定义属性，仪v-开头如v-cloak
v-cloak 解决插值表达式闪动问题
数据绑定指令
- v-text 填充纯文本
- v-html 填充html
- v-pre 填充原始信息 跳过编译过程 {{msg}}
- v-once 数据只编译一次
- v-model = msg 双向数据绑定 表单域修饰符 v-model.number 转化为数值 v-model.trim 去除空格 v-model.change 将input事件切换为change事件
- v-on：click=function
事件修饰符
- v-on:click.stop 阻止冒泡
- v-on:click.prvent 阻止默认行为
- v-on:click.slef 是自己执行 驼峰组件命名只能在字符串 template中使用
Vue.component('HelloWorld',{
data; function(){
return{
msg: 'HelloWorld'
}
},
template: '<div></div>'
})
var vm = new Vuew({
el:'#id',
data: {
},
method: {
test:function(event){
event.stopPropagation(); # 阻止冒泡
event.stoppreventDefult; # 阻止默认事件
}
}
computed: {
#计算属性
},
watch: {
# 侦听器
}
})
- 自定义指令 使用v-functionname调用
Vue.directive('functionname',{
inserted: function(el){
# el表示指令所绑定的元素
el.active（操作）
}
})
- MVVM设计思想 M(model,data) V(View,DOM元素) VM(View-Model，两者的结合，控制逻辑)
*node.js 全局安装 npm install 模块名 -g
npm install nodemon 安装命令行辅助工具 npm install nrm npm 下载地址切换工具 npm install gulp 自动化构建工具
-
gulp使用 1.使用npm install gulp 下载gulp库文件 2.在项目根目录下建立gulpfile.js文件 3.重构项目的文件夹结构src目录放置源代码dis目录放置构建后文件 4.在gulpfile.js文件中编写任务 5.在命令行工具中执行gulp文件
-
gulp中提供的方法
gulp.task() 建立gulp任务 gulp.src() 获取任务要处理的文件 .pipe(gulp.dest('路径')) gulp.dest() 输出文件 gulp.watch() 监控文件的变化
gulp.task('任务名', () => { console.log('第一个') gulp.src('路径') .pipe(gulp.dest('路径')) })
- gulp插件 gulp-htmlmin html文件压缩 gulp-csso 压缩css gulp-babel javascript语法转化 gulp-less less语法转化 gulp-uglify 压缩混淆javascript gulp-file-include 公共文件包含 抽取公共代码 browsersync 浏览器实时同步
