Vue-学习笔记1-Vue常用方法

前言

本文内容主要是记录Vue中常用的方法,主要包括数据处理方法、DOM、以及生命周期钩子。详细内容请大家参考官方文档,Vue的官方文档描述还是相当详细的。

选项/数据

包含vue的数据处理,主要包括:

  • data
  • props
  • propsData
  • computed
  • methods
  • watch

data

示例:Login.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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<template>
<div class="container login" id="app">
<div class="col-xs-12 col-md-5 col-md-offset-4 login-form-div">
<div class="col-xs-12 text-center">
<h1>{{systemName}}</h1>
</div>
<div class="col-xs-12 login-title">
<div class="col-xs-10 col-xs-offset-1 title-tab">
<ul id="myTab" class="nav nav-tabs no-padding text-center">
<li class="active col-xs-6 no-padding">
<a href="#form_login" data-toggle="tab">
登&nbsp;录
</a>
</li>
<li class="col-xs-6 no-padding"><a href="#form_register" data-toggle="tab">注&nbsp;册</a></li>
</ul>
</div>
</div>
<div class="col-xs-12 login-content tab-content">
<form action="sys/login" method="post"
class="form-horizontal login-form tab-pane fade in active"
id="form_login" role="form">
<!--<div class="form-horizontal login-form tab-pane fade in active">-->
<!--sign in-->
<div class="col-xs-10 col-xs-offset-1">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control text-info" maxlength="30" name="userName"
id="userName">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" class="form-control text-info" maxlength="30"
name="password" id="password">
</div>
</div>
<div class="form-group">
<div class="input-group checkbox col-xs-12">
<span class="pull-right"><a>忘记密码?</a></span>
</div>
</div>
<div class="form-group">
<button id="submit_login" type="button" class="btn btn-block">登&nbsp;&nbsp;录</button>
</div>
</div>
<!--</div>-->
</form>
<!--/sign in-->
<!--sign up-->
<div class="form-horizontal login-form tab-pane fade"
id="form_register"
role="form">
<div class="col-xs-10 col-xs-offset-1 input-form-group">
<input type="text" class="form-control text-info list-row-space" maxlength="30" name="userName">
<input type="password" class="form-control text-info list-row-space" maxlength="30" name="pass">
<input type="password" class="form-control text-info list-row-space" maxlength="30"
name="passRep">
<button id="submit_register" type="button" class="btn btn-block list-row-space">注&nbsp;&nbsp;册
</button>
</div>
</div>
<!--/sign up-->
</div>
</div>
</div>
</template>

<script>
export default {
name: 'Login',
data: function () {
return {systemName: 'lx-platform后台管理系统'}
}
}
</script>

<style scoped>

</style>

官网给的文档是:该组件是vue实例的数据对象,只接受function,vue会递归将data的属性转换为getter/setter,返回的数据对象必须是纯粹的对象(含有零个或多个的key/value对),data只能是数据,不推荐观察拥有状态行为的对象。

本人理解,简单的使用如上,html中使用双花括号获取属性值。

props

props 可以是数组或对象,用于接收来自父组件的数据,通过属性给模板赋值。
可以使用以下对象:

  • type:可以是下列原生构造函数中的一种:String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。
  • default: any 为该 prop 指定一个默认值。
  • required: Boolean 定义该 prop 是否是必填项。
  • validator: Function 自定义验证函数会将该 prop 的值作为唯一的参数代入。
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
<template>
<div id="app2">
<mycomponent message="这个就是信息" :mydata="{username: '用户名', age: 26}" name-style="color:red"></mycomponent>
</div>
</template>

<script>
import Vue from 'vue'
var mycomponent = Vue.extend({
props: {
message: '',
mydata: {},
// 这里的驼峰key,对应上面的短中杠key
nameStyle: {}
},
template: '<div><div style="color: white">{{ message }}</div><span v-bind:style="nameStyle">{{ mydata.username}}</span></div>'
})
Vue.component('mycomponent', mycomponent)

var vue2 = new Vue({
el: '#app2'
})
</script>

<style scoped>
body {
background-color: white;
}
</style>

template标签中的内容,以及message、nameStyle、mydata.username值就是通过props传递过来的值。
在组件中使用props传值的时候默认传的是字符串,如果要传递对象的话,需要使用v-bind来传值;props中就是定义一些默认的值,不能直接修改props,只能间接的通过data来修改。

