Vue笔记(4)

学习内容

⊙ v-model双向绑定

⊙ v-model结合radio

⊙ v-model结合Checkbox

⊙ 修饰符(lazy/number/trim)

⊙组件化(重要)

⊙ 父组件和子组件

⊙ 语法糖注册组件

⊙ 组件模板的分离写法

v-model

表单控件在实际开发中是非常常见的,特别是对于用户信息的提交,需要大量的表单

Vue中使用v-model指令来实现表单元素和数据的双向绑定

演示:

同时也可以双向绑定:

input里的value值也改变了message里的值

原理

v-model结合radio

不过因为使用了v-model,name属性就可以省略了

v-model结合checkbox

这个在用户同意协议比较常见

还能这么做:

值绑定

通过仔细阅读后发现,就是动态的给value赋值而已

我们前面value中的值可能是从网络获取或定义在data中的, 所以我们可以通过:value动态的给value绑定值,这就是值绑定

修饰符

v-model.lazy

• 默认情况下,v-model默认是在input事件中同步输入框的数据的
• 也就是说,一旦有数据发生改变,对应的data中的数据就会自动发生变化
• lazy修饰符可以让数据在失去焦点或者回车时才更新

v-model.number

• 默认情况下,在输入框中我们无论输入的是字母还是数字,都会被当做是字符串类型进行处理
• 但是如果我们希望处理的是数字类型,那么最好直接将内容当做数字处理
• number修饰符可以让输入框的内容自动转成数组类型

可以看到,一开始是number的类型,但是我们手动输入以后,还是变成了string类型,这是input表单的特性,相当于↓

var age = 0;
age = '0123'

所以我们使用number修饰符

v-model.trim

• 如果输入的内容收尾有很多空格,通常我们希望将其去除
• trim修饰符可以过滤左右两边的空格

name默认为aaaa

现在在开头加上空格:

组件化

组件化的思想

• 如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展
• 但如果我们将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就会变得非常容易了

• 它提供一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用
• 任何的应用都会被抽象成一棵组件树

注册组件基本步骤

• 创建组件构造器
• 注册组件
• 使用组件

创建组件构造器

注册组件

使用组件

注意一下,标签名千万不能使用驼峰命名法,可以写成my-cpn但是不能myCpn

全局组件和局部组件

像刚刚那种方式创建出来的组件就是全局组件,可以在很多个vue实例(如app)中使用

比如说创建两个vue实例;

创建好并且注册好组件后:

在两个vue实例中使用:

是可以生效的

那怎么注册局部组件呢?很简单,只要在单独的实例里面注册组件就可以啦

比如我们只在实例app1里面注册:

此时的网页:

在app2中的已经不生效了

父组件和子组件

那有什么用呢?

由于刚刚只在组件2里面注册了组件1,但是组件2还没有注册,现在先注册一下:

现在我们测试一下:

看一下它的结构:

所以在这两个组件中,cpn2是父组件,cpn1是子组件

注意cpn1组件只能在cpn2中使用,作用域在cpn2中,在<div #id="app"></div>里面使用是无效的,只能重新在app实例中或者全局中再注册一次

语法糖注册组件

语法糖注册局部组件:

测试一下:

组件模板的分离写法

第一种方式用的比较少,是使用script标签的,但是用的比较少这里就不介绍了

第二种是使用<template>标签 ,用id将他们联系起来

测试一下:

两种写法的总结:

明天继续!