一、组件

组件(Component)是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素,封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:

例注册一个全局组件:

js代码:

Vue.component(tagName, options)    ——————tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件:

html代码:

<tagName></tagName>

(一)全局组件

<body>
<div id="app">
<aa></aa>
</div> <script>
// 注册
Vue.component('aa', {
template: '<h1>糖果波自定义组件!</h1>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
</body>

(二)局部组件

<body>
<div id="app">
<aa></aa>
</div> <script>
var Child = {
template: '<h1>糖果波自定义组件!</h1>'
} // 创建根实例
new Vue({
el: '#app',
components: {
// <aa> 将只在父模板可用
'aa': Child
}
})
</script>
</body>

(三)Prop

prop 是父组件用来传递数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop"。详细使用方式如下:

<div id="app">
<child message="hello!"></child>
</div> <script>
// 注册
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 "this.message" 这样使用
template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>

(四)动态 Prop

类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件:

<div id="app">
<div>
<input v-model="parentMsg">
<br>
<child v-bind:message="parentMsg"></child>
</div>
</div> <script>
// 注册
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 "this.message" 这样使用
template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
el: '#app',
data: {
parentMsg: '父组件内容'
}
})
</script>
<div id="app">
<ol>
<todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
</ol>
</div> <script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
new Vue({
el: '#app',
data: {
sites: [
{ text: 'Runoob' },
{ text: 'Google' },
{ text: 'Taobao' }
]
}
})
</script>

注意: prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。

(五)Prop 验证

组件可以为 props 指定验证要求。

prop 是一个对象而不是字符串数组时,它包含验证要求:

Vue.component('example', {
props: {
// 基础类型检测 (`null` 意思是任何类型都可以)
propA: Number,
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数字,有默认值
propD: {
type: Number,
default: 100
},
// 数组/对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
})

type 可以是下面原生构造器:

  • String
  • Number
  • Boolean
  • Function
  • Object
  • Array

type 也可以是一个自定义构造器,使用 instanceof 检测。

Vue.js学习使用心得(四)——组件的更多相关文章

  1. Vue.js学习使用心得(一)

    一.初步了解 Vue.js是一套构建用户界面的渐进式框架,它只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,相当于JavaS ...

  2. Vue.js学习使用心得(二)——自定义指令

    自定义指令 除了核心功能默认内置的指令,Vue 也允许注册自定义指令. 自定义指令可以定义全局指令,也可以定义局部指令. 使用 directives 选项来自定义指令. 定义全局指令: <div ...

  3. Vue.js学习使用心得(三)

    一.计算属性 计算属性关键词: computed <body> <div id="app"> <p>原始字符串: {{ message }}&l ...

  4. Vue.js学习笔记 第四篇 列表渲染

    遍历数组和对象 和条件选择一样,循环也和其他语言类似,也尝试着用一个例子解决问题 <!DOCTYPE html> <html> <head> <meta ch ...

  5. 用vue.js学习es6(四):Symbol类型

    一.Symbol类型: 1.ES6引入了一种新的原始数据类型Symbol,表示独一无二的值.它是JavaScript语言的第七种数据类型,前六种是:Undefined.Null. 布尔值(Boolea ...

  6. Vue.js学习-组件注册与使用

    Vue.js学习文档 地址:https://cn.vuejs.org/v2/guide/ 关于自定义组件注册: 建议将<script></script>放在body标签之后 H ...

  7. Vue.js 学习笔记之七:使用现有组件

    5.3 使用现有组件 在之前的五个实验中,我们所演示的基本都是如何构建自定义组件的方法,但在具体开发实践中,并非项目中所有的组件都是需要程序员们自己动手来创建的.毕竟在程序设计领域,"不要重 ...

  8. Web前端-Vue.js必备框架(四)

    Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...

  9. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

随机推荐

  1. StringUtils工具类常用方法汇总(判空、转换、移除、替换、反转)

    Apache commons lang3包下的StringUtils工具类中封装了一些字符串操作的方法,非常实用,使用起来也非常方便.最近自己也经常在项目中使用到了里面的一些方法,在这里将常用的方法总 ...

  2. 二: drf视图

    Django REST framwork 提供的视图的主要作用: 控制序列化器的执行(检验.保存.转换数据) 控制数据库查询的执行 一:请求与响应 1:request Request 1 REST f ...

  3. Linux下postgres9.4 版本的单机版安装小笔记

    1.添加RPMyum install https://download.postgresql.org/pub/repos/yum/9.4/redhat/rhel-7-x86_64/pgdg-redha ...

  4. TeXstudio+TexLive交叉引用

    LaTeX 交叉引用系统简介 https://www.cnblogs.com/wenbosheng/p/9537774.html 一般来说需要两次运行排版命令才能生成引用编号.背后的原理是这样的,第一 ...

  5. 漏洞复现——Apache SSI远程命令执行

    漏洞原理:当目标服务器开启了SSI与CGI支持,我们就可以上传shtml文件,利用<!--#exec cmd="id" -->语法执行命令. SSI:SSI(服务器端包 ...

  6. C++将十进制数转化为二进制

    #include<iostream> using namespace std; void main() { ; ]; cin>>n; i=n; while(i) { a[j]= ...

  7. pandas实现excel中的数据透视表和Vlookup函数功能

    在孩子王实习中做的一个小工作,方便整理数据. 目前这几行代码是实现了一个数据透视表和匹配的功能,但是将做好的结果写入了不同的excel中, 如何实现将结果连续保存到同一个Excel的同一个工作表中?还 ...

  8. jquery 获取表单的内容以JSON对象形式返回

    添加一个serializeJson方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  9. R语言scale与unscale函数

    一.scale函数 R语言base库中自带数据标准化接口scale函数,函数介绍如下 Usage scale(x, center = TRUE, scale = TRUE) Arguments x: ...

  10. 诡异的bug!!

    在我些项目的时候,命名从来没有用过 font 元素,但是打开 Chrome 浏览器查看元素时,总是 font 元素???而且写的 <span class= "xxx"> ...