Vue
与传统的命令式编程不同，使用的是声明式编程。
构造实例对象，往对象中添加属性，其中el和data是固定的属性。
let app=new Vue({
el:'#qq',
data:{
message:[1,2,3,345487,52]
}
})
显示列表
v-for会自动解析，而且是响应式布局（就是数据发了变动就会马上再网页上显示出来。）
<div id="qq">
<ul>
<li v-for='item in message'>{{item}}</li>
</ul>
</div>
再控制台输入就会马上再页面上表现出来。
计数器案例
1.button要写在大盒子内，不然vue不会捕捉到
2.v-on:click也可以写成@click语法糖的形式
3.v-on:click=”counter++”后面也可以加方法v-on:click=“add”
4.方法下面，得用this，不然会去找全局下面的counter
<div id="box">计数:{{counter}}
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
</div>
<script src="../vue.js"></script>
<script>
let app=new Vue({
el:'#box',
data:{
counter:0
},
methods:{
add:function(){
this.counter++;
},
sub:function(){
this.counter--;
}
}
})
实例对象下面的类
mvvm
model,view,wm
https://www.jianshu.com/p/ea9d556d6529
生命周期
vue的生命周期理解：创造vue实例的时候会做很多事情，然后他有许多回调函数（hook），你可以设置回调函数知道vue现在进行到哪一步，要进行什么操作了。
再创建vue实例的时候，到其中一步会自动调用created这个函数。
let app=new Vue({
el:'#qq',
data:{
counter:0
},
created:function(){
console.log(123);
}
})
一些语法
1.双括号语法，里面可以写简单的表达式
<li>{{counter*6}}</li>
<li>{{counter+bnanme}}</li>
-
v-once，代表后面的元素或者组件只会渲染一次，不会随数据改变而改变.
-
v-pre,代表不会进行渲染双括号语法。
{
{counter+bnanme}}
4.v-text和双括号很像，但是他有缺点， 所以一般用双括号，他会覆盖后面的双括号内容。
<li>{{counter}}</li>
<li v-text='counter'></li>
//能显示bnanme
<li>{{counter}}{{bnanme}}</li>
不能显示bnanme
<li v-text='counter'>{{bnanme}}</li>
5.v-html，能解析html标签。
代表以html的格式来渲染counter，
//这里面不用在写{{counter}}了
<li v-html='counter'></li>
data:{
counter:'<a href="">123</a>'
},
v-bind
可以动态绑定一些属性，比如a元素的href，img的src属性等,响应式绑定。
如果没有加：，就会把后面的作为字符串。如果加了，就会把它看做一个变量，从vue实例中寻找对应的值
<img v-bind:src="imgurl" alt="">
语法糖形式：
<img :src="imgurl" alt="">
data:{
counter:'<a href="">123</a>',
imgurl:'../img/1.jpg'
}
动态绑定class语法
1.需要写好style属性
.counter{
color: red;
}
2.用语法糖给他添加class哪个class,添加的为下面这个对象的属性。
<li :class='counter'>123</li>
3.把class赋值给变量
其中值要用双引号才行！
let app=new Vue({
el:'#qq',
data:{
counter:'counter'
}
})
如果是对象的话，一般不再data里面写类名了，直接在style里面写。
就是style里面的类名可以直接拿过来！！
.acc{
color: red;
}
.ass{
color: yellow;
}
<li :class='{ass:isass,acc:isacc}'>123</li>
data:{
isass:true,
isacc:true
}
如果原来有class的话，会进行合并不会覆盖！
应用：把固定的样式放在前面的class，把会动态的class放到对象里面
<ul>
<li class='pp' :class='{ass:isass,acc:isacc}'>123</li>
</ul>
最后一种方法
（再项目中经常用到，如果class太多，可以利用返回函数来做）
函数调用要加双引号，然后返回要是一个对象，对象里面用冒号
特别注意：一定要注意要不要加this！！！！
<li class='pp' :class="getclass()">123</li>
methods:{
getclass:function(){
return {acc:this.isacc,ass:this.isass}
}
}
绑定一些css内联样式
样式名用驼峰：backgroundColor
键值对用冒号来连接。
对象语法
注意，键名可以不加引号，但是键值一定要加引号，不然会当做变量来解析。
<li :style="{backgroundColor:'red'}">{{message}}</li>
当做变量来解析
red会当做变量，去找下面的字符串到底是什么。
<li :style="{backgroundColor:red}">{{message}}</li>
let app=new Vue({
el:'#qq',
data:{
message:'123456',
red:'yellow'
}
})
如果style用函数的形式返回，注意如果是变量的话要加this
<li :style="sex()">{{message}}</li>
methods:{
sex:function(){
return {backgroundColor:this.red};
}
}
computed的使用
这里就不需要加括号了，就可以直接调用，因为就是把这个当做一个属性而不是函数。
<div id="box">{{fullname}}</div>
computed:{
fullname:function(){
return this.name+this.namee;
}
},
复杂案例
里面可以包含一个各种数组的方法来进行计算。
data:{
name:[
{price:44},
{price:366},
{price:12},
{price:11}
]
},
computed:{
fullname:function(){
let total=0;
for(var i in this.name){
total+=this.name[i].price
}
return total
}
},
详解
其实，computed下面的fullname也只是一个属性，这个属性下面才会有2个方法，get和set，而我们一般只用get，代表输出，不用管set。
而一般我们也只用语法糖的形式来写，所以会把get直接省略，因此，在{
{fullname}}我们不用写函数的调用，因为他只是一个属性。
fullname:{
set:function(){},
get:function(){}
}
两种方法的区别
computed和methods其实都可以实现对字符串拼接。
区别1：computed下面的属性不用调用，methods的属性需要调用
区别2：
computed的属性有缓存机制
，他会观察下面的变量有没有变化，没有变化就不会再调用get函数直接输出。这样性能比较高。而methods下面的函数每次调用都会调用自己的函数，所以性能比较差。
对象字面量增强写法
1.函数增强
var b={
//现在的简便写法
qq(){
console.log(123);
},
//以前的写法
qqq:function(){
console.log(333);
}
}
属性增强
就可以直接把属性放进去了
const name='why';
const age=123;
var b={
name,
age
}
console.log(b);