vue不同的类型绑定吧不同的类名 第一种
<div
v-for="(item, index) in list"
:key="index"
>
<div class="item-tag" :class="addclassName(item)">
{{ item.cont}}
</div>
</div>
addclassName(mess) {
switch (mess.type) {
case 1001:
return 'oncss';
case 1002:
return 'offcss'
}
},
第二种，使用过滤器来处理这个问题
<div
v-for="(item, index) in list"
:key="index"
>
<div class="item-tag" :class="addclassName(item)">
{{ item.cont}}
</div>
</div>
filters: {
addclassName(i) {
switch (mess.type) {
case 1001:
return 'oncss';
case 1002:
return 'offcss'
}
}
},
无论是第一种，还是第二种，但是要返回一个类名的；
小程序的声明周期详解 （必须十分熟悉）
onLoad(option){
console.log("onLoad",option); //主要用于上一个页面传递过来的参数
},
onShow(){
切入前台触发，用我的话来讲就是这个页面出现一次，
他就被调用一次包括你【前进】和【后退】到这个页面。
},
onReady: （）{
页面初次渲染完成，会触发onReady方法，
渲染页面元素和样式，一个页面只会调用一次，
代表页面已经准备妥当，可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
}
onHide:(){
当从当前A页跳转到其他页面，那么A页面处于隐藏状态。
}
onUnload:(){
监听页面的卸载
当前处于A页面，点击返回按钮时，则将是A页面卸载、
当返回上一页wx.navigateBack、wx.relanch、wx.redirectTo时都会被调用(这里的
坑有点深)。
}
https://blog.csdn.net/hhf235678/article/details/78749952
小程序的分包 （了解即可）
某些情况下，开发者需要将小程序划分成不同的子包，
在构建时打包成不同的分包，用户在使用时按需进行加载。
在构建小程序分包项目时，构建会输出一个或多个分包。
每个使用分包小程序必定含有一个主包。
所谓的主包，即放置默认启动页面/TabBar 页面，
以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。
在小程序启动时，默认会下载主包并启动主包内页面，
当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。
目前小程序分包大小有以下限制：
整个小程序所有分包大小不超过 20M
单个分包/主包大小不能超过 2M
对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。
作者：Murphy_土豆
链接：https://www.jianshu.com/p/eb27bd04f77c
小程序正确的上拉加载更多的正确姿势（熟悉）
canLoadingFalg:true,
totalDatas:0,
onShow() {
// 获取教师列表
this.canLoadingFalg=true;
this.partListInfoList_api();//获取列表
},
// 下拉加载更多
onReachBottom() {
//如果当前的列表长度小于返回的总长度，才可以进行下拉加载
if(this.listPersonList.length<this.totalDatas){
if(this.canLoadingFalg){
this.canLoadingFalg=false;
this.loook_params.pageIndex++;
this.partListInfoList_api();
}
}else if(this.totalDatas==this.listPersonList.length){
//如果当前的长度等于返回的总长度，提示用户
uni.showToast({
title: '已经加载完了',
icon: 'none'
});
}
},
//获取教师列表
partListInfoList_api(){
uni.showLoading({
title: "加载中"
})
his.loook_params.orgId=this.userInfo.orgId
partListInfoList(this.loook_params).then(res=>{
if(res.success&&res.data){
uni.hideLoading();
this.listPersonList=this.listPersonList.concat(res.data );
this.totalDatas= parseInt(res.totalDatas)
this.canLoadingFalg=true;
}else{
uni.hideLoading();
this.canLoadingFalg=true;
this.listPersonList=[];
this.totalDatas=0;
}
})
},
h5产生横向滚动条
<div class="noticeListBox">
<div class="noticeList" @click="handerItem(item,index)"
v-for="(item,index) in typeMenuList" :key="index"
:class="{'activeheng':index==orderIndex}"
>
{{ item.name}}
</div>
</div>
.noticeListBox {
width: 100%;
box-sizing: border-box;
overflow: scroll;
white-space: nowrap;
margin-top: 20px;
padding-left: 14px;
padding-right: 14px;
.noticeList{
display: inline-block;
margin-right: 40px;
}
.activeheng {
box-shadow: inset 0 -10px 0 rgba(59,139,255,0.5);
padding-left: 3px;
padding-right: 3px;
}
.activeheng::after{
content: "";
display: block;
height: 2px;
}
}
禁止textarea右下角的拖拽（必须十分熟悉）
<el-input
type="textarea"
placeholder="请输入内容(最多输入100字符)"
maxlength="100"
:rows="4"
v-model="homeworkItem.workDetail"
> </el-input>
.no-drag /deep/ .el-textarea__inner{
resize:none;
}
阻止事件冒泡 兼容w3c浏览器
function cBubble(e){
if(e.stopPropagation){
e.stopPropagation();//ie9+
}else{//ie678
e.cancelBubble = true;
}
}
阻止浏览器默认行为
function cDefault(e){
if(e.preventDefault){//ie9+
e.preventDefault();
}else{//ie 678
e.returnValue = false;
}
};
#### 4.阻止默认:
w3c 的方法是 e.preventDefault(),
IE 则是使用 e.returnValue = false;
preventDefault它是事件对象(Event)的一个方法,
作用是取消 一个目标元素的默认行为.
既然是说默认行为,当然是元素必须有默认行为才能被取消.
如果元素本身就没有默认行为,调用当然就无效 了.
什么元素有默认行为呢?
如链接<a>,
提交按钮<input type=” submit”>等.
当Event对象的cancelable为false时,表示没有默认行为,
这时即使有默认行为,调用 preventDefault 也是不会起作用的。
https://blog.csdn.net/weixin_42072357/article/details/107709598
https://blog.csdn.net/qq_43434300/article/details/84977773
https://www.jb51.net/article/181716.htm
#### local 存取的值没有应该怎么样去优化呢
#### keep-alive的去详细了解
#### vue 强制组件刷新的两种方式
#### 路由跳转的两种方式
#### 滚动条滚动到底的触发方式
#### button实现全部 取消样式和数组获取
#### 文字和英文超出内容换行的css 必须记住
#### 今天我发现一个问题；
如果你实现一个功能的时候，代码非常的多，说明2个问题：
1.这个功能具有一定的复杂度
2.你把这个功能想复杂了，肯定有比这个更好的思路，只是你暂时没有想到
#### 好好的去看一下这五种循环的区别；在什么地方用什么样的循环是最好的，
不要只会for循环
####判断一个对象中是否有某一个值 in ，它是可以对数组和对象使用的
#### 做项目的时候，大量的去封装自己需要的组件，不要怕麻烦；怕麻烦一直是你的一个缺点哈~~
1. onclick事件 es5
普通事件就是直接触发事件，相同的事件会被覆盖掉。代码如下：
let demoDiv=document.querySelector(".demo")
demoDiv.onclick = function(){
console.log('你好1')
}
demoDiv.onclick = function(){
console.log('你好2')
}
demoDiv.ondblclick = function(){
console.log('你好3')
}
输出的结果只会有<你好2>， <你好3>
就是说相同的事件绑定同一个元素会出现覆盖；
ps:双击的时候，默认会触发单击事件；
2. addEventListener事件 es6
addEventListener进行多次绑定相同的事件都能运行。不会出现事件覆盖
let demoDiv=document.querySelector(".demo")
demoDiv.addEventListener("click",function(){
console.log("点击111");
},false);
demoDiv.addEventListener("click",function(){
console.log("点击222");
},false);
最后会出现【点击111】和【点击222】
3.兼容性
浏览器的兼容性
ie9 以前：使用attachEvent/detachEvent进行绑定
ie9 开始：使用addEventListener进行绑定
4. 二者区别
addEventListener对任何DOM都是有效的，而onclick仅限于HTML
addEventListener可以控制listener的触发阶段,（捕获/冒泡）。
对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除。
总的来说：事件绑定是指把事件注册到具体的元素之上，普通事件指的是可以用来注册的事件
5. 移除 addEventListener事件
addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。
们都接受3个参数：如 addEventListener("事件名" , "事件处理函数" , "布尔值");
听别人说：现在的版本可以省略第三个参数，默认值为false
通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；
同时需要注意的是通过addEventListener()添加的匿名函数无法移除
6.错误的移除方法
<body>
<div class="demo">点击我</div>
</body>
<script>
let demoDiv = document.querySelector(".demo");
demoDiv.addEventListener("click", function () {
console.log("点击111");
}, false);
demoDiv.removeEventListener('click', function (event) {
event.preventDefault();
}, false);
</script>
ps:通过addEventListener()添加的匿名函数无法移除
特别重要：这个例子中，
使用addEventListener()添加一个事件处理程序。
虽然调用removeEventListener()
是看似使用了相同的参数，但实际上，
第二个参数与传入addEventListener()中的那一个完全不同的函数。
而传入removeEventListener()中的事件处理程序函数必须与传addEventListener()中的相同
7. 错误的用法
<body>
<div class="demo">点击我</div>
</body>
<script>
let demoDiv = document.querySelector(".demo");
function clickMy(event) {
console.log("点击了我111");
}
//页面渲染完成就触发了调用函数，这是错误的用法
demoDiv.addEventListener("click", clickMy(), false);
demoDiv.removeEventListener('click', clickMy(), false);
</script>
8.正确的移除方法
<body>
<div class="demo">点击我</div>
</body>
<script>
let demoDiv = document.querySelector(".demo");
function clickMy() {
console.log("点击了我111");
}
demoDiv.addEventListener("click", clickMy, false);
// 10s后这个事件将会被移除，没有直接去调用，没有括号
setTimeout(() => {
demoDiv.removeEventListener('click', clickMy, false);
}, 10000)
</script>
//这样移除的跟传入的就是同一个函数了
https://blog.csdn.net/qq_29606781/article/details/67650869
1.addEventListener()与removeEventListener()的第三个参数详解
布尔值参数是true，表示事件捕获
就是最不具体的节点先接收事件，
最具体的节点最后接收事件
（我们可以理解为；点击一个具体的元素，先触发顶级的节点，
然后向下进行传递，知道被点击的那个具体元素）
如果是false，
开启事件冒泡
则是先寻找【具体指定的位置】由【最具体的元素】接收，
然后【逐级向上传播】至最不具体的元素的节点（或者说顶级节点）（文档）
2.开启冒泡
<body>
<div id="out">
<p>我没有用，我只占位</p>
<div id="middle">
<div id="inner">最里面</div>
</div>
</div>
</body>
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：inner-------middle------out
// 因为第三个参数是false,开启了事件冒泡
out.addEventListener('click', function () {
alert("我是最外面的");
}, false);
middle.addEventListener('click', function () {
alert("我是中间的");
}, false);
inner.addEventListener('click', function () {
alert("我是最里面的");
}, false);
</script>
3.开启捕获
<body>
<div id="out">
<p>我没有用，我只占位</p>
<div id="middle">
<div id="inner">最里面</div>
</div>
</div>
</body>
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：out -------middle------inner
// 因为第三个参数是true开启了捕获
out.addEventListener('click', function () {
alert("我是最外面的");
}, true);
middle.addEventListener('click', function () {
alert("我是中间的");
}, true);
inner.addEventListener('click', function () {
alert("我是最里面的");
}, true);
</script>
得出结论
<body>
<div id="out">
<p>我没有用，我只占位</p>
<div id="middle">
<div id="inner">最里面</div>
</div>
</div>
</body>
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击inner时，触发顺序为：out------inner-------middle
out.addEventListener('click', function () {
alert("我是最外面的");
}, true);
middle.addEventListener('click', function () {
alert("我是中间的");
}, false);
inner.addEventListener('click', function () {
alert("我是最里面的");
}, false);
// 结论：
// 第一条结论：true的触发顺序总是在false前面
// 第二条结论：如果多个均为true 则外层触发先于内层
// 第三条结论：如果多个均为false 则内层触发先于外层
</script>
