Vue

Vue基础

Posted by Zxd on March 18, 2018

好久没有看Vue了,准备重新记录学习一下

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
<div id="app">{{content}}</div>
<script>
	// var dom = document.getElementById('app');
	// dom.innerHTML = 'hello world'
// setTimeout(function(){
	// dom.innerHTML = 'bye world'
// <!-- },2000) -->

// MVVM
// data ==> 数据就是M层
// app 模板标签就是 V层
// VM层 监听M和V层 不用关心VM层

// 我们只需要关注M层 数据
var app = new Vue({
	el: '#app',  // 定义实例负责管理的区域
	data: {      // 定义一些数据
		content:'hello world'
	}
})

setTimeout(function(){
	app.$data.content = 'bye world'  // 书写vue不需要操作dom了, 只关注数据
},2000)

// vue 虚拟dom Object.defineprop
</script>
  • MVP模式
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
<div id="app">
    <input type="text" id="input">
    <button id="btn">提交</button>
    <ul id="list">

    </ul>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>

    // MVP 模式
    // v 视图 p 控制器 presenter放业务逻辑
    function Page() {

    }
    $.extend(Page.prototype, {
        init: function () {
            this.bindEvents()
        },
        bindEvents: function () {
            var btn = $('#btn');
            btn.on('click', $.proxy(this.handleBtnClick, this)) //改变this的指向
        },
        handleBtnClick: function () {
            var inputElem = $('#input')   // 先选择,在写.val() 提高性能
            var inputValue = inputElem.val()  
            var ulElem = $('#list');
            ulElem.append('<li>' + inputValue + '</li>')
            inputElem.val('')
        }
    })
    var page = new Page();
    page.init()
</script>
  • todo-list
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<div id="app">
	<input type="text" v-model="inputValue">
	<button @click='handleBtnClick'>提交</button>
	<ul>
		<!-- <li v-for="item in list">{{item}}</li> -->
		<todo-item :content='item'
					:index='index'
					v-for="(item,index) in list"
					@delete='handleItemDelete'> 
					<!-- 创建子组件的同时父组件监听子组件删除这个事件 -->
		</todo-item>
		
	</ul>
</div>
<script>
	// v-bind:content = 'item' 父组件通过v-bind给子组件传值 v-bind可以简写成`:`
	// Vue全局组件
	// Vue.component('TodoItem',{
	// 	props:['content'],  // 从父组件传来的值
	// 	template:"<li>{{content}}</li>"
	// })

	// v-on:click ==>@click

	let TodoItem = {
		props:['content','index'], // 子组件通过props接收外部(父组件)传递过来的数据
		template:"<li @click='handleItemClick'>{{content}}</li>" , // 组件模板
		methods:{
			handleItemClick:function(){
				// 子组件通过this.$emit事件触发
				this.$emit('delete',this.index)
			}
		}
	}

	let app = new Vue({
		el: '#app',
		components:{
			TodoItem  // 注册局部组件
		},
		data: {
			list: [],
			inputValue: ''
		},
		methods: {
			// handleBtnClick: () => {
			// 	console.log(this.inputValue) // undefined
			// }
			// 不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。
			//理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，
			//this.a 将是 undefined
			handleBtnClick:function(){
				this.list.push(this.inputValue)
				this.inputValue = ''
			},
			// data里面的inputValue
			handleItemDelete:function(index){
				this.list.splice(index,1)
			},
		}
	})
</script>
  • Vue实例,$data
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
<div id="root">
    <div @click="handleClick">
        {{message}}
    </div>
    <item></item>
</div>
<script>
    Vue.component('item',{
        template:'<div>hello world2222</div>'
    })

    // vm.$data  vm.$el  vm.$destory() 以$符号开头的都是Vue的实例属性或方法
    let vm = new Vue({
        el: '#root',
        data: {
            message: 'hello world'
        },
        methods: {
            handleClick: function () {
                alert('hello')
            }
        },

    })
</script>
  • Vue实例的生命周期
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
<div id="app"></div>

<script>
    // 生命周期函数就是vue实例在某个时间点会自动执行的函数
    let vm = new Vue({
        el: '#app',
        template: "<div>{{test}}</div>",
        data: {
            test: 'hello worldaaaaa'  // vm.test == vm.$data.test
        },
        // 8 个生命周期钩子 单独放在vue的实例里面 不是methods里面
        beforeCreate: function () {
            console.log('beforeCreate')
        },
        created: function () {
            console.log('created')
        },
        // 数据挂载 模板和数据相结合,即将挂载在页面上之前 mount
        beforeMount() {
            // 页面还没有被渲染 create vm.$el and replace 'el' with it
            console.log('beforeMount')
            console.log(this.$el)
            // 这时候数据还没有渲染到页面上
        },
        mounted() {
            // 页面已经渲染完毕
            console.log('mounted')
            console.log(this.$el)
        },
        // destroy  when vm.$destroy() is called 当--被执行了
        beforeDestroy() {
            console.log('beforeDestroy')
        },
        destroyed() {
            console.log('destroyed')
        },
        // when data changes 数据发生改变,还没重新渲染之前
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        // 重新渲染之后
        updated() {
            console.log('updated')
        },

        //另外三个 activated deactivated  errorCaptured
    })
</script>