# 小知識1
## vue和jquery的區別
- 賦值
> jquery
```html
<input id="test" type="text"/>
```
```javascript
//獲取dom
var dom = document .getElementById('test);
//取值
console.log(dom.val());
//賦值
dom.val('這里賦值');
~~輸入框輸入值后，取值賦值都是手動操作，手動賦值后需要手動更新視圖(輸入框才會更新)
```
> vue
```html
<input v-model="test" type="text"/>
```
```javascript
//取值
console.log(this.text);
//賦值
this.text = '這里賦值';
```
~~輸入框輸入值后，自動賦值變量，手動賦值的時候也會改變視圖
*****
- 循環
> jquery
```html
<div id="test"></div>
```
```javascript
//獲取dom
var dom = document .getElementById('test);
var list=[{
label:'測試',
value:1
}]
var str = '';
for(var i =0;i<list.length;i++){
str = '<span id="+list[i].value+">+list[i].label+'</span>'
}
dom.innerHtml(str);
~~list值改變每次更新視圖都需要操作字符串，同時復雜的dom用字符串的形式難以維護
```
> vue
```html
<div>
<span :id="item.value" v-for="item in list">{{item.label}}</span>
</div>
```
```javascript
var list=[{
label:'測試',
value:1
}]
```
~~直接在dom上自動綁定,復雜dom也好維護，同時list數據改變，自動更新視圖
- vue和react以及angular的區別
> 流行的三個框架思想都是一至，在寫法，調用，以及性能上可能有著不同的差別
1. angular -> react - > vue
2. vue,react -> angular
3. react -> vue
~~ angular - > angularjs
*****
## jquery注意
- 循環拼接字符串
```javascript
var str = '';
for(var i =0;i<list.length;i++){
str = '<span id="'+list[i].value+'">'+list[i].label+'</span>'
}
dom.innerHtml(str);
```
這樣子層次復雜很難維護，可以 采用如下寫法
```html
<div id="test"></div>
<script id="temp">
<span>姓名：${label}</span>
<span>名稱：${value}</span>
</script>
```
``` javascript
var temp = document .getElementById('temp);
var dom = document .getElementById('test);
var str = temp.innerHtml;
for(var i =0;i<list.length;i++){
var ele = list[i];
str = str.replace('${label}',ele.label);
str = str.replace('${value}',ele.value);
}
dom.innerHtml(str);
```
~~ 這樣子好處是不用拼接字符串 ，以類模版的形式
- 單引號和雙引號
> 頁面中單引號和雙引號都是生效的，es6最新規定字符串全部用單引號，標簽屬性用雙引號
```javascript
//單引號
'<span id="'+list[i].value+'">'+list[i].label+'</span>'
//雙引號,這里的屬性雙引號需要轉義
"<span id=\""+list[i].value+"\">"+list[i].label+'</span>'
```
- 回調地獄——ajax
深層次的代碼嵌套,代碼難以維護，以函數的方式分割
```javascript
//回調嵌套
//處理邏輯1
$.ajax(...,function(res){
var list =res;
...
//處理邏輯2
$.ajax(...,function(res){
var list =res;
...
//處理邏輯3
$.ajax(...,function(res){
var list =res;
...
})
})
})
```
```javascript
//鏈式調用
//處理邏輯1
function test1(params){
return new Promise(function(resolve,reject){
$.ajax(...,function(res){
var list =res;
resolve(rest)
})
})
}
//處理邏輯2
function test2(params){
return new Promise(function(resolve,reject){
$.ajax(...,function(res){
var list =res;
resolve(rest)
})
})
}
//處理邏輯3
function test3(){
return new Promise(function(resolve,reject){
$.ajax(...,function(res){
var list =res;
resolve(rest)
})
})
}
test1().then(function(res){
...
return test2(res);
}).then(function(res){
...
return test3(res);
})).then(function(res){
...
})
```
- 字符串憑借處理邏輯
在拼接的字符串中串邏輯
```javascript
//正常寫法
label = list[i].label;
label = label +'/test';
value = list[i].value;
value = value +'/test';
'<span id="'+value+'">'+label+'</span>'
//巧用數組寫法
function value(list){
value = list[i].value;
value = value +'/test';
}
var list = [
'<span id="',
(function(){
label = list[i].label;
label = label +'/test';
return label;
})(),
'">',
value(list),
'</span>'
]
console.log(list.jion(''));
~~ layui框架中大量拼接字符串都是使用該方法
~~ split 和join（字符串拼接常用的方法）
```
- js和jquery盡量不要混合何用
jquery是js的增強包有著滿足大量需求api包，不要忽略jquey的包手動去寫，
這樣子讓代碼不易維護，如果找不到合適api，自己造api;
```javascript
//普通寫法
for(var i =0;i<list.length;i++){
var ele = list[i];
console.log(ele,i);
}
//jquery寫法
$.each(list,function(index,ele){
console.log(ele,index);
});
```
自己造api也就是自己封裝工具包，例如加水印，圖片壓縮，日期格式化等，也可以直接使用別人的工具包，不能滿足自己需求的，二次開發，封裝成自己的包。
開發幾年后，就會發現自己攢了很多自己的庫（提供開發效率），比較好的庫可以開源讓更多人參與維護和使用。
- github(全球)
- gitee(國內)
- 例子-水印生成器
[view-source:https://canvas.avue.top/](view-source:https://canvas.avue.top/)
[https://canvas.avue.top/](https://canvas.avue.top/)
*****
## vue注意
- {{}}和v-text區別
如果網速慢的情況下花括號會顯示出來，而v-text知道數據出來才會顯示
- v-model綁定對象的時候
雙向綁定數據的時候一定要在data里面申明，否則無法綁定數據
```html
<input v-model="test" type="text"/>
```
```javascript
data(){
return {
text:'',
}
}
```
~~ 賦值時候視圖無更新的情況，可以用this.$set方法強制賦值
~~ 如果綁定對象是深層次的結構對象，沒在data里面申明深層次的，而且要在v-model下水用,一定要用this.$set賦值
- vue也內置了dom操作方法
項目中使用vue時，最好不好用jquery包，因為他也內置了dom操作包，如果混合使用由于生命周期的問題會產生很多未知問題
~~給標簽加一個ref屬性，直接this.$ref.name即可
```html
<div ref="test"></div>
```
```javascript
mounted(){
this.$ref.test.className= '樣式名稱'
}
```