vue指令详解

一、vue简绍

　　1. Vue.js是什么
　　 Vue.js也称为Vue，读音/vju:/，类似view，错误读音v-u-e。版本分为v1.0 和 v2.0　　

　　2、Vue.js的特点

　　　　1、是一个构建用户界面的框架

　　　　2、是一个轻量级MVVM（Model-View-ViewModel）框架，和angular、react类似，其实就是所谓的数据双向绑定

　　　　3、数据驱动+组件化的前端开发（核心思想）

　　　　4、通过简单的API实现**响应式的数据绑定**和**组合的视图组件**

　　　　5、更容易上手、小巧

　　3、为什么要学Vue.js

　　　　1、简单、易学、更轻量

　　　　2、指令以v-xxx开头，好记

　　　　3、 + HTML代码+JSON数据，再创建一个vue实例

二、vue语法格式介绍

	js:

		new Vue({

			el:'#itany', //指定关联的选择器

			data:{ //存储数据

				msg:'Hello World',

				name:'tom'

			},

			methods:{//存储方法

				showme:function(temp){
　　　　　　　　　　　　　　　　　　　　alter(temp)

				}}

		});

	html:

		<div id="itany">

		   {{msg}}    //两对大括号{{}}称为模板，用来进行数据的绑定显示在页面中

		</div>

三、安装vue-devtools插件，便于在chrome中调试vue

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Hello World</title>

    <script src="js/vue.js"></script>

    <script>

        window.onload=function(){

            //配置是否允许vue-devtools检查代码，方便调试，生产环境中需要设置为false，该插件可以在google商城上安装

            Vue.config.devtools=true;  #是否在开发环境检测vue,默认为true，如果为flase那么在开发环境下不能使用vue-devtools检查代码

            Vue.config.productionTip=false; //阻止vue启动时生成生产消息

            var vm=new Vue({

                el:'#itany', //指定关联的元素

                data:{ //存储数据

                    msg:'Hello World'

                }

            });

        }

    </script>

</head>

<body>

    <div id="itany">

        {{msg}} <!-- 两对大括号{{}}称为模板，用来进行数据的绑定显示在页面中 -->

    </div>

    <h3>

        {{msg}}

    </h3>

</body>

</html>

四、Vue常用指令

　　1、v-model：双向数据绑定，一般用于表单元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>常用指令：v-model</title>

    <script src="js/vue.js"></script>

    <script>

        window.onload=function(){

            new Vue({

                // el:'.itany',//可以通过class类来指定关联的选择器

                //el:'body',//可以指定元素名称指定关联的选择器，vue2.0中不允许将vue实例挂载到<html>或<body>元素，在vue1.0中是可以的

                el:'div',

                data:{

                    name:'', //即使没有值，也不能省略，不然就会报错，因为html元素会找不到该值

                    age:21,

                    flag:true,

                    nums:[12,4,23,5],

                    user:{id:9527,name:'唐伯虎'}

                }

            });

        }

    </script>

</head>

<body>

    <!-- <div id="itany"> -->

    <!-- <div class="itany"> -->

    <div>

        用户名：<input type="text" v-model="name">

        <br>

        {{name}} <br>

        {{age}} <br>

        {{flag}} <br>

        {{nums}} <br>

        {{user}}

    </div>

</body>

</html>

　　2、 v-for：对数组或对象进行循环操作（：在vue1.0中提供了隐式变量，如$index、$key，在vue2.0中去除了隐式变量，已被废除）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>常用指令：v-for</title>

    <script src="js/vue.js"></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#itany',

                data:{

                    arr:[12,4,5,34,2,11],

                    user:{id:9527,name:'唐伯虎',age:25},

                    arr2:[12,4,5,34,2,11,12],

                    users:[

                        {id:9527,name:'唐伯虎',age:25},

                        {id:1001,name:'秋香',age:22},

                        {id:1002,name:'石榴姐',age:24}

                    ]

                }

            });

        }

    </script>

</head>

