Vue基础---->VueJS的使用(二)
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。今天我们就来学习一下。回忆永远是惆怅。愉快的使人觉得：可惜已经完了，不愉快的想起来还是伤心。
vue中的重要特性
一、vue中的自定义组件
html的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue1</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="app">
<my-component my-name="huhx"></my-component>
</div>
<script type="text/javascript" src="js/vue3.js"></script>
</body>
</html>
vue3.js的代码：
// 定义
var MyComponent = Vue.extend({
template: '<div>A custom component!{{myName}}</div>',
props: ['myName']
}) // 注册
Vue.component('my-component', MyComponent); // 创建根实例
var ap = new Vue({
el: '#app',
})
运行效果如下：
二、vue中的自定义指令
html的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue4</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="app">
<div v-my-directive="someValue">{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue4.js"></script>
</body>
</html>
vue4.js:
Vue.directive('my-directive', {
bind: function() {
// 准备工作
console.log("bind function.");
},
update: function(newValue, oldValue) {
// 值更新时的工作
console.log("new: " + newValue + ", old: " + oldValue);
},
unbind: function() {
// 清理工作
console.log("unbind function.");
}
});
var demo = new Vue({
el: '#app',
data: {
msg: 'hello!'
}
})
运行的效果:
console打印的日志：
bind function.
new: undefined, old: undefined
三、vue中的自定义过滤器
html的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue5</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="app">
<span v-text="message | reverse"></span>
</div>
<script type="text/javascript" src="js/vue5.js"></script>
</body>
</html>
js的代码如下：
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
});
var demo = new Vue({
el: '#app',
data: {
message: 'hello!'
}
});
运行的效果如下：
四、修改上述的过滤器，使它可以处理value为空时，返回一个默认期待的数值。
- js的代码：
Vue.filter('reverseFilter', function(string, defaultValue) {
if (!string) {
return defaultValue;
}
return string.split('').reverse().join('');
});
html的代码：页面显示为hello world
<div>
{{testFilter | reverseFilter('hello world')}}
</div> data() {
return {
testFilter: null,
}
}
关于vue中过滤器的详细讲解，可以参考博客：https://zhuanlan.zhihu.com/p/27445461
友情链接
Vue基础---->VueJS的使用(二)的更多相关文章
- Vue基础---->VueJS的使用(一)
Vue.js是一个构建数据驱动的web界面的库.它的目标是通过尽可能简单的API 实现响应的数据绑定和组合的视图组件,今天我们就开始vue.js的学习. vue的安装及使用 一.vue的下载地址:ht ...
- Vue基础知识总结（二）
一.解决网速慢的时候用户看到花括号标记 (1)v-cloak,防止闪烁,通常用于比较大的选择器上. 给元素添加属性v-cloak,然后style里面:[v-cloak]{display:none;} ...
- Vue基础二之全局API、实例属性和全局配置，以及组件进阶（mixins）的详细教程（案列实现，详细图解，附源码）
本篇文章主要是写Vue.directive().Vue.use()等常用全局API的使用,vm.$props.vm.$options.vm.$slots等实例属性的使用,以及Vue全局配置.组件的mi ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- Vue基础系列（二）——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- 两万字Vue.js基础学习笔记（二）
Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue基础及脚手架环境搭建
From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...
- Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
随机推荐
- [转]PROE传动链条的装配教程
转自: 原文连接:PROE动链条的装配教程 传动链条的装配
- Android自定义相机拍照、图片裁剪的实现
最近项目里面又要加一个拍照搜题的功能,也就是用户对着不会做的题目拍一张照片,将照片的文字使用ocr识别出来,再调用题库搜索接口搜索出来展示给用户,类似于小猿搜题.学霸君等app. 其实Android提 ...
- Docker实践(4)—network namespace与veth pair
network namespace 创建network namespace # ip netns add blue # ip netns list blue 添加网口到namespace 先创建v ...
- Mac OS 中设置VPN（pptp连接方式）
第一步:点击系统设置(如图) 第二步:点击网络,进入网络设置(如图) 第三步:点击+号-创建新服务,创建新的VPN网络连接(如图) 第四步:接口-中选-VPN, VPN类型-中选-PPTP,服务名称- ...
- WebServices CXF开发常见异常及解决方法
2011-7-14 10:10:59 org.apache.cxf.service.factory.ReflectionServiceFactoryBean buildServiceFromClass ...
- sqlite 的比较等运算是根据不同的值而不同的,并不是根据的字段类型,因为 sqlite 是弱类型字段
sqlite 的比较等运算是根据不同的值而不同的,并不是根据的字段类型,因为 sqlite 是弱类型字段 --------------------------------------------- ...
- whoami 和 Who am i
① 两个命令在一般的情况下,似乎效果是一样的 ② 但是当你执行完su 命令切换用户后,就不一样了,who am i 显示最早login的账户,而whoami 显示切换后的账户 例如: -bash-3. ...
- Crystal Reports 支持的纸张种类
DefaultPaperSize Paper10x14 254 x 355.6 mm Paper11x17 279.4 x 431.8 mm PaperA3 A3 ?,297 x 420 mm Pap ...
- CYQ学习教程
http://www.cyqdata.com/cyqdata/article-detail-413
- android 性能分析、优化
.主要介绍了一些分析工具,比如GT.ITest等http://www.jianshu.com/p/8b77d394b2a6 .详细介绍啦android平台常见性能优化工具http://blog.csd ...