Vue全家桶：
vuejs + vue-router + vuex + vue-cli
项目全家桶：
框架全家桶 + node + 数据库
使用vue的步骤：
1.引入vue
2.在body中创建一个元素，并且给它一个class或者id
3.实例化Vue
new Vue({
el:第二步的名字,（#app | .app）,
data:{
数据: ' ' | { } | [ ]
}
})
4.显示数据:
在第二步的元素中输入
{{ 数据名称 }}
例子--选项卡：
<style>
.active{
background: yellow;
}
</style>
/************************************/
<body>
<div id="ppa">
<!-- 循环数据，当点击的时候把当前的key传到changeC中 -->
<button
v-for="(val,key) in content"
@click="changeC(key)"
:class="{active:key==num}"
>
按钮{{key+1}}
</button>
<!-- 循环数组，只要key等于num的就显示 -->
<div
v-for="(val,key) in content"
v-show="key==num"
>{{val}}</div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#ppa',//父元素的id 或 class
methods:{//method 方法 :{ 放事件函数 }
changeC(key){
this.num = key;
}
},
data:{//放数据
content:['1111','2222','3333'],
num:0
}
})
</script>
</body>
v-if = "数据|判断"
只要条件成立，就显示if中的元素
v-else （注意:必须跟在v-if或者v-if-else的后面，不然失效）
如果if条件不成立显示当前的元素
v-else-if 要紧跟 v-if
v-show
条件成立就显示，不成立就display:none
性能比 v-if 略好。
<li v-for="(val,key,index) in obj">{{index}}</li>
val:数组中的每个值，对象每个值
key:数据就下标，对象key值
index:下标0,1,2
v-for="(val,key)" in obj
注意:
{{里面只能写一个变量}} -> {{index}}{{key}}
v-text => innerText 文本
v-html => innerHTML 内容（包括元素）
v-on:事件名
缩写:@事件名
事件函数写在 methods 下
methods在根实例下，值为一个对象
methods:{
函数名( ){
this指向实例
this的数据修改，直接this.数据名即可
}
}
比如：<button @click="fn">按钮</button>
在事件函数中，如果不加括号就默认传入event对象,那么事件函数的第一个参数就是event对象。
*** 如果在事件函数中，已经有参数了，但是还要使用event对象，那么就使用$event。
修饰符：
.stop => event.stopPropagation() // 阻止冒泡
.prevent => 调用 event.preventDefault() // 阻止默认行为
v-bind:class 给元素绑定class
缩写：
:class
一般是用来操作属性的。 class src href style
:class='c' 可以写数据
:class='{red:true}' 也可以是个对象 red->类名：布尔值，只有为true的时候才显示。
:class='[c1,c2]' c1和c2为对象{red：true}
例子：
<style>
#app-div div{
100px;
height: 100px;
}
.red{
background: red;
}
.green{
background: green;
}
</style>
</head>
<body>
<div id='app-div'>
<button @click='changeC'>点击变绿</button>
<button @click='changeR'>点击变红</button>
<button @click='change'>变</button>
<!-- <div :class="c"></div> -->
<div :class='[c1,c2]'></div>//c1.class,c2.class哪个是true，就显示哪个class。都为true，后面的会覆盖前面的
</div>
<script src="./Vue.js"></script>
<script>
new Vue({
el:'#app-div',
methods:{
changeC(){
this.onOff = false;
this.c1.red=this.onOff;
this.c2.green=!this.onOff;
},
changeR(){
this.onOff = true;
this.c1.red=this.onOff;
this.c2.green=!this.onOff;
},
change(){
this.onOff=!this.onOff
this.c1.red = this.onOff
this.c2.green = !this.onOff
}
},
data:{
onOff:true,
c1:{
red:''
},
c2:{
green:''
}
}
})
</script>
</body>