Vue快速入门

定义Vue对象

new Vue({el: "#app", //vue接管区域  data:{//定义数据模型
},methods:{//定义函数
}
)

常用指令

v-model：将数据模型的数据绑定到视图层表单元素，双向数据绑定，即视图层数据变化也会影响视图模型
v-bind：为HTML标签绑定属性值.v-bind可以省略

<a v-bind:href="url">

v-on：为HTML标签绑定事件，可以简化为@
v-if/v-else-if/v-else：条件性渲染某元素

<span v-if="age <= 35">年轻人</span>
<span v-else-if="age > 35 && age < 60">中年人</span>
<span v-else>老年人</span>

v-for：列表渲染

<div v-for="(a,index) in list>{{a}},{{index}}</div>

v-show：根据条件展示元素，区别是都会渲染，切换的是CSS中display的值

<span v-show="age < 35">年轻人</span>

插值表达式：{{expression}}

Vue生命周期

每触发一个生命周期事件，就会自动执行一个生命周期方法（钩子）

定义vue的生命周期方法与method平级