备忘录
1.获取浏览器属性:window.navigator.userAgent
2.Vue Baidu Map lablestyle的api问题 vue会对其报错,
但是打包为生产环境的代码时 没有vue的警告包就不会报错
3.Vue Baidu Map 要获取当前缩放等级时,可以通过在
setZoom (e) { this.initialzoom = e.target.getZoom() },
来获取当前地图的缩放等级。
4.如果Vue Baidu Map中的事件不生效时,我们可以在ready事件中为我们的百度地图绑定你想要的绑定的事件
handler({BMap, map}) { let self=this this.BMap = BMap; this.map = map; this.map.addEventListener('zoomend',function (e) { self.changeZoom(e) self.setZoom(e) });this.map.addEventListener('zoomstart',function (e) { self.changeZoom(e) self.setZoom(e) }) },
5.谷歌跨域插件:Moesif CORS
6.超出显示省略号:
单行文本:
overflow: hidden;/*超出部分隐藏*/
text-overflow:ellipsis;/* 超出部分显示省略号 */
white-space: nowrap;/*规定段落中的文本不进行换行 */
width: 250px;/*需要配合宽度来使用*/
多行文本
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
width: 250px;
7.js中的call()方法:它只表示在call的过程中自身对象中的this指向第一个参数对象,对于函数的调用并无影响
8.vue中,在创建子组件中给变量设置默认值的时候要以下面这种形式设置
total: { type:Number, default:0 },
9.有些元素,我们为了让用户有对网页元素有更直观的感受。经常需要让鼠标变成小手的状态。以往我总使用a标签 发现a标签没有href属性是不行的 现在发现一个css属性
cursor:pointer
10.表格中设置单实线
table,tr,td{ border-collapse: collapse; border: 1px solid #000000; }
11.animation和 transition在同一个元素上时也许会导致冲突使过渡失效。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style id="style"> .column { position: relative; width: 300px; height: 100px; border-left: 1px gray solid; border-right: 1px gray solid; margin: 100px auto; background-color: #00AFE9; } .column:before { position: absolute; content: ''; display: block; height: 20px; width: 100%; border: 1px solid; border-radius: 50%; top: -10.5px; z-index: 1; } .column:after { position: absolute; content: ''; display: block; height: 20px; width: 100%; border-bottom: 1px solid; border-radius: 50%; bottom: -10px; background-color: #00AFE9; } .inner1 { position: relative; background-color: white; text-align: center; transition: 1s; animation-name: move; animation-duration: 3s; animation-fill-mode: both } @keyframes move { from { height: 100px; } to { height: 50px; } } .inner{ width: 300px; height: 100px; background-color: white; text-align: center; transition: 2s; } .inner1:after { position: absolute; content: ''; display: block; height: 20px; width: 100%; border-radius: 50%; background-color: white; bottom: -10px; } .inner1 h5 { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; } </style> </head> <body> <div id="app"> <div class="column"> <div class="inner1" > <div class="inner" :style="getHeight()"> <h5>{{msg}}G/1T</h5> </div> </div> </div> <button @click="add">增加</button> </div> <script type="text/javascript" src="../vue/js/vue.js"></script> <script> let vm = new Vue( { el: '#app', data() { return { msg: 300 } }, mounted() { // setTimeout(function () { // this.msg=500 // console.log(this.msg) // },300) // this. getHeight() }, methods: { getHeight() { let num = null; num = this.msg / 1025; num = 100 - (num * 100); let style = document.getElementById('style') style.innerHTML += '@keyframes move {' + ' from{' + ' height: 100px;' + ' }' + ' to{' + ' height: '+num+'px;' + ' }' + ' }' style.innerHTML += '.inner1 {position: relative;background-color: white;text-align: center;transition: 1s;animation-name: move;animation-duration: 3s;}' return {height: num + 'px'} }, add() { // alert(this.msg) this.msg += 100 let num = null; num = this.msg / 1025; num = 100 - (num * 100); document.getElementsByClassName('inner')[0].style.height=num+'px' } } } ) </script> </body> </html>
12.跨域的解决方案:当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
jsonp,cors,反向代理
13.实现滚动效果却不出现滚动条
::-webkit-scrollbar{
display: none;
}
14.vue中使用路由传递参数(切记path和query,name 和params一一对应 不然会报错)
-
传递参数 -- this.$router.push({path: ' 路由 ', query: {key: value}})
参数取值 -- this.$route.query.key
-
传递参数 -- this.$router.push({name: ' 路由的name ', params: {key: value}})
参数取值 -- this.$route.params.key
15.子组件v-model 报错使用对象中的属性修改属性