From e8b428dea4b861c92f139f9d129f626fc7b6d789 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Tue, 15 May 2018 15:52:06 +0800 Subject: [PATCH] update --- 00-前端工具/03-VS Code.md | 2 +- 16-前端基础/ajax相关.md | 19 +++++ 16-前端基础/css开发相关.md | 10 +++ 16-前端基础/json字符串的解析和遍历.md | 102 ++++++++++++++++++++++++++ 16-前端基础/json相关.md | 10 +++ 20-前端综合/2018年-前端日记.md | 65 ++++++++++++++++ 21-Vue基础/01-03.Vue的系统指令(二).md | 35 ++++++++- 21-Vue基础/Vue开发积累.md | 47 ++++++++++++ 8 files changed, 285 insertions(+), 5 deletions(-) create mode 100644 16-前端基础/ajax相关.md create mode 100644 16-前端基础/css开发相关.md create mode 100644 16-前端基础/json字符串的解析和遍历.md create mode 100644 16-前端基础/json相关.md create mode 100644 21-Vue基础/Vue开发积累.md diff --git a/00-前端工具/03-VS Code.md b/00-前端工具/03-VS Code.md index c8ca426..12175eb 100644 --- a/00-前端工具/03-VS Code.md +++ b/00-前端工具/03-VS Code.md @@ -123,7 +123,7 @@ Sass 文件格式化。 - -### vscode-fileheader：添加顶部注释模板 +### vscode-fileheader：添加顶部注释模板(签名) （1）安装插件vscode -fileheader，并重启。 diff --git a/16-前端基础/ajax相关.md b/16-前端基础/ajax相关.md new file mode 100644 index 0000000..b17ccdf --- /dev/null +++ b/16-前端基础/ajax相关.md @@ -0,0 +1,19 @@ + + +### jsonp ajax + +ajax跨域访问是一个老问题了，解决方法很多，比较常用的是JSONP方法，JSONP方法是一种非官方方法，而且这种方法只支持GET方式，不如POST方式安全。 + +意思是说，如果后台返回的数据类型是jsonp，那么前端的请求方式只能是get，不能是post。 + +如果跨域使用POST方式，可以使用创建一个隐藏的iframe来实现，与ajax上传图片原理一样，但这样会比较麻烦。 + +因此，在**前端使用post方法，数据类型是json**的情况下，如果想跨域的话，可以通过设置Access-Control-Allow-Origin来实现跨域访问比较简单。 + + + +参考链接： + +- [ajax 设置Access-Control-Allow-Origin实现跨域访问](https://blog.csdn.net/fdipzone/article/details/46390573/) + + diff --git a/16-前端基础/css开发相关.md b/16-前端基础/css开发相关.md new file mode 100644 index 0000000..6a763d7 --- /dev/null +++ b/16-前端基础/css开发相关.md @@ -0,0 +1,10 @@ + +### p标签里的文字溢出怎么办 + +加一个属性即可： + +```css + word-break: break-all; + +``` + diff --git a/16-前端基础/json字符串的解析和遍历.md b/16-前端基础/json字符串的解析和遍历.md new file mode 100644 index 0000000..e08c921 --- /dev/null +++ b/16-前端基础/json字符串的解析和遍历.md @@ -0,0 +1,102 @@ + + + +```html + + + + + + + + Document + + + + +
+
+

{{key}}

+

{{value.name}}

