一、 Vue快速入门
- 1.新建HTML页面，引入Vue.js文件
<script src="js/vue.js"></script>
- 2.在JS代码区域，创建Vue核心对象，进行数据绑定
<script> //1.创建vue对象 new Vue({ el:"#app", data() { return { username:"" } } }); </script>
- 3.编写视图
<div id="app"> <input v-model="username"> <!-- 插值表达式 --> {{username}} </div>
二、Vue常用指令
- 指令：HTML标签上带有Vs前缀的特殊属性，不同指令具有不同含义。例如：V-if,V-for…
- 常用指令：
| 指令 | 作用 |
| v-bind | 为HTML标签绑定属性值，如设置href,css样式等 |
| v-model | 在表单元素上创建双向数据绑定 |
| v-on | 为HTML标签绑定事件 |
| v-if | 条件性的渲染某元素，判定为true时渲染，否则不渲染 |
| v-else | 条件性的渲染某元素，判定为true时渲染，否则不渲染 |
| v-else-if | 条件性的渲染某元素，判定为true时渲染，否则不渲染 |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
| v-for | 列表渲染，遍历容器的元素或者对象的属性 |
2.1 v-bind&v-model
<div id="app"> <a v-bind:href="url">点击</a> <input v-model="url"> </div>
<script> //1.创建vue对象 new Vue({ el:"#app", data() { return { username:"", url:"http:www.baidu.com" } } }); </script>
2.2 v-on
<div id="app"> <input type="button" value="按钮" v-on:click="show()"><br> <input type="button" value="按钮" @click="show()"> </div>
<script> //1.创建vue对象 new Vue({ el:"#app", methods:{ show() { alert("我被点了"); } } }); </script>
2.3 v-if
<div id="app"> <div v-if="count==1">div1</div> <div v-else-if="count==2">div2</div> <div v-else>div3</div> <input v-model="count"> </div>
<script> //1.创建vue对象 new Vue({ el:"#app", data(){ return { username:"", count:3 } } }); </script>
2.4 v-show
<div id="app"> <input v-model="count"> <div v-show="count==4">div4 v-show</div> </div>
<script> //1.创建vue对象 new Vue({ el:"#app", data(){ return { username:"", count:3 } } }); </script>
2.5 v-for
- v-for内addr是自定义参数，addrs表示Vue返回的数组addrs[“北京”,“上海”,“广州”]
<div id="app"> <div v-for="addr in addrs"> {{addr}}<br> </div>
<script> //1.创建vue对象 new Vue({ el:"#app", data(){ return { username:"", count:3, addrs:["北京","上海","广州"] } } }); </script>
加索引：
<div id="app"> <div v-for="(addr,i) in addrs"> {{i + 1}} -- {{addr}}<br> </div>
三、Vue的生命周期
- Vue的生命周期分为八个阶段，每触发一个生命周期事件，会自动执行一个生命周期的方法
| 状态 | 阶段周期 |
| beforeCreate | 创建前 |
| created | 创建后 |
| beforeMount | 载入前 |
| mounted | 挂载完成 |
| beforeUpdate | 更新前 |
| updated | 更新后 |
| beforeDestory | 销毁前 |
| desoryed | 销毁后 |
- mounted:挂载完成，Vue初始化成功，HTML页面渲染成功。
- 发送异步请求，加载数据