<body>

    <div id="itany">

        <!-- {{arr}} -->

        <ul>

            <!-- 普通循环 -->

            <!-- <li v-for="value in arr">{{value}}</li> -->

            <!-- <li v-for="value in user">{{value}}</li> -->

            <!-- 键值循环 -->

            <!-- <li v-for="(v,k) in arr">{{k}}={{v}}</li> -->  //循环体如果是个数组，v代表的是数值，k代表的是索引值

            <!-- <li v-for="(v,k) in user">{{k}}={{v}}</li> --> //循环体如果是个字典，v代表的是值，k代表的是键

            <!-- 可以直接循环包含重复数据的集合，可以通过指定:key属性绑定唯一key，当更新元素时可重用元素，提高效率，类似于vue1.0中track-by -->

            <!-- <li v-for="(v,k) in arr2" :key="k">{{v}}</li> -->

            <li v-for="(user,index) in users">

                {{index+1}},{{user.id}},{{user.name}},{{user.age}}

            </li>

        </ul>

    </div>

</body>

</html>

　　3、v-on：用来绑定事件，（用法：v-on:事件="函数"）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>常用指令：v-on</title>

    <script src="js/vue.js"></script>

    <script>

        window.onload=function(){

            let vm=new Vue({

                el:'#itany',

                data:{  //存储数据

                    arr:[12,34,45,23,5]

                },

                methods:{ //存储方法

                    show:function(){

                        console.log('show方法');

                    },

                    add(){

                        // console.log(this); //this表示当前vue实例

                        // console.log(this===vm); //true

                        this.arr.push(666); //使用this访问当前实例中的成员

                        // this.show();

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div id="itany">

        <!-- <button onclick="show()">点我</button> -->

        <button v-on:click="show">点我</button>

        <button v-on:click="add()">向数组中添加一个元素</button>

        <br>

        {{arr}}

        <hr>

        <button v-on:mouseover="show">鼠标经过</button>

        <button v-on:dblclick="show">鼠标双击</button>

    </div>

</body>

</html>

　　4、v-show/v-if ：用来显示或隐藏元素，(v-show是通过display实现，v-if是每次删除后再重新创建)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>常用指令：v-show</title>

    <script src="js/vue.js"></script>

    <script>

        window.onload=function(){

            let vm=new Vue({

                el:'#itany',

                data:{

                    flag:true

                },

                methods:{

                    change(){

                        this.flag=!this.flag;

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div id="itany">

        <!-- <button v-on:click="change">隐藏</button> -->

        <!-- <button v-on:click="flag:flase">隐藏</button> -->

        <button v-on:click="flag=!flag">隐藏</button> #flag=!flag表示对flag进行取反

        <hr>

        <div style="width: 100px;height: 100px; background-color: red" v-if="flag">欢迎来到南京网博</div>

    </div>

</body>

</html>

　　5、v-text和v-html ：用来显示标签文本

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="dist/css/bootstrap.css">

    <script src="vue.js" ></script>

</head>

<body>

    <div id="app">

        <p>{{temp}}</p>

        <b v-text="temp"></b>

        <div v-html="temp"></div>

        <div>{{temp+'我不相信！！'}}</div>

        <div>{{temp2?888:999}}</div>

    </div>

<script>

    var vm = new Vue({

        el: "#app",  //document.getElementById()

        data: {

            temp: "我是美女！！！",

            temp2: false

        }

    })

    //var temp2 = "我是美国人!"

    setTimeout(function(){

        vm.temp = "吴老师是美男子！"

    },5000)

</script>

</body>

</html>

　　6、v-if\v-else指令：根据表达式的真假值，动态地插入、移除元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="vue.js"></script>

</head>

<body>

    <div id="myapp">

        <p v-if="temp">老师来了是889977689999999</p>

        <p v-else>65554567677777</p>

    </div>

<script>

    var vm = new Vue({

        el: "#myapp",

        data: {

            temp: true

        }

    })

</script>

</body>

</html>

　　7、v-bind指令：绑定元素的属性，可以动态改变

<!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">

    <title>Title</title>

    <script src="vue.js"></script>

    <div id="app">

        <a :href="url" > baidu</a>

        <a v-bind:href="url">baidu2</a>

    </div>

</head>

<body>

<script>

    new Vue(

        {

            el:'#app',

            data:{

                temp:1,

                url:'http://www.baidu.com'

            }

        }

    )

</script>

</body>

</html>

五、vue+boostrap练习

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>练习：用户管理</title>

    <script src="js/vue.js"></script>

    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">

    <script src="bootstrap/jquery.min.js"></script>

    <script src="bootstrap/bootstrap.min.js"></script>

    <script>

        window.onload=function(){

            let vm=new Vue({

                el:'.container',

                data:{

                    users:[

                        {name:'tom',age:24,email:'tom@itany.com'},

                        {name:'jack',age:23,email:'jack@sina.com'}

                    ],

                    user:{},//定义一个空列表

                    nowIndex:-1 //当前要删除项的索引

                },

                methods:{

                    addUser(){

                        this.users.push(this.user); //添加用户

                        this.user={};//添加完用户清空input框

                    },

                    deleteUser(){

                        if(this.nowIndex===-1){ //删除所有

                            this.users=[];

                        }else{

                            this.users.splice(this.nowIndex,1); //从指定索引位置开始删除，删除一个

                        }

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div class="container">

        <h2 class="text-center">添加用户</h2>

        <form class="form-horizontal">

            <div class="form-group">

                <label for="name" class="control-label col-sm-2 col-sm-offset-2">姓  名：</label>

                <div class="col-sm-6">

                    <input type="text" class="form-control" id="name" v-model="user.name" placeholder="请输入姓名">

                </div>

            </div>

            <div class="form-group">

                <label for="age" class="control-label col-sm-2 col-sm-offset-2">年  龄：</label>

                <div class="col-sm-6">

                    <input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄">

                </div>

            </div>

            <div class="form-group">

                <label for="email" class="control-label col-sm-2 col-sm-offset-2">邮  箱：</label>

                <div class="col-sm-6">

                    <input type="text" class="form-control" id="email" v-model="user.email" placeholder="请输入邮箱">

                </div>

            </div>

            <div class="form-group text-center">

                <input type="button" value="添  加" class="btn btn-primary" v-on:click="addUser">

                <input type="reset" value="重  置" class="btn btn-primary">

            </div>

        </form>

        <hr>

        <table class="table table-bordered table-hover">

            <caption class="h3 text-center text-info">用户列表</caption>

            <thead>

                <tr>

                    <th class="text-center">序号</th>

                    <th class="text-center">姓名</th>

                    <th class="text-center">年龄</th>

                    <th class="text-center">邮箱</th>

                    <th class="text-center">操作</th>

                </tr>

            </thead>

            <tbody>

                <tr v-for="(user,index) in users" class="text-center">

                    <td>{{index+1}}</td>

                    <td>{{user.name}}</td>

                    <td>{{user.age}}</td>

                    <td>{{user.email}}</td>

                    <td>//data-toggle表示的是行为是model模态对话框，data-target表示的是弹出模态对话框的目标

                        <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=index">删除</button>

                    </td>

                </tr>

                <tr>

                    <td colspan="5" class="text-right">

                        <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=-1">删除所有</button>

                    </td>

                </tr>

            </tbody>

        </table>

        <!-- 模态框，弹出框 -->//固定写法,模态对话框里面都是包裹三次，model》model-dialog》model-content》然后再写模态对话框的头部和身体数据

        <div class="modal fade" id="del">

            <div class="modal-dialog">

                <div class="modal-content">

                    <div class="modal-header">

                        <button class="close" data-dismiss="modal">//ata-dismiss="modal"取消模态对话框，class="close"表示叉

                            <span>&times;</span>

                        </button>//通过？ :进行if/else判断，因为当js代码加载到这里时此时的nowindex的值默认为-1，所以user[nowindex]是取不到值的，如果娶不到值就为空

                        <h4 class="modal-title" v-show="nowIndex!==-1">确认要删除用户：{{users[nowIndex]?users[nowIndex].name:''}} 吗？</h4>

                        <h4 class="modal-title" v-show="nowIndex===-1">确认要删除所有用户吗？</h4>

                    </div>

                    <div class="modal-body text-center">

                        <button class="btn btn-primary" data-dismiss="modal">取消</button>

                        <button class="btn btn-primary" data-dismiss="modal" v-on:click="deleteUser">确认</button>

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

六、事件和属性详解

　　1、事件
　　　　1、事件简写

　　　　　　v-on:click="" ----简写方式 @click=""

　　　　2、事件对象$event

　　　　　　包含事件相关信息，如事件源（target）、事件类型（type）、偏移量（offsetx）、、、、

　　　　　　示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件简写和事件对象$event</title>

    <script src="js/vue.js"></script>

    <script>

        window.onload=function(){

            let vm=new Vue({

                el:'#itany',

                methods:{

                    show(){

                        console.log(111);

                    },

                    print(e){

                        // console.log(e);

                        console.log(e.target.innerHTML); //DOM对象，获取到按钮上的文字

                        console.log(this);//在methodes的方法里面这个this都是表示的vue实例

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div id="itany">

        <button v-on:click="show">点我</button>

        <button @click="show">点我</button>

        <hr>

        <button @click="print($event)">Click Me</button>//vue中的$event等价于js中的event对象

    </div>

</body>

</html>

　　　　3、事件冒泡(当你在一个元素中触发一个事件时这个事件会传播，默认时向上传播，这就是冒泡)

　　　　　　阻止事件冒泡：
　　　　　　方式1：原生js方式，依赖于事件对象
　　　　　　方式2：vue方式，不依赖于事件对象（@click.stop，通过修饰符来完成）

　　　　　　示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件冒泡和默认行为</title>

    <script src="js/vue.js"></script>

    <script>

        window.onload=function(){

            let vm=new Vue({

                el:'#itany',

                methods:{

                    show(){   //

                        console.log(111);

                        // e.stopPropagation();阻止事件的冒泡，这是原生js方式，一定要先拿到事件对象才能阻止。e是show（e） 接受过来的参数

                    },

                    print(){

                        console.log(222);

                    },

                    write(){

                        console.log(333);

                    },

                    study(){

                        console.log(444);

                        // e.preventDefault();

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div id="itany">

        <div @click="write">

            <p @click="print">

                <!-- <button @click="show($event)">点我</button> -->//$event是个事件对象

                <button @click.stop="show">点我</button>//通过vue方式解决事件冒泡，不依赖于事件对象，会自动调用stopPropagation()方法

            </p>

        </div>

        <hr>

        <!-- <a href="#" @click="study($event)">俺是链接</a> -->

        <a href="#" @click.prevent="study">俺是链接</a>

    </div>

</body>

</html>

　　　　4、事件默认行为
　　　　阻止默认行为：
　　　　　　方式1：原生js方式，依赖于事件对象

　　　　　　　　方式2：vue方式，不依赖于事件对象（@click.prevent，通过修饰符来完成）

　　　　　　示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件冒泡和默认行为</title>

    <script src="js/vue.js"></script>

    <script>

        window.onload=function(){

            let vm=new Vue({

                el:'#itany',

                methods:{

                    study(){

                        console.log(444);

                        // e.preventDefault();//原生js阻止事件默认行为

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div id="itany">

        <hr>

        <!-- <a href="#" @click="study($event)">俺是链接</a> -->

        <a href="#" @click.prevent="study">俺是链接</a>

    </div>

</body>

</html>

　　　　5、键盘事件

　　　　　　回车键：@keydown.13 或@keydown.enter。。。

　　　　　　上键：@keydown.38 或@keydown.up。。。。

　　　　　　默认vue2.o没有@keydown.a/b/c这26个英文字母的事件，但是可以自定义键盘事件，也称为自定义键码或自定义键位别名

　　　　　　示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>键盘事件</title>

    <script src="js/vue.js"></script>

    <script>

        /**

         * 自定义键位别名

         */

        Vue.config.keyCodes={

            a:65,

            f1:112

        }

        window.onload=function(){

            let vm=new Vue({

                el:'#itany',

                methods:{

                    show(e){

                        console.log(e.keyCode);//拿到键盘按键对应的值

                        if(e.keyCode==13){

                            console.log('您按了回车');

                        }

                    },

                    print(){

                        // console.log('您按了回车');

                        // console.log('您按了方向键上');

                        console.log('11111');

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div id="itany">

        <!-- 键盘事件：@keydown、@keypress、@keyup -->

        <!-- 用户名：<input type="text" @keydown="show($event)"> -->

        <!-- 简化按键的判断 -->

        <!-- 用户名：<input type="text" @keydown="show($event)"> -->

        <!-- 用户名：<input type="text" @keydown.13="print"> -->

        <!-- 用户名：<input type="text" @keydown.enter="print"> -->

        <!-- 用户名：<input type="text" @keydown.up="print"> -->

        用户名：<input type="text" @keydown.f1="print">

        <!-- 事件修饰符 -->

        <button @click.once="print">只触发一次</button>

    </div>

</body>

</html>

　　　　6、事件修饰符

　　　　　　stop - 调用 event.stopPropagation()。

　　　　　　prevent - 调用 event.preventDefault()。

　　　　　　capture - 添加事件侦听器时使用 capture 模式。

　　　　　　self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

　　　　　　{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

　　　　　　native - 监听组件根元素的原生事件。

　　　　　　once - 只触发一次回调。

　　　　　　left - (2.2.0) 只当点击鼠标左键时触发。

　　　　　　right - (2.2.0) 只当点击鼠标右键时触发。

　　　　　　middle - (2.2.0) 只当点击鼠标中键时触发。

　　　　　　passive - (2.3.0) 以 { passive: true } 模式添加侦听器

　　2、属性

　　　　1、属性绑定和属性的简写

　　　　　　v-bind 用于属性绑定， v-bind:属性=""

　　　　　　属性的简写：v-bind:src="" 简写为 :src=""

　　　　　　示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>属性绑定和属性的简写</title>

    <script src="js/vue.js"></script>

    <script>

        window.onload=function(){

            let vm=new Vue({

                el:'#itany',

                data:{

                    url:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',

                    w:'200px',

                    h:'100px'

                }

            });

        }

    </script>

</head>

<body>

    <div id="itany">

        <!-- <img src="{{url}}"> -->

        <!-- 可以直接访问vue中的数据，不需要使用{{}} -->

        <!-- <img v-bind:src="url"> -->

        <img :src="url" :width="w" :height="h">

    </div>

</body>

</html>

　　　　2、 class和style属性

　　　　　　示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>class和style属性</title>

    <script src="js/vue.js"></script>

    <script>

        window.onload=function(){

            let vm=new Vue({

                el:'#itany',

                data:{

                    bb:'aa',

                    dd:'cc',

                    flag:true,

                    num:-2,

                    hello:{aa:true,cc:true},

                    xx:{color:'blue',fontSize:'30px'},

                    yy:{backgroundColor:'#ff7300'}

                }

            });

        }

    </script>

    <style>

        .aa{

            color:red;

            font-size:20px;

        }

        .cc{

            background-color:#ccc;

        }

    </style>

</head>

<body>

    <div id="itany">

        <!--

            class属性

         -->

        <!-- <p class="aa">南京网博</p> -->  <!-- 可以访问，普通css方式 -->

        <!-- <p :class="aa">南京网博</p> --> <!-- 不可以，Vue的属性绑定时不能直接css样式 -->

        <!-- 方式1:变量形式 -->

        <!-- <p :class="bb">南京网博</p> -->

        <!-- 方式2：数组形式，同时引用多个 -->

        <!-- <p :class="[bb,dd]">南京网博</p> -->

        <!-- 方式3：json形式，常用！！！aa表示的是属性值，布尔值表示是否运用这个属性值 -->

        <!-- <p :class="{aa:true,cc:flag}">南京网博</p> -->

        <!-- <p :class="{aa:num>0}">南京网博</p> -->

        <!-- 方式4：变量引用json形式 -->

        <!-- <p :class="hello">南京网博</p> -->

        <!--

            style属性

         -->

          <p :style="xx">itany</p>

         <p :style="[xx,yy]">itany</p>

    </div>

</body>

</html>

七、模板

　　1、简介
　　　1、Vue.js使用基于HTML的模板语法，可以将DOM绑定到Vue实例中的数据

　　　　2、模板就是{{}}双大括号，用来进行数据绑定，显示在页面中。{{}}也称为Mustache语法

　　2、数据绑定的方式

　　　　1、双向绑定：v-model

　　　　2、单向绑定

　　　　　　方式1：使用两对大括号{{}}，可能会出现闪烁的问题，可以使用v-cloak解决，就是数据没显示出来那个双大括号不要显示

　　　　　　方式2：使用v-text、v-html

　　3、其他指令

　　　　v-once 数据只绑定一次

　　　　v-pre 不编译，直接原样显示

　　4、示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>模板</title>

    <script src="js/vue.js"></script>

    <script>

        window.onload=function(){

            let vm=new Vue({

                el:'#itany',

                data:{

                    msg:'welcome to itany'

                },

                created:function(){

                    // alert(111);

                }

            });

        }

    </script>

    <style>

        /* 必须配置css样式，否则不生效 */

        [v-cloak]{

            display:none;

        }

    </style>

</head>

<body>

    <div id="itany">

        <input type="text" v-model="msg">   //数据的双向绑定

        <h3  v-cloak >aaa{{msg}}</h3>  //数据的单项绑定

        <h3>aaa<span v-cloak>{{msg}}</span></h3>

        <h3 v-text="msg"></h3>

        <h3 v-html="msg"></h3>

        <h3 v-once>{{msg}}</h3>  //只是显示一次编译的数据

        <h3 v-pre>{{msg}}</h3>//比如我就想显示两个大括号和数据，就可以不用编译

    </div>

</body>

</html>

八、过滤器

　　1、简介
　　　用来过滤模型数据，在显示之前进行数据处理和筛选
　　　语法：{{ data | filter1(参数) | filter2(参数)}} #也可以不用传递参数

　　2、关于内置过滤器
　　1、 vue1.0中内置许多过滤器，如：currency、uppercase、lowercase limitBy、 orderBy、 filterBy

　　　2、vue2.0中已经删除了所有内置过滤器，全部被废除

　　　 3、解决办法：

　　　　　　1、使用第三方工具库，如lodash、date-fns日期格式化、accounting.js货币格式化等

　　　　　　2、使用自定义过滤器

　　3、自定义过滤器

　　　　1、自定义全局过滤器

　　　　　　使用全局方法Vue.filter(过滤器ID,过滤器函数)

　　　　2、自定义局部过滤器

　　　　　　自定义局部过滤器和自定义全局过滤器的方式相同，只不过他们俩编写的位置不同而已，引入方式都是一样的。

　　4、示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>自定义过滤器</title>

    <script src="js/vue.js"></script>

    <script>

        /**

         * 自定义全局过滤器

         */

        Vue.filter('addZero',function(data){

            // console.log(data);//接受的第一个参数为要过滤的数据。

            return data<?''+data:data; //如果数据小于10就在数据前面自动补0,如果数据大于10就返回数据。

        });

        /*Vue.filter('number',(data,n) => {

            // console.log(data,n);//接受的第一个参数为要过滤的数据，后面的参数为传递的值，可以有n个参数。

            return data.toFixed(n);     //toFixed是数字四舍五入的方法，n表示小数点的后几位。

        });*/

        Vue.filter('date',data => {

            let d=new Date(data);

            return d.getFullYear()+'-'+(d.getMonth()+)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();

        });

        window.onload=function(){

            let vm=new Vue({

                el:'#itany',

                data:{

                    currentTime:Date.now()//现在时间戳

                },

                filters:{ //局部过滤器

                    number:(data,n) => {

                        return data.toFixed(n);

                    }

                }

            });

        }

    </script>

</head>

<body>

    <div id="itany">

        <!-- <h3>{{ | addZero}}</h3> -->

        <!-- 课后作业：自己实现toFiexed()四舍五入的功能 -->

        <h3>{{12.345678 | number()}}</h3>

        <!-- <h3>{{12.045 | number()}}</h3> -->

        <h3>{{currentTime | date}}</h3>

    </div>

</body>

</html>

vue指令详解的更多相关文章

vue指令详解和自定义指令
在vue中,指令以v-开头,是一种特殊的自定义行间属性,指令的职责就是其表达式的值改变时相应地将某些行为应用到DOM上指令使用的示例在下面的运行结果中可以看到,v-html是可以解析html标签的 ...
Vue 实例详解与生命周期
Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
[转]JVM指令详解（上）
作者:禅楼望月(http://www.cnblogs.com/yaoyinglong) 本文主要记录一些JVM指令,便于记忆与查阅. 一.未归类系列A 此系列暂未归类. 指令码助记符 ...
C#中的预处理器指令详解
这篇文章主要介绍了C#中的预处理器指令详解,本文讲解了#define 和 #undef.#if.#elif.#else和#endif.#warning和#error.#region和#endregio ...
rsync指令详解
rsync指令详解(更详细的看官方文档http://rsync.samba.org/ftp/rsync/rsync.html) [root@Centos epel]# rsync --help rsy ...
#pragma 预处理指令详解
源地址:http://blog.csdn.net/jx_kingwei/article/details/367312 #pragma 预处理指令详解在所有的预处理指令中, ...
迈向angularjs2系列(2):angular2指令详解
一:angular2 helloworld! 为了简单快速的运行一个ng2的app,那么通过script引入预先编译好的angular2版本和页面的基本框架. index.html: <!DOC ...
LDM与STM指令详解
title: LDM与STM指令详解 date: 2019/2/26 17:58:00 toc: true --- LDM与STM指令详解指令形式如下,这里的存储方向是针对寄存器的 Load Mul ...
C#中的预处理指令详解
这篇文章主要介绍了C#中的预处理指令详解,本文讲解了#define 和 #undef.#if.#elif.#else和#endif.#warning和#error.#region和#endregion ...

随机推荐

OpenERP report doesn't work
1. When you have used OpenOffice edited one of reports,it has stored the report's banary data is da ...
PHP——文本编辑器
简单的代码演示详细文件在文件目录里 <!doctype html> <html> <head> <meta charset="utf-8" ...
原生javascript 实现的文本编辑器
直接来干活上代码.就一个函数execCommand():自己百度一下. 在线预览 <!doctype html> <html> <head> <title&g ...
Linq Mysql GroupBy语句的问题处理
语句如下: var resumeList = db.ChannelResume.Where(model); var groupValues = resumeList.GroupBy(t => n ...
Java中模拟POST上传文件
/** * * @param url 请求URL * @param filePath 本地文件地址 * @return */ public static String upload(String ur ...
更改MVC注册Areas的顺序，掌控Areas的运作
[转自:http://www.cnblogs.com/dozer/archive/2010/04/14/change-order-of-MVC-Areas.html] 一.前言首先,有人要问,为什么 ...
SSH框架-Struts2基础-Action
Struts2的目录结构: 解压apps目录下的struts2-blank.war: 仿照这个最基本的项目,拷贝相关文件: 1.拷贝apps/struts2-blank/WEB-INF/classes ...
ARM汇编语言（3）（寄存器读写控制外设）
DAY4:ARM汇编(4) 一,GPIO编程连接内存(二级cache),用来寻址:连接外设,用来控制: 1,GPIO,General-Purpose IO ports,通用输入输出端口, ...
【python】map list for 运行时长测试
import time,sys reps=1000 size=10000 def tester(func,*args): starttime=time.time() for i in range(re ...
HDU 5321 Beautiful Set
题目链接我们能够枚举子集的大小k.求出全部大小为k的子集对答案的贡献.问题就攻克了. 注意到欧拉函数的性质:n=∑φ(d),d|n 莫比乌斯函数性质:∑d|nμ(d)=0n>1 感谢http: ...

vue指令详解

vue指令详解的更多相关文章

随机推荐

热门专题