1. 过滤器
- 说明：
- 过滤器功能：对要显示的数据进行特定的格式化后再显示；
- 使用过滤器没有改变原来的数据，只是产生新的对应的数据
- 自定义过滤器,注意要写在new Vue({})之前；
- Vue.filter(“指定过滤器的名字”,处理函数function(value1,value2))其中处理函数中，value1是传入的要过滤的数据，即原数据；value2开始后面的参数是html调用过滤器的时候传入的参数；
- html页面使用过滤器传入变量时，采用管道" | "的方式，即：{{date | dateFilter}}；
- js语法说明：javascript中以下值会被转换为false：false，undefined，null，0，-0，NaN，""，’’
- 注意引入 moment-with-locales.min.js
- 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11_过滤器</title>
</head>
<body>
<div id="myTest">
时间: {{date}}
<br/>
格式化之后: {{date | dateFilter}}
<br/>
带有入参格式化之后1：{{date | dateFilter("YYYY-MM-DD")}}
<br/>
带有入参格式化之后2: {{date | dateFilter("HH:mm:ss")}}
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/moment-with-locales.min.js"></script>
<script type="text/javascript">
//自定义过滤器,注意要写在new Vue({})之前
//Vue.filter("指定过滤器的名字",处理函数function(value1,value2))
//其中处理函数中，value1是传入的要过滤的数据，即原数据；value2开始后面的参数是html调用过滤器的时候传入的参数
Vue.filter("dateFilter", function (value, format) {
//布尔值：javascript中以下值会被转换为false：false，undefined，null，0，-0，NaN，""，''
console.log(!undefined); //true
console.log(!null); //true
//在js中 这里的语法说明：如果format不等于undefined和null，则format=format;否则，format="YYYY-MM-DD HH:mm:ss"
format = format || "YYYY-MM-DD HH:mm:ss";
return moment(value).format(format);
});
new Vue({
el: '#myTest',
data: {
date: new Date()
}
});
</script>
</body>
</html>
- 运行结果
2. 指令
- 包括：内置指令和自定义指令
- 常用的内置指令：
(1). v-text：更新元素的textContent;
(2). v-html：更新元素的innerHtml;
(3). v-if: 如果为true，当前标签才会输出到页面；(优先级低于v-for)
(4). v-else: 如果为false，当前标签才会输出到页面；
(5). v-show: 通过display样式来控制显示或隐藏；
(6). v-for: 遍历数组/对象；
a. 获取数组下标：v-for="(item,index) in items"
b. 遍历对象：v-for="(value,key,index) in object"
(7). v-on: 绑定事件监听，一般简写为：@；
(8). v-bind: 强制绑定解析表达式，可以省略v-bind，用冒号" : "；
(9). v-model: 双向数据绑定；
(10). ref: 指定唯一标识，vue对象通过$refs属性访问这个元素对象；
(11). v-cloak: 防止闪现，配合css实现：[v-cloak]{display: none}； - 自定义指令
(1). 自定义指令又分为：全局指令和局部指令
(2). 注册全局指令：
(3). 注册局部指令：Vue.directive('my-directive',function(el,binding){ el.innerHTML=binding.value.toupperCase() })
在new Vue({})里面定义，与el、data、methods平级。directives: { //注册局部指令 "lower-text"(el, binding) { el.textContent = binding.value.toLowerCase(); } } - 代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11_指令</title>
<style type="text/css">
/*[]为属性选择器，通过v-cloak防止闪屏*/
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="myTest">
<p ref="content">ref测试</p>
<p v-html="msg"></p>
<button @click="hint()">弹出</button>
<p v-cloak>{{msg}}</p>
</div>
<div id="myTest1">
<p v-upper-text="msg1"></p>
<p v-lower-text="msg1"></p>
</div>
<div id="myTest2">
<p v-upper-text="msg1"></p>
<p v-lower-text="msg1"></p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/moment-with-locales.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#myTest",
data: {
msg: "I Love You!"
},
methods: {
hint() {
alert(this.$refs.content.textContent);
}
}
});
/*-----------------------------------------------------*/
//定义全局指令 Vue.directive(指令名，处理方法)
//处理方法：el==>指令属性所在的标签对象； binding==>包含指令相关信息数据的对象
Vue.directive("upper-text", function (el, binding) {
console.log(el, binding);
el.textContent = binding.value.toUpperCase();
});
new Vue({
el: "#myTest1",
data: {
msg1: "Dou You Love Me ? "
},
directives: {
//注册局部指令
"lower-text"(el, binding) {
el.textContent = binding.value.toLowerCase();
}
}
});
new Vue({
el: "#myTest2",
data: {
msg1: "Dou You Love Me ? "
}
})
</script>
</body>
</html>
- 运行结果
3. 插件
Vue 插件是一个包含 install 方法的对象，通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等。
- 首先定义要封装的插件的js文件（myPlugin.js）
/*vue插件库 myPlugin.js*/
(function () {
//声明插件
const MyPlugin = {};
//插件对象必须有一个install方法
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
console.log("这是vue的全局方法。。。。。。")
}
// 2. 添加全局资源,指令
Vue.directive('my-directive', function (el, binding) {
el.textContent = binding.value.toUpperCase();
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
console.log("这里是实例方法。。。。。。")
}
}
//向外暴露
window.MyPlugin = MyPlugin;
})();
- 使用封装的插件（myTest.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11_插件</title>
</head>
<body>
<div id="myTest">
<p v-my-directive="msg"></p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="./myPlugin.js"></script>
<script type="text/javascript">
//声明使用插件
Vue.use(MyPlugin); //内部调用 MyPlugin.install(Vue)
//调用全局方法
Vue.myGlobalMethod();
var vm = new Vue({
el: "#myTest",
data: {
msg: "插件指令test I Love You !",
}
});
//调用实例方法
vm.$myMethod();
</script>
</body>
</html>
- 运行结果
