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