Html、Css知识点汇总
- 下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度？
display:block
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
- css属性overflow属性定义溢出元素内容区的内容时
参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。 - a标签
在html中通过<a>标签打开一个链接，通过 <a> 标签的 target 属性规定在何处打开链接文档。
| 参数 | 内容 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename | 在指定的框架中打开被链接文档。 |
- css样式
border-style:none;//无边框
border-width:0;//边框宽度为0px
CSS Sprites
1.简介
CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中， 利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位， 访问页面时避免图片载入缓慢的现象。
2.优点
（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
（2）CSS Sprites能减少图片的字节；
（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。
（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
3.缺点
（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。
（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。
（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。
JavaScript
- jQuery的点击事件
1. 点击事件：
1. onclick：单击事件
2. ondblclick：双击事件
2. 焦点事件
1. onblur：失去焦点
2. onfocus:元素获得焦点。
3. 加载事件：
1. onload：一张页面或一幅图像完成加载。
4. 鼠标事件：
1. onmousedown 鼠标按钮被按下。
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
5. 键盘事件：
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
6. 选择和改变
1. onchange 域的内容被改变。
2. onselect 文本被选中。
7. 表单事件：
1. onsubmit 确认按钮被点击。
2. onreset 重置按钮被点击。
-
flash和js通过什么类如何交互?
Flash提供了ExternalInterface接口与JavaScript通信
两个方法：call和addCallback
作用：call让Flash调用js里的方法，addCallback是用来注册flash函数让js调用。 -
call、apply
对于call（），第一个参数是运行函数的作用域，其余参数都直接传递给函数即传递给函数的参数必须逐个列举出来。
function callSum(num1,num2){
return sum.call(this,num1,num2);
}
对于apply（），第一个参数是 运行函数的作用域 ，另一个参数是参数数组,可以是Array实例或arguments对象。
function applySum(num1,num2){
return sum.apply(this,[num1,num2]);
}
-
数组去重
Vue知识点
- 生命周期
beforeCreate
vue实例创建完成，但没有初始化完成
this.message // undefined
created
vue实例初始化完成，此时可以通过vue的实例对象访问data中的变量以及methods中的方法。this.message // "hello vue"
beforeMount
完成数据绑定之前的准备工作，重点完成dom对象的编译（html->dom对象），将dom对象绑定在this.$el 上
data中的变量还未绑定在dom对象
mounted
data中的变量绑定到了dom对象，并且dom渲染到了网页中
beforeUpdate
data中的变量的值发生了变化
updated
data中的变量的值的改变已经反映到了网页上
beforeDestory
当前vue实例在销毁之前
destoryed
当前vue实例已经销毁
- 模板语法：
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令。
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
- 事件机制
事件对象
1. 事件处理函数中没有参数
<div @click="handler"></div>
methods:{
handler(event){
event就是事件对象
}
}
2. 事件处理函数中有参数
<div @click="handler(1,$event)"></div>
methods:{
handler(a,event){
a为1
event就是事件对象
}
}
修饰符
1) 事件修饰符
eventType.prevent 阻止事件的默认行为
eventType.stop 停止事件的冒泡
eventType.once 仅绑定一次事件
eventType.self 仅绑定一次事件
eventType.capture 在事件捕获阶段执行事件处理函数
event.stopPropagation 阻止捕获和冒泡
2) 按键修饰符
支持keypress、keyup、keydown
.enter .tab
.delete (捕获“删除”和“退格”键)
.esc .space .up .down .left .right
3) 系统修饰键
.ctrl .alt .shift .meta
@keypress.ctrl.enter
主要应用在快捷操作上，例如ctrl+c ctrl+x
- 组件
组件的注册
全局注册：所有的vue实例都可以调用注册组件
Vue.component(组件名称,config)
组件名称一般为 x-x / xX
lijing-alert / lijingAlert
局部注册：只有当前vue实例才能调用注册的组件
new Vue({
el:"#app",
components:{
组件名称:config
}
})
- 传值
父组件向子组件传值（属性作为参数进行传递）
props:["title","type"]
参数类型校验
props:{
a:Number,
b:{ // 期望b的类型为字符串，并且这个参数是必须的
type:String,
required:true
},
c:{ // 期望c的类型为boolean，如果这个参数用户没有传递，默认值为true
type:Boolean,
default:true
},
d:Function
}
静态传参值为字符串
如果想要传递非字符串类型的值，那么必须使用动态传参
单向数据流
父组件中data值的改变会影响到子组件中的相应数据的改变，但是子组件无法改变父组件的值
事件传递 （子->父)
当用户操作子组件的时候，希望父组件的值得到改变
父组件
<my-test @foo="handler"></my-test>
子组件
{
template:`
<button @click="change">按钮</button>
`,
methods:{
change(){
this.$emit("foo")
}
}
}
流程：点击按钮-> change() ->this.$emit("foo") ->handler()
- 脚手架 vue-cli
1) 作用
1. 创建并且初始化一个项目
mkdir app01
cd app01
npm init -y
npm install vue --save
npm install babel-preset-es2015 --save-dev
项目结构
.git
node_modules
build
src
aseets 静态文件，图片
components 功能组件 my-alert
pages 页面组件 Customer/Category
App.vue
main.js
package.json
2. 自动测试
脚手架会提供一个静态服务器，自动对源码进行构建，然后部署到服务器上，这些操作不需要开发者操作，是自动完成的
3. 自动打包
.vue -> html/css/js
2) 如何应用 @vue/cli
1. 安装nodejs
linux 解压/opt ;配置环境变量
windows 直接安装即可（无脑安装）
> node -v
2. 全局安装cnpm
> npm install -g cnpm --registry=https://registry.npm.taobao.org
> cnpm install yarn -g
3. 全局安装 @vue/cli
> npm install @vue/cli -g
或
> cnpm install @vue/cli -g
或者
> yarn global add @vue/cli
测试：
> vue --version
4. 创建项目
> vue create app01
> cd app01
// 安装依赖
> cnpm install axios qs --save
> vue add element
5. 启动服务进行测试
> npm run serve
- 路由机制 vueRouter
vue vue实例对象 ----> 模板
vuex 状态管理
data状态 -> 集中交给vuex维护状态
vueRouter 路由管理
路径 ---> 组件
/ -> Home.vue
/customer -> Customer.vue
/Category -> Category.vue
- vue实例对象
1) vue实例对象可以直接访问data、methods、props、computed、watch所定义的方法或者属性
2) methods中的方法或者生命周期钩子函数中this指向当前的vue实例对象
3) 生命周期钩子函数
构建vue对象
beforeCreate
created
将模板编译成为dom
beforeMount
将vue对象中的数据，事件处理函数绑定到dom中
mounted
当vue中的数据发生了变化，dom会响应这种变化
beforeUpdate
updated
销毁
beforeDestroy
destroyed
- vuex（redux）
1) 介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
原先数据需要保存到各自vue实例对象的data中，当使用vuex之后，就可以将data中的数据集中管理到vuex中。
2) 核心概念
state 状态 （data）
getters 获取器(computed)
mutation 突变（修改data值的唯一方式！）
action 动作(封装异步代码，然后提交突变，进而修改state值)
3) 使用方式
1. 实例化
let store = new Vuex.Store({
state:{
customers:[]
},
getters:{
},
mutations:{
refreshCustomers(state,customers){
}
},
actions:{
}
})
2. 集成到vue中
new Vue({
el:'',
data:{},
store
})
3. 调用
this.$store
4. mutation
1) 作用：
突变，用于修改state的唯一方式，并且其中只能包含同步操作。
2) 定义：
mutations:{
refresh(state,customers){
state由vuex提供，customers是程序在提交mutation传递的参数
}
}
3) 调用
不能直接调用，必须通过store.commit方法来调用
store.commit(mutationName,payload)
payload 被称为载荷，实际就是传递给mutation的实参
4) 辅助函数
Vuex.mapMutations(["findAll","deleteById"])
或
Vuex.mapMutations({
findAllCustomer:"findAll"
}])
5. action
1) 作用：
动作，用于封装异步操作（异步操作的同步化），不能直接修改state,但是可以通过提交突变，间接修改state的值
2) 定义：
actions:{
async findAllCustomers(context,id){
context是vuex提供的，与store对象类似，可以直接访问commit、dispatch、getters、state,这个我们可以使用解构形式获取context中的属性。id为该action第一个形参（载荷）
let response = axios.get("");
return response;
}
}
3) 映射辅助函数
Vuex.mapActions(["",""])
Vuex.mapActions({
xxx:"xxx"
})
6. 获取器（过滤）
this.$store.state.customers
1) 作用
需要对state中的值经过一个计算，然后渲染到页面中的时候可以使用getters
例如：你在state中维护了一个购物车信息，但是你想在页面中显示购物车中产品价格的总额。类似于计算属性
2) 定义
1. 使用属性调用
getters:{
customerSize(state){
return state.customers.length
}
}
this.$store.getters.customerSize
2. 使用方法调用
getters :{
customerFilter(state){
return (param){
return xxx
}
}
}
this.$store.getters.customerFilter(xx)
3) 辅助函数
Vuex.mapGetters([""])
笔试题
1.美团笔试题
class A {
String i = "op";
void func(String s) {
s = ""+9;
}
static void test() {
A a = new A();
a.func(a.i);
}
}
问：
1. 变量i,s,a在堆还是在栈中？
答：i,s,a都在栈区，new出来的对象A在堆区。
2. 第8行执行完后a.i的值是什么？
答：op
- 请按顺序写出打印结果，并说明原因。
var name = 'global';
var obj = {
name: 'local',
foo: function(){
this.name = 'foo';
}.bind(window)
};
var bar = new obj.foo();
setTimeout(function() {
console.log(window.name);
}, 0);
console.log(bar.name);
var bar3 = bar2 = bar;
bar2.name = 'foo2';
console.log(bar3.name);
console.log(window.name); //foo
console.log(window.name); //foo2
console.log(bar3.name); //global
- 输出顺序主要考察：Event Loop；
- 第一个和第三个输出考察：this指针；
- 第二个输出考察：引用类型赋值
- 请写出下面ES6代码编译后所生成的ES5代码；
class Person {
constructor (name) {
this.name = name;
}
greet () {
console.log(`Hi, my name is ${this.name}`);
}
greetDelay (time) {
setTimeout(() => {
console.log(`Hi, my name is ${this.name}`);
}, time);
}
}
答案：
var Person = (function () {
function Person (name) {
this._name = name;
}
Person.prototype.greet = function () {
console.log(“Hi, my name is “ + this._name);
}
Person.prototype.greetDelay = function (time) {
var _this = this;
setTimeout(function () {
console.log(“Hi, my name is “ + _this.name);
}, time);
}
})();
1917
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
