常用属性

页面结构

<body>
    <div id="app">
        <input type="text" v-model="username" />
        {{username}}

        <button @click="ClickMe">绑定事件-简写方式</button>

        <h1>计算属性</h1>
        {{count}}

        <h1>过滤器</h1>
        {{price | number_format(2, ".", ",")}}

        <h1>ref用法</h1>
        <div ref="test">ref用法说明</div>
    </div>
</body>

数据结构

var app = new Vue({
    //绑定的根元素
    el:'#app',
    //数据结构
    data:{
        username:'',
        price:1000000,
    },
    //生命周期函数
    mounted()
    {
        // vue给我们提供一个操作dom的属性ref。绑定在dom元素上时，用起来与id差不多，通过this.$refs来调用
        console.log(this.$refs.test)
    },
    //计算属性 计算属性与数据结构同级，都是用来表示数据，但是计算属性可以加上逻辑处理
    computed:{
        count()
        {  
            //保留小数点后两位
            var num = 5.56789
            var res = num.toFixed(2)
            return res
        }
    },
    //方法
    methods:{
        ClickMe()
        {
            alert('触发事件')
        }
    },
    //侦听器 可以监控数据变化前后的值
    watch:{
        username(newval, oldval)
        {
            console.log(`新的值：${newval} --- 旧的值：${oldval}`)
        }
    },
    //过滤器 可以对我们输出的数据结构进行筛选和过滤
    filters:{
        //金额格式化
        number_format(number, decimals, dec_point, thousands_sep)
        {
            /*
            * 参数说明：
            * number：要格式化的数字
            * decimals：保留几位小数
            * dec_point：小数点符号
            * thousands_sep：千分位符号
            * */
            number = (number + '').replace(/[^0-9+-Ee.]/g, '');
            var n = !isFinite(+number) ? 0 : +number,

                prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
                sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
                dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
                s = '',
                toFixedFix = function (n, prec) {
                    var k = Math.pow(10, prec);
                    return '' + Math.floor(n * k) / k;
                };
            s = (prec ? toFixedFix(n, prec) : '' + Math.floor(n)).split('.');
            var re = /(-?\d+)(\d{3})/;
            console.log(s)
            while (re.test(s[0])) {
                s[0] = s[0].replace(re, "$1" + sep + "$2");
            }

            if ((s[1] || '').length < prec) {
                s[1] = s[1] || '';
                s[1] += new Array(prec - s[1].length + 1).join('0');
            }
            return s.join(dec);
        }
    }
})