vue2：一个简单实例

来源：互联网发布：2017游戏鼠标推荐知乎编辑：程序博客网时间：2024/06/11 10:59

前段引用

    <div class="container"></div>//范围    <script src="js/lib/vue.min.js"></script>    <script src="js/lib/vue-resource.js"></script>//Ajax数据交互插件，目前一般使用：Axios    <script src="js/vuecontain.js"></script>

vuecontain.js文件

var vm=new Vue({    el:".container",//调用范围    data:{        addressList:[],        limitNum:3,        adMorn:false        //定义属性的地方    },    filters:{//过滤器        formatMoney : function(value){            return "￥ "+value.toFixed(2); //添加小数点后两位        }    },    mounted : function(){//此处调用Ajax函数，mounted在整个实例生内置执行一次命        this.$nextTick(function(){//此方法保证dom成功渲染            this.address();        });    },    computed:{//实时调用方法，适合实时计算        filterAddress:function(){            return this.addressList.slice(0,this.limitNum);        }    },    methods:{//存放方法的地方        address:function(){//用插件vue-resource.js获取Ajax实例            var _this = this;            this.$http.get("data/address.json").then(function (response) {                var res = response.data;                if(res.status=="0"){//判断是否获取成功                    _this.addressList = res.result;//存放获取数据                }            });        }    }});

过滤器两种使用方法：

局部过滤器

filters:{    formatMoney : function(value){            return "￥ "+value.toFixed(2); //添加小数点后两位        }}

html：{{  XXXX | formatMoney("元")}}

全局过滤器

Vue.filter("money",function(value,type){    return "￥ "+value.toFixed(2) + type; });

html：{{  XXXX | money("元")}}

基本示例：

<!DOCTYPE html><html>    <head>        <title></title>        <meta charset="utf-8">        <script src="http://unpkg.com/vue/dist/vue.js"></script>    </head>    <body>         <div id="box">            {{a}}        </div>        <script type="text/javascript">            var vm = new Vue({                el:'#box',                data:{                    a:1,                },            });            //vm就是实例对象            console.log(vm.$el); //这里就是div元素            vm.$el.style.background = 'red';            console.log(vm.$data);             console.log(vm.$data.a); //'1'         </script>    </body></html>

<!DOCTYPE html><html>    <head>        <title></title>        <meta charset="utf-8">    </head>    <body>         <div id="box">            {{a}}        </div>        <script src="http://unpkg.com/vue/dist/vue.js"></script>        <script type="text/javascript">            var vm=new Vue({                el:"#box",//调用范围                data:{                    a:1,//定义属性的地方                },                filters:{//过滤器                },                mounted : function(){//此处调用Ajax函数，mounted在整个实例生内置执行一次命                },                computed:{//实时调用方法，适合实时计算                },                methods:{//存放方法的地方                }            });        </script>    </body></html>

参考：
1.官方dpi：https://cn.vuejs.org/v2/api/
2.Vue实例的一些简单方法 http://blog.csdn.net/github_26672553/article/details/54632107

阅读全文

0 0