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基础语法快速的过一遍,先混个脸熟留个印象就 ...
随机推荐
- 用Wireshark提取WPA握手包
进入正文前,先来看一张截图,如图1,使用“aircrack-ng wpa.cap -w password.lst”命令后,程序会提示输入待破解网络的序号,此时只要提供一个序号即可.注意:1:命令中不需 ...
- Kerberos ticket lifetime及其它
前言 之前的博文中涉及到了Kerberos的内容,这里对Kerberos ticket lifetime相关的内容做一个补充. ticket lifetime Kerberos ticket具有lif ...
- IE6-IE11兼容性问题列表及解决办法总结
相比IE6-IE9那版,主要添加IE10和IE11的新变化. 以下是目录及下载链接: 目录 概述 2 第一章:HTML 3 第一节:IE7-IE8更新 3 1. 如果缺少结束标记的 P 元素后跟 TA ...
- IE8以下版本iframe出现滚动条和内容空白问题
在网页中使用iframe引用了第三方的页面 $("#tianqi").html('<iframesrc="http://i.tianqi.com/index.php ...
- SqlServer数据库备份与还原
http://v.youku.com/v_show/id_XMjA4NzcyNzUy.html http://v.youku.com/v_show/id_XMjA4Nzc0NDQw.html
- Scala 深入浅出实战经典 第64讲：Scala中隐式对象代码实战详解
王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-87讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...
- Android Studio如何引用外部Library工程
参考: http://stackoverflow.com/questions/16588064/how-do-i-add-a-library-project-to-the-android-stu ...
- 原创教程：SpagoBI4.2汉化及配置Mysql数据库教程
SpagoBI4.2汉化及配置Mysql数据库教程 商务智能套件SpagoBI提供一个基于J2EE的框架用于管理BI对象如报表.OLAP分析.仪表盘.记分卡以及数据挖掘模型等的开源BI产品.它提供的B ...
- 命令行上的narrowing（随着输入逐步减少备选项）工具
前面在介绍zsh的时候,说过它的补全用来起比bash的Tab补全方便多了,在有多个备选项是你只要用光标键来挑选就是了,而不是全列出来提示你再多输入几个字符.而Emacs的anything / helm ...
- ajax 异步请求webservice(XML格式)
function callAjaxWebservice(){ alert("call ajax"); try { $.ajax({ type: "POST", ...