组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:
Vue.component(tagName, options)
tagName 为组件名,options 为配置选项。
注册后,我们可以使用以下方式来调用组件:
在实例中声明了只有one实例可以调用局部组件,所以只会输出one实例中定义的内容.
父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 “prop”:
首先使用了v-model对输入框进行了双向数据绑定,使得vue可以响应页面数据变化.
再用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件.
注意: prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。
1.传递数字:
2.传递布尔值: 没有值默认为true
3.设置布尔值:
4.传递数组:
5.传递一个对象:
使用 $on(eventName) 监听事件,使用 $emit(eventName) 触发事件.
子组件使用了emit来进行通知父组件,这样就形成父子组件间的相互呼应传递信息,其实在开发的过程中父子组件通讯也都是使用这样的方法,父组件传递信息给子组件的时候会通过props参数,通常不会直接在子组件中修改父组件传递下来的信息,而且通过这样的一个钩子去通知父组件对某些参数进行改变.
v-if:根据其后表达式的 bool 值进行判断是否渲染该元素.
v-show:其后表达式的 bool 值为 false 时,对渲染的出标签添加display:none;的样式
v-else:紧跟着v-if或者v-show一起使用
v-for:v-for的用法 person in people ,前者是后者的元素,类似于数组的用法
v-bind:(:):用于响应地更新 html 特性
v-on:(@):用于监听指定元素的 DOM 事件
自定义指令存在的意义就是让开发人员根据实际情况自己定义指令.Vue 也允许注册自定义指令。
我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时元素获得焦点.
Vue.directive表示自定义指令.对内置指令做一些补充和扩展.
定义方法:vue.directive(id,definition)两个参数:指令ID和定义对象,定义对象提供了一些钩子函数。
在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用
从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!
钩子函数就是生命周期事件的别名而已;
bind: 只调用一次,指令第一次绑定到元素时调用
inserted: 被绑定元素插入父节点时调用。
update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次,指令与元素解绑时调用。
el: 指令所绑定的元素,可以用来直接操作 DOM 。
binding: 一个对象,包含以下属性:
name: 指令名,不包括 v- 前缀。
value: 指令的绑定值.
oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。
expression: 绑定值的表达式或变量名。
arg: 传给指令的参数。
modifiers: 一个包含修饰符的对象。
vnode: Vue编译生成的虚拟节点。
oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。
如下实例就是调用了钩子函数bind,对el,binding,vnode参数相关内容进行了输出.
1、直接下载 / CDN,在