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

---

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

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

---

一、 Vue快速入门

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

<script src="js/vue.js"></script>
1

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

<script>
    //1.创建vue对象
    new Vue({
        el:"#app",
        data() {
            return {
                username:""
            }
        }
    });
</script>
1
2
3
4
5
6
7
8
9
10
11

• 3.编写视图

<div id="app">
    <input v-model="username">
    <!-- 插值表达式 -->
    {{username}}

</div> 
1
2
3
4
5
6

二、Vue常用指令

• 指令：HTML标签上带有Vs前缀的特殊属性，不同指令具有不同含义。例如：V-if,V-for…
• 常用指令：

2.1 v-bind&v-model

<div id="app">
    <a v-bind:href="url">点击</a>
    <input v-model="url">

</div>    
1
2
3
4
5

<script>
    //1.创建vue对象
    new Vue({
        el:"#app",
        data() {
            return {
                username:"",
                url:"http:www.baidu.com"
            }
        }
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12

2.2 v-on

<div id="app">
    <input type="button" value="按钮" v-on:click="show()"><br>
    <input type="button" value="按钮" @click="show()">

</div> 
1
2
3
4
5

<script>
    //1.创建vue对象
    new Vue({
        el:"#app",
        methods:{
            show() {
                alert("我被点了");
            }
        }
    });
</script>
1
2
3
4
5
6
7
8
9
10
11

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>    
1
2
3
4
5
6

<script>
    //1.创建vue对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                count:3
            }
        }
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12

2.4 v-show

<div id="app">
    <input v-model="count">
    <div v-show="count==4">div4 v-show</div>
</div>    
1
2
3
4

<script>
    //1.创建vue对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                count:3
            }
        }
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12

2.5 v-for

• v-for内addr是自定义参数，addrs表示Vue返回的数组addrs[“北京”,“上海”,“广州”]

<div id="app">
    <div v-for="addr in addrs">
        {{addr}}<br>
</div>  
1
2
3
4

<script>
    //1.创建vue对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                count:3,
                addrs:["北京","上海","广州"]
            }
        }
    });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

加索引：

<div id="app">
    <div v-for="(addr,i) in addrs">
        {{i + 1}} -- {{addr}}<br>
</div>   
1
2
3
4

三、Vue的生命周期

• Vue的生命周期分为八个阶段，每触发一个生命周期事件，会自动执行一个生命周期的方法

• mounted:挂载完成，Vue初始化成功，HTML页面渲染成功。
• • 发送异步请求，加载数据