Vue 2.0入门基础知识之全局API
3.全局API
3-1. Vue.directive 自定义指令
Vue.directive用于自定义全局的指令
实例如下：
<body>
<div id="app">
<p v-sq="color">{{message}}</p>
</div>
</body>
<script>
Vue.directive('sq', function (el, binding, vnode) {
el.style.color = binding.value;
});
var vm = new Vue({
el: "#app",
data: {
message: "前端工程师",
color: "red"
}
});
</script>
效果为p标签显示为红色，directive指令中的参数1（实例中的‘sq’）可以类比前篇文章内部指令的bind、on；参数2是一个回调函数，这个回调函数包含三个参数（el:即指令绑定的元素，实例中的el即为p元素；binding:包含指令的相关信息，可以通过console.log打印出来；vnode:即Vue编译生成的虚拟节点。虚拟节点即vue2.0中引入的新功能，用js对象替代DOM节点，改进直接操作DOM代价大引发的性能问题）。
指令都是有生命周期的，同样地，自定义指令有5个生命周期，分别是：bind、inserted、update、componentUpdated、unbind
3-2 Vue.extend 构造器的延伸
extend中文即延伸、扩展的意思。Vue.extend返回的即是一个“扩展实例构造器，并挂载到自定义元素上。
实例如下：
<body>
<div id="app">
<p class="gz"></p>
</div>
<p class="gz"></p>
</body>
<script>
var author=Vue.extend({
template:"<a>最终解释权归作者所有</a>"
})
new author().$mount('.gz');
</script>
p标签会替换成template的值，但仅限于第一个p标签，因为只挂载了一次，实例中用的是class，将其换成id或标签同样适用。
3-3 Vue.set全局操作
Vue.set的作用就是在构造器外部操作构造器内部的数据、属性或者方法。Vue.set存在的意义是弥补js语言的缺陷，因为Vue不能自动检测数组的两种变动：1.利用索引设置一个元素；2.修改数组的长度。用Vue.set更新数据时，依次传入三个参数①数组名称②索引③元素
3-4 Vue的生命周期
Vue的生命周期即钩子函数。包括10共，按照顺序依次为：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDastroy、destroyed。详细的结构图可参考vue官网的图例介绍。
3-5 Template模板
Template模板大致有三种写法：
1.类似前面讲到Vue.extend挂载时的template写法，但不是双引号包括内容，而是``（英文tab键）
2.利用template模板：<template></template>。这个类似于Backbone中模板的写法
3.在script标签中写入模板内容，不过此时type为"x-tempate".。这种写法可以将模板从外部导入。
另外需要强调一点、vue2.0中规定模板内容必须要要有一个根元素，一般地用div包裹住整个模板内容。
3-6 component组件
component组件本质上就是自定义的标签。component组件分为全局化注册组件和局部注册组件，两者的不同之处在于使用的范围（类比于全局变量和局部变量）。
3-6-1 component组件的注册
1.全局化注册组件
实例如下：
<body>
<div id="app">
<plp></plp>
</div>
</body>
<script>
Vue.component('plp', {
template: `<a>最终解释权归作者所有</a>`
})
var vm = new Vue({
el: "#app"
})
</script>
2.局部注册组件
实例如下：
<body>
<div id="app">
<plp></plp>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
components: {
'plp': {
template: `<p>最终解释权归作者所有</p>`
}
}
})
</script>
3-6-2 component组件的props属性
component组件的props属性就是用来设置和获取标签上的属性值。
实例如下：
<body>
<div id="app">
<plp city="YiChang"></plp>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
components: {
'plp': {
props:['city'],
template: `<p>I like {{city}}</p>`
}
}
})
</script>
首先component组件的props选项通过['city']获取自定义标签该属性的值，然后在tepmlate中通过{{city}}插值的方法设置属性值。需要注意的一点是自定义标签的属性取值尽量避免使用'-',如有必要使用小驼峰命名，可以联想到通过原生JS设置元素的颜色;elements.style.backgroundColor,而不是element.style.background-color
component组件传值，使用:bind绑定即可。
3-6-3 component父子组件
component父子组件就是在一个component组件里再写一个component组件。
实例如下：
<body>
<div id="app">
<plp :city="like"></plp>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
like: 'YiChang'
},
components: {
'plp': {
props: ['city'],
template: `<p>I like {{city}} <ppl></ppl></p>`,
components: {
'ppl': {
template: `<span style="color:red">very much!</span>`
}
}
}
}
})
</script>
实例中涉及到component组件嵌套，在plp组件中嵌套组件ppl。当然实际开发中组件的嵌套远比这个复杂，必要的时候可以在构造器外部定义声明局部component组件。
3-6-4 component标签
<component></component>标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。
好啦，关于Vue的全局API就介绍到这里，下一篇关于Vue的基础知识，我们聊聊Vue2.0的选项以及实例内置组件~
Vue 2.0入门基础知识之全局API的更多相关文章
- Vue 2.0入门基础知识之内部指令
1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一 ...
- Greenplum入门——基础知识、安装、常用函数
Greenplum入门——基础知识.安装.常用函数 2017年10月08日 22:03:09 在咖啡里溺水的鱼 阅读数:8709 版权声明:本文为博主原创,允许非商业性质转载但请注明原作者和出处 ...
- USB入门基础知识（转）
源:USB入门基础知识 相关名词: 主机(Host) 设备(Device) 接口(Interface) 管道(Pipe) 管道是主机与设备端点数据传输的连接通道,代表了主机的数据缓冲区与设备端点之间交 ...
- React Native 入门基础知识总结
中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...
- Linux入门基础知识
注:内容系兄弟连Linux教程(百度传课:史上最牛的Linux视频教程)的学习笔记. Linux入门基础知识 1. Unix和Linux发展历史 二者就像父子关系,当然Unix是老爹.1965年,MI ...
- 1)Linux程序设计入门--基础知识
)Linux程序设计入门--基础知识 Linux下C语言编程基础知识 前言: 这篇文章介绍在LINUX下进行C语言编程所需要的基础知识.在这篇文章当中,我们将 会学到以下内容: 源程序编译 Makef ...
- Vue基础二之全局API、实例属性和全局配置，以及组件进阶（mixins）的详细教程（案列实现，详细图解，附源码）
本篇文章主要是写Vue.directive().Vue.use()等常用全局API的使用,vm.$props.vm.$options.vm.$slots等实例属性的使用,以及Vue全局配置.组件的mi ...
- PHP基础入门（二）---入门基础知识必备
前言 在上一章中,我们初步了解了PHP的网页基础和PHP的入门基础,今天继续给大家分享更多有关PHP的知识. 理论知识看起来可能比较枯燥一些,但是我们的实践(敲代码)毕竟离不开它. 只有理论与实践相结 ...
- React入门---基础知识-大纲-1
-----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...
随机推荐
- linux下自动创建设备文件节点---class
在驱动模块初始化函数中实现设备节点的自动创建 我们在刚开始写Linux设备驱动程序的时候,很多时候都是利用mknod命令手动创建设备节点,实际上Linux内核为我们提供了一组函数,可以用来在模块加载的 ...
- 织梦DEDE多选项筛选_联动筛选功能的实现_二次开发
织梦默认的列表页没有筛选功能,但有时候我们做产品列表页的时候,产品的字段比较多,很多人都需要用到筛选功能,这样可以让用户更方便的找到自己所需要的东西,实现这个联动筛选功能需要对织梦进行二次开发,下面就 ...
- NavigationView更改菜单icon和title颜色变化效果
NavigationView menu默认icon和title会随着菜单状态改变而改变,选择某个菜单后再次打开侧边菜单后会发现该菜单的icon和title会变成应用的主颜色,其他菜单项仍然为黑色. 如 ...
- html5--6-52 动画效果-过渡
html5--6-52 动画效果-过渡 实例 @charset="UTF-8"; div{ width: 300px; height: 150px; margin: 30px; f ...
- [原创]java获取word里面的文本
需求场景 开发的web办公系统如果需要处理大量的Word文档(比如有成千上万个文档),用户一定提出查找包含某些关键字的文档的需求,这就要求能够读取 word 中的文字内容,而忽略其中的文字样式.表格. ...
- java 后台的学习步骤
一.JavaWeb部分 第一阶段:JavaWeb前端技术 web前端技术 HTML, CSS, JavaScript基础, jQuery基础, BootStrap. 第二阶段:服务器端技术 Mysql ...
- 【POJ 2407】 Relatives
[题目链接] 点击打开链接 [算法] 欧拉函数 [代码] #include <algorithm> #include <bitset> #include <cctype& ...
- 【Cocos2dx】新建场景、场景的切换、设置启动场景与菜单的新建
这是Cocos2dx最简单的部分.主要是体现对场景的操作,其实这东西就是Flash的舞台,安卓的Activity,WIN32窗体程序的Framework窗体,网页的body,反正就是对那个容纳各种东西 ...
- 【210】通过OleDb读写Excel数据到DataTable
参考:C#通过OLEDB读写Excel2013显示到datagrid控件,修改数据集并更新excel2013 解决:未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序.( ...
- k8s认证及ServiceAccount-十五
一.ServiceAccount (1)简介 https://www.kubernetes.org.cn/service-account Service account是为了方便Pod里面的进程调用K ...