这里用到的代码：https://github.com/liyang1234…
jQuery和VUE的比较
jQuery中包含了大量的Dom操作，无论怎么操作，都要先找到Dom对象，对它进行操作。频繁操作Dom会导致网页的重绘和重排，比如remove一个节点，当然就要重建Dom树，也肯定对性能有影响。VUE中有虚拟DOM,它的作用就是，在内存里面通过js去模仿Dom树这样的一个数据结构。当网页中有东西变化时，并不是同步到真实Dom上，而是把这个状态和内存中的虚拟Dom进行比较，仅仅把发生变化的东西放在真实Dom上。这就是VUE比jQuery性能更好的地方。
输出HelloWorld
下载vue.js传送门：https://cn.vuejs.org/v2/guide…
开发版vue.js,是未压缩过的，生产版是vue.min.js,是被压缩过的。
开发版
生产版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script src="vue.min.js"></script>
<script>
let vm = new Vue({
el: '#app',
//表示挂载元素 表明元素在上面id是app的div里面才好使，放在外面没有用，只当做字符串去解析
data: {
msg: 'Hello World'
}
});
</script>
</body>
</html>运行截图： 
console.log(vm);一下得到的是一个Object
vm.$el得到挂载元素
如果想获取内容
vm.$data.msg或者vm.msg
如果想要给msg赋值、改变值
vm.msg = “123456”;在回车的瞬间，网页中内容也瞬间改变成123456，原因是data相当于Model层中的一个变量，当data改变时，通过ViewModel中的data Bindings传递到View层，所以VUE框架是数据驱动的。
v-指令
VUE官网API传送门：https://cn.vuejs.org/v2/api/
v-if指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<span v-if="true">你好，我是李洋</span>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
});
</script>
</body>
</html>v-if是true的时候显示内容，false的时候什么也不显示
他这里是在DOM结构中被删除了
<div id="app">
<span v-if="isClick">你好，我是李洋</span>
</div>
<script src="vue.min.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
isClick: false
}
});
</script>当vm.isClick = true的时候
v-if后面也可以写表达式
<span v-if=”isClick == 1?true:false”>你好，我是李洋</span>
输入vm.isClick=0时，
v-else-if指令
<div>
<span v-if="letter == 'A'">A</span>
<span v-else-if="letter == 'B'">B</span>
<span v-else="letter == 'C'">C</span>
</div>
<script src="vue.min.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
isClick: 1,
letter: "A"
}
});
</script>
回车之后
随便输入个其他内容，回车输出C
v-show指令
<div>
<span v-show="isShow">SHOW</span>
</div>
<script src="vue.min.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
isClick: 1,
letter: "A",
isShow: true
}
});
</script>
vm.isShow=false之后，内容消失，但是v-show是在样式当中自动设置了displayLnone;空间上还是占位置的。
所以当频繁显示true,false的时候使用v-show，因为若使用v-if会不断的增删DOM树，形象性能。
也可以用 !isShow
<span v-show="isShow">SHOW</span>
<span v-show="!isShow">NOT SHOW</span>
v-for指令遍历数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="com in companies">{{com}}</li>
</ul>
</div>
<script src="vue.min.js"></script>
<script>
let vm = new Vue({
el :'#app',
data: {
companies: ['百度','阿里巴巴','腾讯','滴滴','小米']
}
});
</script>
</body>
</html>
push进去一个
如果还想输出数组下标 双花括号中的变量名字是随便起的
<li v-for=”(com, index) in companies”>{{com}}–{{index}}</li>
表达式非常灵活，可以算术运算
<li v-for=”(com, index) in companies”>{{com}}–{{index+1}}</li>
v-for指令遍历对象
<div>
<ul>//遍历对象的时候有三个参数，值，键，索引 **双花括号中的变量名字是随便起的，这样只是比较语义化**
<li v-for="(val,key,index) in object">{{val}}--{{key}}--{{index+1}}</li>
</ul>
</div>
<script src="vue.min.js"></script>
<script>
let vm = new Vue({
el :'#app',
data: {
companies: ['百度','阿里巴巴','腾讯','滴滴','小米'],
object: {
name: 'liyang',
age: 22,
company: 'Baidu'
}
}
});
</script>
v-for指令遍历数组中的对象，类似json对象格式
<div>
<ul>
<li v-for="obj in arr">
{{obj}}
</li>
</ul>
</div>
<script src="vue.min.js"></script>
<script>
let vm = new Vue({
el :'#app',
data: {
companies: ['百度','阿里巴巴','腾讯','滴滴','小米'],
object: {
name: 'liyang',
age: 22,
company: 'Baidu'
},
arr: [{
name: 'liyang',
age: 22,
company: 'Baidu'
},{
name: 'qqq',
age: 23,
company: 'Alibaba'
},{
name: 'www',
age: 24,
company: 'Tencent'
}]
}
});
</script>
获取数组中的每一个对象，运行效果：
获取对象中的某个信息
{{obj.name}}
获取对象中的所有信息
<ul>
<li v-for="obj in arr">
<div v-for="(val,key) in obj">{{val}}--{{key}}</div>
<!-- {{obj}} -->
</li>
</ul>
如果想得到按照年龄大小排序的结果
<ul>
<li v-for="obj in arrSort">
<div v-for="(val,key) in obj">{{val}}--{{key}}</div>
<!-- {{obj}} -->
</li>
</ul>
computed: {
arrSort() {
return this.arr.sort(function (a, b) {
return a.age - b.age;
});
}
}这里就很困惑哦，为啥a.age-b.age返回这个值就是升序排序了
去查了一下
var numArr = [13,22,43,9,34,223,98];
numArr.sort(function(a,b) {
return a - b;//升序
});
console.log(numArr); 
var numArr = [13,22,43,9,34,223,98];
numArr.sort(function(a,b) {
return b - a;//降序
});
console.log(numArr); 
原因：其实这个函数相当于一个委托(或许说谓词函数更为贴切一些)，因为要对数组排序，必然要涉及到两个数组成员的比较，这个函数为你提供一种选择，以改变默认的大小比较规则，排序结果根据这个规则进行比较(函数返回值小于0认为是第一个元素小于第二个元素，等于0是两个元素相等，大于0是第一个元素大于第二个元素)。简单的改变这个函数，你就可以实现倒序排序。也可以对一个具有多个属性的对象进行排序。
v-text指令
v-text指令相当于先解析双花括号，再解析里面的内容，解决页面加载有双花括号会闪烁的问题。
<div id="app">
<span v-text="msg"></span>
<span v-html="msg"></span>
</div>
<script src="vue.min.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: '<h3>I am Liyang</h3>'
}
});
</script>
v-html不建议使用，会注掉一些标签，引起安全性问题
