vue 拦截器 组件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="js/vue.js" type="text/javascript"></script>
<div id="app">
<input type="text" v-model="msg"/><br/>
{
{msg | upper}} <br/>
{
{msg | upper | lower}} <br/>
{
{msg | test}} <br/>
<!-- 带参的过滤器的使用 -->
{
{data | formate("yyyy-MM-dd hh:mm:ss")}}
</div>
<script type="text/javascript">
// 自定义过滤器
// <!-- 首字母改为大写 -->
// 过滤器的名字 value 过滤的数据
Vue.filter(upper,(value) => {
// charAt返回指定位置的字符 toUpperCase() 转化为大写 slice(1)从第二位截取
return value.charAt(0).toUpperCase()+value.slice(1);
})
// 首字母改为小写
// 过滤器的名字 value 过滤的数据
Vue.filter(lower,(value) => {
// charAt返回指定位置的字符 toLowerCase() 转化为小写 slice(1)从第二位截取
return value.charAt(0).toLowerCase()+value.slice(1);
})
//带参数的过滤器 value就是data arg1就是过滤器的参数
Vue.filter(formate,function(value,arg1){
if(arg1==yyyy-MM-dd hh:mm:ss){
var times = "";
times+=value.getFullYear()+"-"+(value.getMonth() + 1)+"-"+value.getDate()+" "+value.getHours()+":"+value.getMinutes()+":"+value.getSeconds();
return times;
}
return value;
})
new Vue({
el:"#app",
data:{
msg:"",
data:new Date()
},
// 局部过滤器
filters:{
test:function(vaval){
return vaval.charAt(0).toUpperCase()+vaval.slice(1);
}
}
})
</script>
</body>
</html>
组件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件化思想</title>
</head>
<body>
<script src="js/vue.js" type="text/javascript"></script>
<div id="app">
<button-con></button-con>
<button-con></button-con>
<button-con></button-con>
</div>
<script type="text/javascript">
// 全局组件注册 注册了一个名为button-con的新组件
Vue.component(button-con,{
// data必须是一个函数
data:function(){
return{
count:0
}
},
// 组件模板内容必须是单个跟元素 组件模板内容可以是模板字符串
template:<button v-on:click="count++">点击了{
{count}}次</button>
})
new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>