【Vue】Vue快速入门、Vue常用指令、Vue的生命周期

---

🐌个人主页： 🐌 叶落闲庭
💨我的专栏：💨
c语言
数据结构
javaEE
操作系统
Redis

石可破也，而不可夺坚；丹可磨也，而不可夺赤。

---

一、 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页面渲染成功。
• • 发送异步请求，加载数据