学习内容
⊙ 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.number
可以看到,一开始是number的类型,但是我们手动输入以后,还是变成了string类型,这是input表单的特性,相当于↓
var age = 0;
age = '0123'
所以我们使用number修饰符
v-model.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将他们联系起来
测试一下:
两种写法的总结:
明天继续!