propsData

作用:创建实例时传递props,只用于new创建的实例中。示例如下,可以看到显示效果已经变了:

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
<template>
<div id="app2">
<mycomponent message="这个就是信息" :mydata="{username: '用户名', age: 26}" name-style="color:red"></mycomponent>
</div>
</template>

<script>
import Vue from 'vue'
var mycomponent = Vue.extend({
props: {
message: '',
mydata: {},
// 这里的驼峰key,对应上面的短中杠key
nameStyle: {}
},
template: '<div><div style="color: white">{{ message }}</div><span v-bind:style="nameStyle">{{ mydata.username}}</span></div>'
})
new mycomponent({propsData: {message: '修改后的信息', mydata: {username: '用户名123'}, nameStyle: 'color: yellow'}}).$mount("#app2")
Vue.component('mycomponent', mycomponent)
</script>

<style scoped>
body {
background-color: white;
}
</style>

computed

作用:computed的作用就是数据的计算,如定义add、minus、或者字符串拼接之类的计算等,可以直接使用双花括号将值渲染到模板中,示例方法如下:

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
<template>
<div id="app2">
<div style="color: white">
<span>{{ message }}</span>
<span>{{ reverse }}</span>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
message: 'weyoung'
}
},
computed: {
reverse: function () {
return this.message.split('').reverse().join('')
}
}
}
</script>

<style scoped>
body {
background-color: white;
}
</style>

页面上显示的内容如下:weyoung gnuoyew

methods

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

示例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
<div id="app2">
<div style="color: white">
<button class="btn btn-default" @click="sayHello" v-text="myName"></button>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
myName: '点我点我点我'
}
},
methods: {
sayHello: function () {
console.log('hello')
console.log(this)
}
}
}
</script>

console打印结果如下:

methods方法打印-2019921232412

watch

一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。

watch字面上理解就是监测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
<template>
<div id="app2">
<div><label>用户名:</label><input type="text" v-model="mydata.name" />
<label>新用户名:</label><input type="text" v-model="newName" /></div>
</div>
</template>
<script>
export default{
data: function () {
return {
mydata: {
name: 'weyoung',
age: 26
},
newName: '寒江夜雨'
}
},
watch: {
mydata: {
handler: function (val, oldVal) {
console.log('---mydata watch---', val.name)
},
deep: true// 对象内部的属性监听,也叫深度监听;可以看到,注释掉deep:true这一行的时候,监测不到值变化。
},
newName: function (val, oldVal) {
console.log('---newName watch---', this.newName)
}
}
}
</script>

运行结果如下:
vue-watch的运行结果-201992295138

选项/DOM

包含Vue的DOM操作,主要包括:

  • el
  • template
  • render
  • renderError

el

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。在实例挂载之后,元素可以用 vm.$el 访问。

运行时+编译器 vs 只包含运行时

1
2
3
4
5
6
7
8
9
10
11
// 需要编译器
new Vue({
template: '<div>{{ hi }}</div>'
})

// 不需要编译器
new Vue({
render (h) {
return h('div', this.hi)
}
})

template

Vue中的template的三种写法:

第一种写法,直接写在构造器里:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue中template的用法</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
template: '<h2>vue中template的第一种用法</h2>'
})
</script>
</html>

第二种写法,直接写在html中的template标签里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue中template的用法</title>
</head>
<body>
<div id="app">
<template id="mytemp">
<h2>vue中template的第二种用法</h2>
</template>
</div>
<!-- built files will be auto injected -->
</body>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
template: '#mytemp'
})
</script>
</html>

第三种写法,写在script标签里面,官方推荐写法,script标签的type加上“template”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue中template的用法</title>
</head>
<body>
<div id="app">
</div>
<!-- built files will be auto injected -->
</body>
<script src="vue.js"></script>
<script type="x-template" id="mytemp">
<h2>vue中template的第三种用法</h2>
</script>
<script>
var app = new Vue({
el: '#app',
template: '#mytemp'
})
</script>
</html>

render

该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。如果组件是一个函数组件,渲染函数还会接收一个额外的 context 参数,为没有实例的函数组件提供上下文信息。

renderError

coder立夏 wechat
扫描上方二维码,关注weyoung公众号,一起互动交流~~