vue2：一个简单实例

最新推荐文章于 2024-08-21 09:13:07 发布

秋之旅

最新推荐文章于 2024-08-21 09:13:07 发布

阅读量614

点赞数

分类专栏： vue2-0 文章标签： vue-js

本文链接：https://blog.csdn.net/qq_26604017/article/details/77532801

版权

vue2-0 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前段引用

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