v-model表单绑定与组件入门

人是傻掉的,图床删了我一堆封面图

有空再补(

表单绑定v-model

v-model里面写一个属性,这个属性在vue里面和表单是双向绑定的,改变表单的属性值,vue中存储的属性值也会变,反之亦然。

v-model相当于两个指令的结合,可以简单理解成先用v-bind绑定属性,这样动了属性的话表单的内容会动。要做到表单的内容动了也让属性动,要用v-on监听输入事件,每次输入都把输入的值传给属性,这样就实现了双向绑定。(可以把v-model理解成一个语法糖

1
2
3
<input type="text" v-model="message">
<!-- 上面这段代码等同于下面这段代码 -->
<input type="text" :value="message" @input="message = $event.target.value">

当存在单选框时,使用v-model=属性名,可以将单选框和某个属性绑定。使用v-model绑定同一个属性名可以代替name的互斥效果。

复选框的v-model表示true或者false,true为选了这一项,false为没选这一项。单个选项用一个属性值就行,多个的话就得用数组。数组内部就不是true或者false了,是选中项的value

和checkbox一样,select也分单选和多选两种情况,单选只能绑定一个值,当选中option中的一个时,会将它对应的value赋值到mySelect中,多选的话可以选中多个值,绑定的是一个数组,当选中多个值时,就会将选中的option对应的value添加到数组中。要注意,v-model是写在select里面的,不是写在option里面的。要让select选择多个需要在select标签内加入multiple属性。

值绑定:给动态的value赋值。input标签里面的value有时不能写死,需要从服务器传回一些数据再显示,可以通过v-bind:value动态的给value绑定值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<label v-for="student in class7" :for="student">
<input type="checkbox" :value="student" :id="student" v-model="choose"/>{{student}}
</label>
<h3>选择参与人员:{{choose.toString()}}</h3>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
class7: [
'黎恩', '亚莉莎', '艾玛', '艾利欧特','尤西斯',
'盖乌斯', '劳拉', '菲', '马奇亚斯', '库洛',
'米莉亚姆',
],
choose: [],
},
}
});
</script>

v-model的三个修饰符:

lazy修饰符:默认情况下,v-model是默认在input事件中同步输入框的数据的,也就是说,一旦有数据发生改变对应的data中的数据就会自动发生改变,lazy修饰符可以让数据在失去焦点或者用户点击回车时才进行更新。(懒加载)v-model.lazy="xxx"

number修饰符:当默认情况下,在输入框中无论输入的是字母还是数字,都会被当作字符串类型进行处理。但是如果希望被处理的是数字类型,那最好直接把内容当成数字处理。number修饰符可以让输入框中的内容自动转化为数字类型。v-model.number="xxx"

trim修饰符:如果输入的内容首尾有很多空格,通常我们希望将其去除,trim修饰符可以过滤内容左右两边的空格。v-model.trim="xxx"

组件化开发

什么是组件化?如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来会变得很复杂,而且不利于后续的管理以及扩展。但如果我们将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了。组件化是Vue.js中的重要思想,它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何的应用都会被抽象成一棵组件树。

组件的使用分成三个步骤:创建组件构造器,注册组件,使用组件。创建组件构造器使用的是Vue.extend()方法,注册组件使用的是Vue.component()方法,在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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue测试</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<cpn>里面的内容会被忽略掉!</cpn>
</div>
<script type="text/javascript">
// 使用``构建换行字符串(ES6)
const cpnC = Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容</p>
</div>`
});
Vue.component('cpn', cpnC);
const app = new Vue({
el: '#app',
data: {

},
});
</script>
</body>
</html>

调用Vue.extend()创建的是一个组件构造器,通常在创建组件构造器时,传入template代表我们自定义组件的模板。该模板就是在使用到组件的地方,要显示的HTML代码。

调用Vue.component()是将刚才的组件构造器注册为一个组件,并且给它起一个组件的标签名称。所以需要传递两个参数:1. 注册组件的标签名,2. 组件构造器。

组件必须挂载在某个Vue实例下,否则它不会生效。上面代码注册的组件叫做全局组件,意味着可以在多个Vue的实例下面使用。有时候一个项目里面可能会有多个Vue实例,全局组件可以适用于全部实例。

局部组件是在Vue实例里面注册的,只能在这个实例里面使用。注意是注册而不是创建,创建还是在外面,在外面注册就是全局组件,在里面注册就是局部组件。局部组件写法:

1
2
3
4
5
6
7
const app = new Vue({
el: '#app',
data: {},
components: {
cpn: cpnC,
},
});

组件之间存在父子关系。组件可以嵌套注册,嵌套注册后不会影响组件的层次关系,仍然可以在root中注册。(越级使用必须越级注册)

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue测试</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<cpn2></cpn2>
<cpn1></cpn1>
</div>
<script type="text/javascript">
const cpnC1 = Vue.extend({
template:`
<div>
<h2>我是标题1</h2>
<p>我是内容1</p>
</div>`,
});
const cpnC2 = Vue.extend({
template:`
<div>
<h2>我是标题2</h2>
<p>我是内容2</p>
<cpn1></cpn1>
</div>`,
components: {
cpn1: cpnC1,
}
});
const app = new Vue({
el: '#app',
data: {},
components: {
cpn1: cpnC1,
cpn2: cpnC2,
},
});
</script>
</body>
</html>

语法糖:extend一步可以省略,并入到components里面,简化代码。

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
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {},
components: {
cpn2: {
template:`
<div>
<h2>我是标题2</h2>
<p>我是内容2</p>
<cpn1></cpn1>
</div>`,
components: {
cpn1: {
template:`
<div>
<h2>我是标题1</h2>
<p>我是内容1</p>
</div>`,
},
}
},
},
});
</script>

有父子嵌套关系的话还能用语法糖吗?可能8行。

如果组件代码很多很长会看起来很乱,有一种模板抽离的写法。第一种写法使用script标签,定一个id用来传给component注册,写法是:

1
2
3
<script type="text/x-template" id='cpn'>
html代码
</script>

或者写成

1
2
3
<template id='cpn'>
html代码
</template>
打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  • © 2018-2020 Shawn Zhou
  • Powered by Hexo Theme Ayer
  • PV: UV:

感谢打赏~

支付宝
微信