学习Vue的第三天（使用VS code写Vue）_vscode中new vue实例

学习Vue的第三天（使用VS code写Vue）

【注】Vue精讲

1.Vue实例

1）调用Vue实例

（1）创建Vue的实例：var vm = new Vue

（2）调用Vue实例

<div id="root">
    <!-- 获取实例Vue里的内容 -->
    {{message}}    
</div>
<script>
    var vm = new Vue({
    	el: '#root',    //接管dom的显示
    	data: {         //存放数据
    	message: 'hello Vue'
    	}
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12

运行效果：

2）绑定事件

（1）先验证事件是否绑定成功：点击div标签的内容，即”hello Vue“，如果弹出”hello“的弹窗，则表示事件绑定成功。（养成绑定事件后先验证的习惯）

<div id="root">
	<!-- 当div被点击之后，则会执行methods里面对应的handleClick方法 -->
	<div v-on:click="handleClick">   //v-on:click也可以简写成@click
		{{message}} 
	</div>   
</div>
<script>
	var vm = new Vue({
		el: '#root',    //接管dom的显示
		data: {         //存放数据
		message: 'hello Vue'
		},
		methods: {
			handleClick: function() {
			alert("hello")
			}
		}
	})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

运行效果：

（2）组件注册（每个组件也是Vue的实例）

<div id="root">
	<div @click="handleClick">
		<!-- 获取实例Vue里的内容 -->
		{{message}} 
	</div>   
	<!-- 通过标签的形式使用组件 -->
	<item></item>
</div>
<script>
    // 组件注册
    Vue.component('item', {
    template: '<div>hello</div>'    //编写一个简单标签
    })
    var vm = new Vue({
            el: '#root',    //接管dom的显示
            data: {         //存放数据
                message: 'hello Vue'
            },
            methods: {
                handleClick: function() {
                    alert("hello")
                }
            }
        })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

运行效果：

2.Vue实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程，如设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

	<!-- 先写一个挂载点 -->
    <div id="app"></div>

    <script>
        // 创建Vue实例与上面的挂载点进行关联
        var vm = new Vue({
            el: '#app',
            template: '<div>{{test}}</div>',
            // 定义数据测试beforeUpdate和updated
            data: {
                test: "hello world"
            },
            // 第一个生命周期函数
            beforeCreate: function() {
                console.log("beforeCreate");
            },
            // 第二个生命周期函数(用来在一个实例被创建之后执行)
            created: function() {
                console.log("created");
            },
            // 第三个生命周期函数
            beforeMount: function() {
                console.log(this.$el);  //$el值dom标签的内容
                console.log("beforeMount");
            },
            // 第四个生命周期函数
            mounted: function() {
                console.log(this.$el);
                console.log("mounted");
            },
            // 第五个生命周期函数(需要销毁组件才会执行)
            beforeDestroy: function() {
                console.log("beforeDestroy");
            },
            // 第六个生命周期函数(组件已经销毁才会执行)
            destroyed: function() {
                console.log("destroyed");
            },
            // 第七个生命周期函数(数据发生改变还没重新渲染前执行)
            beforeUpdate: function() {
                console.log("beforeUpdate");
            },
            // 第八个生命周期函数
            updated: function() {
                console.log("updated");
            },
        })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

运行效果：

敲黑板：

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

②若没有template的模板，则会把el中接管的dom当成模板进行渲染。

<div id="app">hello</div> 等价于 <div id="app"></div>...template: '<div>hello</div>'  
1

③目前先牢记生命周期图示，随着不断的学习，后面价值会更高。

---

【注】以上学习内容来自Vue.js官网和慕课网