Vue 基础精讲 - 爱码网

VUE 实例

　　每个组件都是一个 vue 的实例。

　　一个 vue 项目是由实例组成的。

　　vue 实例上有很多的实例属性和方法。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>vue 实例</title>
 9     <!-- 引入库文件 -->
10     <script src="./vue.js"></script>
11 </head>
12 
13 <body>
14     <div id="root">
15         <!-- <div v-on:click="handleClick"> {{message}}</div> -->
16         <div @click="handleClick"> {{message}}</div>
17         <item></item>
18     </div>
19 
20 
21     <script>
22 
23         Vue.component('item',{
24             template:"<div>hello item !</div>"
25         })
26 
27         // vue 实例 ，根实例
28         var vm = new Vue({
29             // 接管dom标签
30             el: '#root',
31             // 数据绑定
32             data: {
33                 message: 'Hello World'
34             },
35             // 方法
36             methods:{
37                 handleClick:function(){
38                     alert("ok")
39                 }
40             },
41         })
42 
43     </script>
44 
45 </body>
46 
47 </html>

　　 Vue 基础精讲

利用浏览器控制台展示实例内容

　　 Vue 基础精讲

　　“$” 符号开始的变量都是vue实例属性或者方法。

Vue 实例的生命周期钩子

　　生命周期函数就是 vue 实例在某一个时间点会自动执行的函数。

生命周期图示

　　 Vue 基础精讲

使用生命周期函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue 实例生命周期函数</title>
    <!-- 引入库文件 -->
    <script src="./vue.js"></script>
</head>

<body>
    
    <div id="app"></div>

    <script>
        // 生命周期函数就是 vue 实例在某一个时间点会自动执行的函数
        var vm = new Vue({
            el:"#app",
            // 使用模板
            template:"<div>hello world</div>",
            beforeCreate:function(){
                console.log('beforeCreate')
            },
            created:function(){
                console.log('created')
            },
            beforeMount:function(){
                console.log(this.$el)
                console.log('beforeMount')
            },
            mounted:function(){
                console.log(this.$el)
                console.log('mounted')
            },
            beforeDestroy:function(){
                console.log('beforeDestroy')
            },
            destroyed:function(){
                console.log('destroyed')
            }

        })
    </script>

</body>

</html>

　　 Vue 基础精讲

beforeUpdate & updated 生命周期

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>vue 实例生命周期函数</title>
 9     <!-- 引入库文件 -->
10     <script src="./vue.js"></script>
11 </head>
12 
13 <body>
14     
15     <div id="app"></div>
16 
17     <script>
18         // 生命周期函数就是 vue 实例在某一个时间点会自动执行的函数
19         var vm = new Vue({
20             el:"#app",
21             data:{
22                 test:"hello world",
23             },
24             // 使用模板
25             template:"<div>{{test}}</div>",
26             beforeCreate:function(){
27                 console.log('beforeCreate')
28             },
29             created:function(){
30                 console.log('created')
31             },
32             beforeMount:function(){
33                 console.log(this.$el)
34                 console.log('beforeMount')
35             },
36             mounted:function(){
37                 console.log(this.$el)
38                 console.log('mounted')
39             },
40             beforeDestroy:function(){
41                 console.log('beforeDestroy')
42             },
43             destroyed:function(){
44                 console.log('destroyed')
45             },
46             beforeUpdate:function(){
47                 console.log('beforeUpdate')
48             },
49             updated:function(){
50                 console.log('updated')
51             }
52 
53         })
54     </script>
55 
56 </body>
57 
58 </html>

beforeUpdate & updated