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基础语法快速的过一遍,先混个脸熟留个印象就 ...
随机推荐
- 努力学习 HTML5 （3）—— 改造传统的 HTML 页面
要了解和熟悉 HTML5 中的新的语义元素,最好的方式就是拿一经典的 HTML 文档作例子,然后把 HTML5 的一些新鲜营养充实进入.如下就是我们要改造的页面,该页面很简单,只包含一篇文章. Apo ...
- Xcode中iPhone iPad模拟器调整大小的方法
Xcode中调试iPad程序默认的iPad模拟器非常小,如何方法iPad模拟器的显示尺寸呢? 选中iOS模拟器,在“Window -> 缩放比例”中就可以调整了. 快捷键: Command + ...
- Swift入门篇-结构体
前面主要是介绍swift语言中基本类型的用法,今天给大家介绍的是swift的结构体的用法,swift中结构体的用法和其他语言的用法,还有不太一样,不过您多敲几遍,就可以理解结构体,结构体在ios开发中 ...
- Win7下VS2010使用“ASP.Net 3.5 Claims-aware Template”创建ClaimsAwareWebSite报"HRESULT: 0x80041FEB"错误的解决办法
问题描述: 使用VS2010的WIF开发模板创建“Claims-aware ASP.NET Site”.“Claims-aware WCF Service”,下载安装后,创建网站时,报错"H ...
- C# 汉字转拼音 使用微软的Visual Studio International Pack 类库提取汉字拼音首字母
代码参考该文http://www.cnblogs.com/yazdao/archive/2011/06/04/2072488.html VS2015版本 1.使用Nuget 安装 "Simp ...
- Android 多线程-----AsyncTask详解
您可以通过点击 右下角 的按钮 来对文章内容作出评价, 也可以通过左下方的 关注按钮 来关注我的博客的最新动态. 如果文章内容对您有帮助, 不要忘记点击右下角的 推荐按钮 来支持一下哦 如果您对文章内 ...
- android手机两种方式获取IP地址
1.使用WIFI 首先设置用户权限 <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"& ...
- Swift中的Void类型与空元祖表达式
可能有不少Swift开发者会忽略这么一个细节:在Swift中,Void类型其实是一个别名类型,而其真正的类型为(),即一个空元祖(empty tuple)! 这种语言特性给Swift带来了一些比较方便 ...
- 小兔的棋盘（hdu2067）
小兔的棋盘 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...
- C#判断一个string是否为数字
案一:Try...Catch(执行效率不高) private bool IsNumberic(string oText) { try { int var1=Convert.ToInt32 (oText ...