Vue.js基础语法（三）
vue学习的一系列，全部来自于表哥---表严肃，是我遇到过的讲课最通透，英文发音最好听的老师，想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206
1过滤器filter
例如商城中商品的价格，既是动态的，而且重复出现的频率非常高，这就意味着，一些信息是重复的，像前面可以加一个“￥”，后面接一个单位“元”：￥10元。想实现只传价格10，其他信息让其自动生成，vue里提供了过滤器filter来实现。
例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过滤器</title>
</head>
<body>
<div id="app">
<div>
<input v-model="price">
{{price | currency}}
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
Vue.filter('currency', function(val, unit) {
val = val || 0;
unit = unit || '元';
return val + unit;
}); var app = new Vue({
el: '#app',
data: {
price: 10
}
})
</script>
</html>
说明：
通过管道符|，将前面的数据price传到后面的过滤器currency中，
Vue.filter()，第一个参数是过滤器的名字，第二个参数是一个function，function也有两个参数（可以自定义的），第一个是传进来的值，第二个是过滤器的值，可以写在括号中传过来，就像调用函数时带着参数一样。
例2：单位换算
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>过滤器2</title>
</head>
<body>
<div id="app">
<div>
请输入毫米数：<input type="text" v-model="length">
<br>换算成米：{{length|meter}}
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
Vue.filter('meter', function(val, unit) {
val = val || 0;
unit = unit || '米';
return (val / 1000).toFixed(2) + unit; //保留两位小数
}); var app = new Vue({
el: '#app',
data: {
length: 100
}
})
</script>
</html>
总结：filter就是解决一些格式的问题，可以提升用户体验的。如果filter内部非常复杂，建议写成计算属性computed，因为computed带有缓存，可重用性强。而filter都是做一些简单的事情。
2自定义指令
2.1基础配置
如果vue自带的指令无法满足需求，就要自定义一个指令，用法就像自定义属性一样，只要在元素上加上这个属性，就具有相应的功能，
组件和指令的区别，组件就像一个人物角色，指令就是人物所拥有的技能，一个人物可以有多种技能，不同的人物也可以有相同的技能。
用v-来自定义一个属性，
用directive来定义一个指令，第一个参数是指令名，这里就不用以v-开头了，第二个参数是回调函数，函数中第一个参数el是元素，就是指令所在的元素会自动传进来，这个元素可以用原生api来调用，也可以用jquery来调用$(el)，第二个参数binding是指令传进来的值和其他基本信息，值在binding.value中
实例：钉住指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自定义指令</title>
<style>
.card {
border: 1px solid #ccc;padding: 10px;margin: 10px;width: 20%;background: #eee;
}
</style>
</head> <body style="height: 2000px;">
<div id="zyx">
<div v-pin='card1.pinned' class="card">
这是一张卡片
<p><button @click="card1.pinned=!card1.pinned">钉住/取消</button></p>
</div>
<div v-pin='card2.pinned' class="card">
这是一张卡片
<p><span @click="card2.pinned=!card2.pinned">钉住/取消</span></p>
</div>
</div> <script src="lib/vue.js"></script>
<script>
Vue.directive('pin',function(el,binding){
console.log(binding);
//var $el=$(el);
if(binding.value){
el.style.position='fixed';
el.style.top='10px';
el.style.left='10px';
}else{
el.style.position='static';
}
}); var zyx = new Vue({
el: '#zyx',
data: {
card1:{
pinned:false
},
card2:{
pinned:false
}
}
});
</script>
</body>
</html>
2.2配置传参及修饰符
上面的钉住指令，想进一步实现，可以钉在不同的方向位置，可以通过加修饰符，是指令后面加.，然后通过binding.modifiers来获取，
传参是指令后面加:,然后通过binding.arg来获取，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自定义指令2</title>
<style>
.card {
border: 1px solid #ccc;padding: 10px;margin: 10px;width: 20%;background: #eee;
}
</style>
</head> <body style="height: 2000px;">
<div id="zyx">
<div v-pin:true.bottom.left='card1.pinned' class="card">
这是一张卡片
<p><button @click="card1.pinned=!card1.pinned">钉住/取消</button></p>
</div>
<div v-pin.top.right='card2.pinned' class="card">
这是一张卡片
<p><span @click="card2.pinned=!card2.pinned">钉住/取消</span></p>
</div>
</div> <script src="lib/vue.js"></script>
<script>
Vue.directive('pin',function(el,binding){
var pined=binding.value; //值
var posi=binding.modifiers; //修饰符
var waring=binding.arg; //参数 if(pined){
el.style.position='fixed';
for(var key in posi){
if(posi[key]){
el.style[key]='10px';
}
}
if(waring==='true'){
el.style.background='pink';
}
}else{
el.style.position='static';
}
}); var zyx = new Vue({
el: '#zyx',
data: {
card1:{
pinned:false
},
card2:{
pinned:false
}
}
});
</script>
</body>
</html>
其他参数：（来自vue官网）
3混合mixins
Mixins就像一个重复功能和数据的储存器。
例：页面中有两个组件，一个是点击显示，点击关闭按钮隐藏；一个是鼠标移入显示，移出隐藏，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>混合mixins</title>
<style>
*{padding: 0;margin: 0;}
body{padding: 10px 0 0 10px;}
.show-box{border: 1px solid #ccc;background: blanchedalmond;padding: 20px;margin-top: 10px;}
.tips-word{margin-top: 20px;}
.close-btn{display: inline-block;width: 20px;height: 20px;border: 1px solid #333;text-align: center;line-height: 20px;margin-left: 10px;cursor: pointer;}
</style>
</head>
<body>
<div id="app">
<popup></popup>
<tooltip></tooltip>
</div>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component('popup',{
template:`
<div>
<button @click="toggle">点击</button>
<div v-if="visible" class="show-box">
<span title="关闭" class="close-btn" @click="hide">×</span>
显示的内容
</div>
</div>
`,
data:function(){
return{
visible:false
}
},
methods:{
toggle:function(){
this.visible=!this.visible;
},
hide:function(){
this.visible=false;
}
}
}); Vue.component('tooltip',{
template:`
<div>
<p @mouseenter="show" @mouseleave="hide" class="tips-word">鼠标移入</p>
<div v-if="visible" class="show-box">提示信息</div>
</div>
`,
data:function(){
return{
visible:false
}
},
methods:{
show:function(){
this.visible=true;
},
hide:function(){
this.visible=false;
},
}
}); var app=new Vue({
el:'#app'
})
</script>
</html>
这里面重复的地方非常多，显得代码很啰嗦，实现的功能很简单，却要写这么多重复的东西。
Vue里面提供Mixins机制，可以把一些功能定义到Mixins中。定义一个base，然后把两个组件都要用的放进去，然后把原来那些替换成mixins，他的值是一个数组，值就是定义的base。Vue会自动合并这个对象和组件，组件就自动携带了mixins的功能，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>混合mixins</title>
<style>
*{padding: 0;margin: 0;}
body{padding: 10px 0 0 10px;}
.show-box{border: 1px solid #ccc;background: blanchedalmond;padding: 20px;margin-top: 10px;}
.tips-word{margin-top: 20px;}
.close-btn{display: inline-block;width: 20px;height: 20px;border: 1px solid #333;text-align: center;line-height: 20px;margin-left: 10px;cursor: pointer;}
</style>
</head>
<body>
<div id="app">
<popup></popup>
<tooltip></tooltip>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var base={
data:function(){
return{
visible:false
}
},
methods:{
show:function(){
this.visible=true;
},
hide:function(){
this.visible=false;
},
toggle:function(){
this.visible=!this.visible;
}
}
} Vue.component('popup',{
template:`
<div>
<button @click="toggle">点击</button>
<div v-if="visible" class="show-box">
<span title="关闭" class="close-btn" @click="hide">×</span>
显示的内容
</div>
</div>
`,
mixins:[base]
}); Vue.component('tooltip',{
template:`
<div>
<p @mouseenter="show" @mouseleave="hide" class="tips-word">鼠标移入</p>
<div v-if="visible" class="show-box">提示信息</div>
</div>
`,
mixins:[base]
}); var app=new Vue({
el:'#app'
})
</script>
</html>
这样代码就简洁多了，页面不管有多少个组件，只要他需要用到base的功能，直接加个mixins就可以了。
如果想让某个组件中的visible默认等于true呢？在组件中再定义一个data，里面指定visible为true就可以了，这样会把base里面的相应的内容覆盖掉，类似“就近原则”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>混合mixins</title>
<style>
*{padding: 0;margin: 0;}
body{padding: 10px 0 0 10px;}
.show-box{border: 1px solid #ccc;background: blanchedalmond;padding: 20px;margin-top: 10px;}
.tips-word{margin-top: 20px;}
.close-btn{display: inline-block;width: 20px;height: 20px;border: 1px solid #333;text-align: center;line-height: 20px;margin-left: 10px;cursor: pointer;}
</style>
</head>
<body>
<div id="app">
<popup></popup>
<tooltip></tooltip>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var base={
data:function(){
return{
visible:false
}
},
methods:{
show:function(){
this.visible=true;
},
hide:function(){
this.visible=false;
},
toggle:function(){
this.visible=!this.visible;
}
}
} Vue.component('popup',{
template:`
<div>
<button @click="toggle">点击</button>
<div v-if="visible" class="show-box">
<span title="关闭" class="close-btn" @click="hide">×</span>
显示的内容
</div>
</div>
`,
mixins:[base],
data:function(){
return{
visible:true
}
},
}); Vue.component('tooltip',{
template:`
<div>
<p @mouseenter="show" @mouseleave="hide" class="tips-word">鼠标移入</p>
<div v-if="visible" class="show-box">提示信息</div>
</div>
`,
mixins:[base]
}); var app=new Vue({
el:'#app'
})
</script>
</html>
4插槽slots
例：页面上有两个同样的组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插槽slots</title>
<style>
.panel{border: 1px solid #ccc;margin-top: 20px;width: 300px;}
.panel > *{padding: 10px;}
.panel .content{border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;}
</style>
</head>
<body>
<div id="app">
<panel></panel>
<panel></panel>
</div>
<template id="panel_tpl">
<div class="panel">
<div class="title">
标题
</div>
<div class="content">
内容
</div>
<div class="footer">更多...</div>
</div>
</template>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component('panel',{
template:'#panel_tpl'
}) var app=new Vue({
el:'#app',
data:{ }
})
</script>
</html>
想实现里面的内容动态，就可以把内容换成<slot></slot>，然后在<panel></panel>中写内容，这样就可以分别设置内容了。可以为slot指定一个name，就能定义多个slot了，然后在组件标签中，加上属性slot=”name”，就可以了。写在<slot></slot>中的为默认值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插槽slots</title>
<style>
.panel{border: 1px solid #ccc;margin-top: 20px;width: 300px;}
.panel > *{padding: 10px;}
.panel .content{border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;}
</style>
</head>
<body>
<div id="app">
<panel>
<div slot="title">标题1</div>
<div slot="content">内容1</div>
</panel>
<panel>
<div slot="title">标题2</div>
<div slot="content">内容2</div>
<div slot="footer">更多2</div>
</panel>
</div>
<template id="panel_tpl">
<div class="panel">
<div class="title">
<slot name="title"></slot>
</div>
<div class="content">
<slot name="content"></slot>
</div>
<div class="footer">
<slot name="footer">更多1</slot>
</div>
</div>
</template>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component('panel',{
template:'#panel_tpl'
}) var app=new Vue({
el:'#app',
data:{ }
})
</script>
</html>
Slot特别常用，灵活、简洁、强大，可以用这种方式实现组件的嵌套。
Vue.js基础语法（三）的更多相关文章
- Vue.js基础语法（一）
vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 前言: 前端解析数 ...
- Vue.js基础语法（二）组件
vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 把一段经常要用的东 ...
- Vue.js 数据绑定语法详解
Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...
- JavaScript进阶 - 第2章 你要懂的规则(JS基础语法)
第2章 你要懂的规则(JS基础语法) 2-1什么是变量 什么是变量? 从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品 ...
- Python 基础语法(三)
Python 基础语法(三) --------------------------------------------接 Python 基础语法(二)------------------------- ...
- Vue.js 模板语法
本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...
- 【JS基础语法】---学习roadmap---6 parts
JS基础语法---roadmap Part 1 - 2: Part 3 - 4: Part 5 - 6
- vue.js初学（三）模板语法
1:介绍 vue.js允许开发者声明式地将Dom元素绑定至Vue实例的底层,所有的模板都是合法的html,所以能够被遵循规范的浏览器和html解析器解析 在底层的实现上,vue将模板编译成虚拟Dom渲 ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
随机推荐
- loj #2254. 「SNOI2017」一个简单的询问
#2254. 「SNOI2017」一个简单的询问 题目描述 给你一个长度为 NNN 的序列 aia_iai,1≤i≤N1\leq i\leq N1≤i≤N,和 qqq 组询问,每组询问读入 l1 ...
- 识别子串 (string)——后缀自动机+线段树
题目 [题目描述] 一般地,对于一个字符串 S,和 S 中第 $ i $ 个字符 x,定义子串 $ T=S(i.j) $ 为一个关于 x 的识别子申,当且仅当: 1.$ i \leq x \leq j ...
- 前端性能优化-gzip
为什么要开启GZIP 我们需要下载一个100KB的Javascript文件,正常的下载量就是100KB,如果我们把文件在服务端压缩一下,压缩成30kb,下载到客户端再进行解压,这样就减少了大量的HTT ...
- 用SQL玩转数据挖掘之MADlib（一）——安装
一.MADlib简介 MADlib是Pivotal公司与伯克利大学合作的一个开源机器学习库,提供了精确的数据并行实现.统计和机器学习方法对结构化和非结构化数据进行分析,主要目的是扩展数据库的分析能力, ...
- [USACO10OCT]湖计数Lake Counting 联通块
题目描述 Due to recent rains, water has pooled in various places in Farmer John's field, which is repres ...
- mybatis和返回
1.查询int 数组 dao类: public List<Integer> queryRoleIdList(Integer userId); service类: List<Integ ...
- 无限期使用WebStorm方式
http://blog.csdn.net/DorAction/article/details/79332421 1.下载补丁:JetbrainsCrack-2.7-release-str.jar ht ...
- PAT - 1067 试密码 （20 分）
当你试图登录某个系统却忘了密码时,系统一般只会允许你尝试有限多次,当超出允许次数时,账号就会被锁死.本题就请你实现这个小功能. 输入格式: 输入在第一行给出一个密码(长度不超过 20 的.不包含空格. ...
- CF D Bicolorings
题意 给一个2行n列的矩阵填上黑色和白色,求连通块个数为k个的填色方案数量(mod 998244353) 因为只有两行,为n-1列的矩阵增加1列的情况数只有很少,容易想到用 (i,k) 表示 i ...
- Go语言基础之15--文件基本操作
一.文件读写 1.1 os.File os.File封装所有文件相关操作, 是一个自定义的struct. a. 打开一个文件进行读操作: os.Open(name string) (*File, er ...