前端小白如何快速上手Vue框架(下篇)

vue.js组件

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:
前端小白如何快速上手Vue框架(下篇)_第1张图片

注册一个全局组件语法格式如下:

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

全局组件:所有定义的vue实例都可以使用全局组件.

template是模板组件,用来定义自定义模板.
前端小白如何快速上手Vue框架(下篇)_第2张图片

局部组件:可以在实例选项中注册局部组件,这样组件只能在这个实例中使用

在实例中声明了只有one实例可以调用局部组件,所以只会输出one实例中定义的内容.
前端小白如何快速上手Vue框架(下篇)_第3张图片

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

父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 “prop”:
前端小白如何快速上手Vue框架(下篇)_第4张图片

动态 Prop:

首先使用了v-model对输入框进行了双向数据绑定,使得vue可以响应页面数据变化.
再用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件.
注意: prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。
前端小白如何快速上手Vue框架(下篇)_第5张图片

Prop可以传递类型是多种多样的,比如:数字,布尔值,数组,对象,对象属性

1.传递数字:
2.传递布尔值: 没有值默认为true
3.设置布尔值:
4.传递数组:
5.传递一个对象:

如果生产需求中需要子组件把数据传递回父组件,就得使用自定义事件:

使用 $on(eventName) 监听事件,使用 $emit(eventName) 触发事件. 

子组件使用了emit来进行通知父组件,这样就形成父子组件间的相互呼应传递信息,其实在开发的过程中父子组件通讯也都是使用这样的方法,父组件传递信息给子组件的时候会通过props参数,通常不会直接在子组件中修改父组件传递下来的信息,而且通过这样的一个钩子去通知父组件对某些参数进行改变.前端小白如何快速上手Vue框架(下篇)_第6张图片

vue指令

vue常用的内置指令

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.js自定义指令

自定义指令存在的意义就是让开发人员根据实际情况自己定义指令.Vue 也允许注册自定义指令。

全局指令

我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时元素获得焦点.
Vue.directive表示自定义指令.对内置指令做一些补充和扩展.
定义方法:vue.directive(id,definition)两个参数:指令ID和定义对象,定义对象提供了一些钩子函数。
前端小白如何快速上手Vue框架(下篇)_第7张图片

局部指令

在实例使用 directives 选项来注册局部指令,这样指令只能在这个实例中使用
前端小白如何快速上手Vue框架(下篇)_第8张图片

钩子函数:指令定义对象的函数.

从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参数相关内容进行了输出.
前端小白如何快速上手Vue框架(下篇)_第9张图片

不需要其他的钩子函数时可以简写函数:

前端小白如何快速上手Vue框架(下篇)_第10张图片

Vue.js 路由:允许我们通过不同的URL访问不同的内容.

安装引入vue路由:

1、直接下载 / CDN,在
                    
                    

你可能感兴趣的:(前端小白如何快速上手Vue框架(下篇))