# 小知识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= '样式名称'
}
```