- 项目安装[命令行]
npm install vue-cli --global
vue init webpack-simple my-project
cd my-project
npm install
npm run dev
webpack和webpack-simple的区别
- 怎样修改input的placeholder字体
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #666;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #666;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #666;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #666;
}
由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
---当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
---当你修改数组的长度时，例如： vm.items.length = newLength
为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果， 同时也将触发状态更新：
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)
为了解决第二类问题，你也同样可以使用 splice：
example1.items.splice(newLength)
- 有时候想要给一些元素添加after before等伪元素，但是却不起作用。
注意：
1 after等伪元素必须要有content
2 :before and :after only work with non-replaced elements.
测试：
<style type="text/css">
.text::-webkit-input-placeholder{
color:red;
position:relative;
/*background:blue;*/
}
.text::after{
content:'you';
position:absolute;
left:40px;
}
.test{
color:blue;
background:#f00;
position:relative;
}
.test::after{
content:'you';
position:absolute;
left:40px;
}
</style>
<body>
<input type="text" placeholder="123" class="text">
<span class="test">hello</span>
</body>
image.png
5
提醒一下，当使用路由参数时，例如从 /user/foo 导航到 user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象：
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
6 .jquery post操作时报错415，查看参数发送以formData形式，接口参数需要的是request payload
解决方法：contentType: "application/json"
1.text/html
2.text/plain
3.text/css
4.text/javascript
5.application/x-www-form-urlencoded
表单发包
<form enctype="application/x-www-form-urlencoded" action="http://homeway.me/post.php" method="POST">
6.multipart/form-data
发送文件数据时，使用multipart/form-data
7.application/json
发送普通json数据
8.application/xml
7 浏览器input元素获取焦点后调起键盘，失去焦点后键盘消失
移动端onchange结束后键盘并不消失，需要手动input blur，
focus() blur()
8 css设置高度和宽度一致[未完待续]
top margin-top bottom这种百分比是根据宽度来的
width:16%
height:0
padding-top:16%
9 为什么后边的class不会覆盖掉前边的class属性
.parent .title{}
.title{}
前边的class前面还有父元素，后边的class权重低
10
rgba设置的不透明度只作用与当前元素，而opacity会被子元素继承。所以RGBA相对于Opacity还是技高一筹的。当然，只要是涉及到颜色的都可以用RGBA来设置，比如上面用到的background-color、text-shadow、box-shadow。
11 touch事件
touch(){
//let touchStart={pageX:-1,pageY:-1},//每次调用都会还原啊
let move=0,touch;
switch(event.type){
case 'touchstart':
touch = event.targetTouches[0];
this.touchStart={x:touch.pageX,y:touch.pageY};
break;
// case 'touchmove':
// console.log(event.touches[0]);
// touchEnd.pageX=event.touches[0].pageX;
// touchEnd.pageY=event.touches[0].pageY;
// move=touchEnd.pageX-touchStart.pageX;
// slideImage(move,index);
// break;
case 'touchend':
touch = event.changedTouches[0];
this.touchEnd={x:touch.pageX,y:touch.pageY};
move=this.touchEnd.x-this.touchStart.x;
this.slideImage(move);
break;
}
12 transition:all 0.3s linear 0s; 最后需要加上s！！！！！！
不加s时在ios系统下可以实现动画，但在android系统下则不行
网友评论