一、响应式
(1)只写一套页面,在不同尺寸的设备下加载不同的样式
(2)缺点:
1.对布局要求很高。
2.浪费流量
(3)媒体查询
<400 小屏幕 2
max-width: 399px
400> <800 中屏幕 4
min-width: 400px;
max-width: 799px;
>800 大屏幕 8
min-width: 800px;
@media screen and () and () ... {
selector{
xxx:xxx;
}
}
二、Touch事件
(1) touchstart
(2) touchmove
(3) touchend
三、 VueJS
1.指令 v-开头
v-model 数据绑定
v-on 添加事件
v-bind 绑定属性
v-for 循环、迭代(建议使用v-for的时候设置v-bind:key)
v-text 纯文本
v-html html
v-show 是否显示
v-pre 跳过编译
v-cloak 防止闪屏
(2)简写
(a)v-bind
v-bind:href :href
v-bind:src :src
v-bind:key :key
(b)v-on
v-on:click @click
v-on:keydown @keydown
2.生命周期钩子
beforeCreate 创建前
created 创建后
beforeMount 挂载前
mouted 挂载后
beforeUpdate 数据更新前
updated 数据更新后
beforeDestroy 销毁前
destoryed 销毁后
3.自定义指令
Vue.directive('指令名',function(el){
当前对象
coding....
});
4. 自定义按键
Vue.config.keyCodes.xxx = 键码;
5.过滤器 filter
文本过滤器
filters: {
xxx: function(arg1,arg2...){
return 处理后的结果;
}
}
{{message:xxx(xxx,xx,xx..)}}
数据过滤器
computed: {
xxx: function(arg1,arg2,arg3){
操作
返回
}
}
v-for="item in xxx"
computed 计算属性
相比较methods,更加节省性能。适合用于重复渲染,逻辑复杂的计算。
computed: {
xxx: function(){
操作
return ;
}
}