+
+ +
+ + + + + +``` \ No newline at end of file diff --git a/16-前端基础/json相关.md b/16-前端基础/json相关.md new file mode 100644 index 0000000..262c1b7 --- /dev/null +++ b/16-前端基础/json相关.md @@ -0,0 +1,10 @@ + + +## json中根据键获取值 + +参考链接： + +- + +- + diff --git a/20-前端综合/2018年-前端日记.md b/20-前端综合/2018年-前端日记.md index 28840c4..3cb728a 100644 --- a/20-前端综合/2018年-前端日记.md +++ b/20-前端综合/2018年-前端日记.md @@ -85,6 +85,71 @@ Vue.component('my-div', $.extend({ - sku的概念 +### 2018-05-09 + +- 输入框正则的匹配 + +让输入框仅支持输入单个id，且为字符串。如果输入多个id，或者非数字的字符，则自动删除： + +```javascript +v-on:keyup="querysku = querysku.replace(/\D/,'')" +``` + + +### 2018-05-10 + +- 如果在控制台看到网络请求陈功，数据也获取成功，但是在ajax里走的是 error（数据获取失败），说明是 ajax代码的判断逻辑有问题。 + +- 服务器返回的json数据到底是对象还是字符串？ + +- josn数据里的字段，有顺序吗？比如下面这段： + +```jsonn +{ + "1492948848": { + "3": "1", + "spec": "", + "imagePath": "jfs/t3076/90/7623078170/152165/9fe8c39d/58b94105N8ed8d2c0.jpg", + "color": "橘色 ", + "name": "【多色可选】丽装铺园纯色百搭简约打底T恤女 橘色 M", + "size": "M" + }, + "1492948847": { + "3": "1", + "spec": "", + "imagePath": "jfs/t3109/27/9469817576/176241/aa424d04/58d4c849Ne22114ed.jpg", + "color": "灰色 ", + "name": "【多色可选】丽装铺园纯色百搭简约打底T恤女 灰色 S", + "size": "S " + } +} +``` + +答案：顺序不重要。 + +- Vue开发中，在其他地方用到Vue实例中的数据时，一定要用this，或者是`vm.$data.myName`之类的。 + +- 疑问：下面的src路径的前面，为何要加`//`： + +``` + +``` + +我发现，控制台看到的输出src中，会自动加上http。如果前面不加`//`则表示相对路径。 + +### 2018-05-11 + +- 将逗号分隔的字符串，转换为数组： `str.split(",")`。即使数组中只有一个元素，也可以这样用。参考链接：[#](https://blog.csdn.net/erlian1992/article/details/50561452) + +### 2018-05-14 + +- ajax发的是post请求，但是后台却只收到了部分数据怎么办？答案：前端的post请求记得加content-type字段，否则会被识别成 get 请求。 + +- p标签里的文字溢出怎么办？ + +- whistle该怎样mock数据？ + + diff --git a/21-Vue基础/01-03.Vue的系统指令(二).md b/21-Vue基础/01-03.Vue的系统指令(二).md index 3e51026..f54461e 100644 --- a/21-Vue基础/01-03.Vue的系统指令(二).md +++ b/21-Vue基础/01-03.Vue的系统指令(二).md @@ -708,7 +708,7 @@ key的类型只能是：string/number，而且要通过 v-bind 来指定。 -## v-if：设置元素的显示和隐藏 +## v-if：设置元素的显示和隐藏（添加/删除DOM元素） **作用**：根据表达式的值的真假条件，来决定是否渲染元素，如果为false则不渲染（达到隐藏元素的目的），如果为true则渲染。 @@ -755,7 +755,7 @@ key的类型只能是：string/number，而且要通过 v-bind 来指定。 ![](http://img.smyhvae.com/20180329_1920.gif) -## v-show：设置元素的显示和隐藏 +## v-show：设置元素的显示和隐藏（在元素上添加/移除`style="display:none"`属性） **作用**：根据表达式的真假条件，来切换元素的 display 属性。如果为false，则在元素上添加 `display:none`属性；否则移除`display:none`属性。 @@ -802,7 +802,34 @@ key的类型只能是：string/number，而且要通过 v-bind 来指定。 ![](http://img.smyhvae.com/20180329_2040.gif) -**v-if和v-show的区别**： +### v-if和v-show的区别 + +`v-if`和`v-show`都能够实现对一个元素的隐藏和显示操作。 + +区别： + +- v-if：每次都会重新添加/删除DOM元素 + +- v-show：每次不会重新进行DOM的添加/删除操作，只是在这个元素上添加/移除`style="display:none"`属性，表示节点的显示和隐藏。 + +优缺点： + +- v-if：有较高的切换性能消耗。这个很好理解，毕竟每次都要进行dom的添加／删除操作。 + +- v-show：**有较高的初始渲染消耗**。也就是说，即使一开始`v-show="false"`，该节点也会被创建，只是隐藏起来了。而`v-if="false"`的节点，根本就不会被创建。 + +**总结**： + +- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show + +- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if + + + + + + + + -`v-if`和`v-show`都能够实现对一个元素的隐藏和显示操作。但是`v-if`表示添加/删除DOM元素；而`v-show`是在这个元素上添加/移除`style="display:none"`属性，表示节点的显示和隐藏。 diff --git a/21-Vue基础/Vue开发积累.md b/21-Vue基础/Vue开发积累.md new file mode 100644 index 0000000..a8a8124 --- /dev/null +++ b/21-Vue基础/Vue开发积累.md @@ -0,0 +1,47 @@ + + + +### 动态添加对象的属性 + +- Vue中，动态新增对象的属性时，不能直接添加。正确的做法是：Vue.set(obj,key,value)。参考链接：[#](https://blog.csdn.net/tian361zyc/article/details/72909187) + + + + +### 判断一个checkbox是否被选中 + +```html + + + + +{{isSelected}} + + + +haha + +``` + + + +### 多个checkbox的全选和反选 + +现在有多个checkbox的item在一个数组中，另外还有一个“全选”的checkbox按钮。 + +**点击全选按钮，让子item全部选中**： + +采用 watch 监听全选按钮，然后改变子item。 + +**当子item全部被选中时，触发全选按钮**： + +采用 computed 计算子item 的状态，存放到变量 allChecked 中，然后用 watch 监听 allChecked 的值。 + +参考链接： + +- [问Vue.js 如何在 data 里含数组的情况下，监听数组内指定属性的变化？](https://segmentfault.com/q/1010000014514160/a-1020000014514452) + + + + +