定义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平级