Vue介绍

1.Vue是一套前端框架，可以免除JavaScript中DOM操作

2.基于MVVM，实现双向绑定 视图变化同时模型变化，模型变化同时视图变化

　　MVC：只能实现模型到视图的单向展示

一.Vue快速入门

　　1.新建HTML页面，引入Vue.js文件

　　2.在JS代码区域，创建Vue核心对象，进行数据绑定

　　3.编写视图

二.Vue常用指令

　　v-bind　：为HTML标签绑定属性值，如设置href，css样式等

<a v-bind:href="url">跳转按钮</a>
<a:href="url">跳转按钮</a>

　　v-model ：为表单元素上创建双向数据绑定　　

<input name="username" v-model="username">

　　v-on：为HTML标签绑定事件

　　html:　　<input type="button" value="按钮" v-on:click="show()">

　　　　简化:<input type="button" value="按钮" @click="show()">

　　v-if,v-else,v-else-if：条件性渲染某元素，判定为true时渲染，否则不渲染

<div v-if="count==3">div1</div>
<div v-elsle-if="count==2">div2</div>
<div v-else>div3</div>

　　v-show：根据条件展示某元素，区别在于切换的时display属性的值

<div v-show="count==3">div4</div>

　　v-for：列表渲染，遍历容器的元素或者对象的属性　

<div v-for="addr in addrs">
    {{addr}}<br>
</div>

//加索引
<div v-for="(addr,i)in addrs">
<!--i表示索引，从0开始-->
{{i+1}}:{{addr}}<br>
</div>

三.Vue生命周期

　　生命周期有八个阶段，每触发一个生命周期事件，会自动执行一个生命周期方法

　　注意:　　mounted：挂载完成，Vue初始化成功，HTML页面渲染成功

　　　　　　页面加载完成后，就可以发送异步请求，查询数据　　　　　　　　　

new Vue（{
    el:"#app",
    mounted(){
        alert("vue挂载完毕，发送异步请求");
    }
});