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基础语法快速的过一遍,先混个脸熟留个印象就 ...
随机推荐
- eclipse 引用自己开发的模块
这样就可以 生成的是LIB 工程需要设置“Is Library”
- [C#] zdbviewcs: 跨平台数据库查看器。支持SqlServer、Oracle、MySql等数据库
作者:zyl910 一.说明 本工具有适合以下情况使用—— * 快速查看数据库中数据及表结构信息.* 测试ADO.Net下连接字符串的写法.* 帮忙分析ADO.Net数据库操作. 二.用法 运行本程序 ...
- JAVA生产者消费者的实现
春节回了趟老家,又体验了一次流水席,由于桌席多,导致上菜慢,于是在等待间,总结了一下出菜流程的几个特点: 1.有多个灶台,多个灶台都在同时做菜出来. 2.做出来的菜,会有专人用一个托盘端出来,每次端出 ...
- python排序算法的实现-插入
1.算法: 设有一组关键字{ K 1 , K 2 ,…, K n }:排序开始就认为 K 1 是一个有序序列:让 K 2 插入上述表长为 1 的有序序列,使之成为一个表长为 2 的有序序列:然后让 K ...
- go2shell的安装与修改默认terminal方法
go2shell的安装与修改默认terminal方法 1. 安装go2shell后,打开finder的application文件夹,找到go2shell 2. 按住command,用鼠标将go2s ...
- 加快Bitmap的访问速度
引言 在对Bitmap图片操作的时候,有时需要用到获取或设置像素颜色方法:GetPixel 和 SetPixel, 如果直接对这两个方法进行操作的话速度很慢,这里我们可以通过把数据提取出来操作,然后操 ...
- 如何准备IREB考试
最近准备International Requirement Engeering Board 考试,但凡上点年纪对记忆就不行了,时间也不够,就想着怎么偷懒. 因此,就把测试题做了一遍,然后分析各个章节的 ...
- ASP.NET MVC 分部视图
@model PartViewDemo.Models.HomeInfo@using PartViewDemo.Models;@{ ViewBag.Title = "Index";} ...
- 深入剖析 redis 事件驱动
概述 redis 内部有一个小型的事件驱动,它和 libevent 网络库的事件驱动一样,都是依托 I/O 多路复用技术支撑起来的. 利用 I/O 多路复用技术,监听感兴趣的文件 I/O 事件,例如读 ...
- 4kbps～15kbps语音编码器基础框架ACELP