Vue2.0-中篇

计算属性

<div id="app">
    {{total}}
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            price:20,
            count:10
        },
        //计算属性
        computed:{
            total:function () {
                //获取值-->设置值
                return this.price*this.count
            }
        }
    });
</script>

计算属性的设置

默认只有get，用于监控属性变化时触发。 set可选，当computed属性自身被赋值时触发。
详情参考 Vue中文文档

<div id="app">
    {{total}}
    {{count}}
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            price:20,
            count:10
        },
        //计算属性
        computed:{
            total:{
                get:function () {
                    return this.price*this.count;
                },
                set:function (total) {
                    //设置total影响了count属性
                    this.count=total/this.price;
                }
            }
        }
    });
    vm.total=300;
</script>

实例上常用属性

vm.$el获取当前元素

vm.$data获取当前实例上挂载的数据

vm.$options获取当前实例上的所有自定义属性

vm.$watch()监控数据变化 ，下面的例子中，点击修改，会触发watch()方法，弹出 新值：good guy旧值：welcome

<div id="app">
    {{msg}}
    <button type="button" @click="fn">修改</button>
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        diy:'nice',
        data:{
            msg:'welcome'
        },
        methods:{
            fn() {
                this.msg='good guy';
            }
        }

    });
    vm.$el.style.color='red';
    console.log(vm.$data.msg);
    console.log(vm.$options.diy);
    vm.$watch('msg',function (newVal,oldVal) {
        alert('新值：'+newVal+'旧值：'+oldVal)
    })
</script>

自定义过滤器

vue2.0中废弃了内置过滤器，提倡我们自己手动写一个过滤器

Vue.filter( [过滤器名字], [function(过滤谁，参数1，参数2)])

<div id="app">
    {{Date.now()|date1('p1','p2')}}
</div>

<script type="text/javascript">
    Vue.filter('date1',function (input,param1,param2) {
        var date=new Date(input);
        console.log(param1);//p1
        console.log(param2);//p2
        return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}时${date.getMinutes()}分${date.getSeconds()}秒`;
    });

    var vm=new Vue({
        el:'#app',
        data:{
            msg:'hello'
        }
    });
</script>

自定义指令

详情见Vue中文文档

<div id="app">
    <input type="text">
    <!--v-model v-html-->
    <div v-border="msg">我是一个蓝色边框的盒子</div>
</div>

<script>
    // 注册一个全局自定义指令 v-border
    Vue.directive('border',function (el,binding) {
        //el: 指令所绑定的元素，可以用来直接操作 DOM 。binding.value：指令的绑定值
        el.style.border=`1px solid ${binding.value}`;
    });

    var vm=new Vue({
        el:'#app',
        data:{
            msg:'blue'
        }
    });
</script>

指令实现拖拽

自定义指令v-drag

<style>
    .drag{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
    }
</style>

<div id="app">
    <div v-drag class="drag"></div>
    <div v-drag class="drag"></div>
</div>

<script>
    //function(el,binding)-->binding此处没用到，可以不写
    Vue.directive('drag',function (el) {
        el.onmousedown=function (e) {
            //console.dir('elDown'+e);//elDown[object MouseEvent]
            //拿到当前鼠标距离盒子边缘的距离
            var disX=e.pageX-el.offsetLeft;
            var disY=e.pageY-el.offsetTop;
            document.onmousemove=function (e) {
                //console.dir('domMove'+e);//domMove[object MouseEvent]
                //算出盒子边缘距浏览器的距离
                el.style.left=e.pageX-disX+'px';
                el.style.top=e.pageY-disY+'px';
            }
            document.onmouseup=function (e) {
                //console.dir('domUp'+e);////Up[object MouseEvent]
                document.onmousemove=document.onmouseup=null;
            }
            //组织默认事件按，防止失去焦点
            e.preventDefault();
        }
    });
    var vm=new Vue({
        el:'#app'
    });
</script>

自定义键盘事件

@keydown 按下键盘事件

<div id="app">
    <input type="text" @keydown.f1="fn">
</div>

<script>
    //扩展我们的键盘事件,f1键
    Vue.config.keyCodes.f1=112;
    var vm=new Vue({
        el:'#app',
        methods:{
            fn:function () {
                alert('ok');
            }
        }
    });
</script>