表单操作

解决ob:observer toString()

自定义指令

全局指令

<input type="text" v-focus>
  Vue.directive('focus', {
        inserted:function(el){
            el.focus();
        }
    })

局部指令

                var vm = new Vue({
            el:'#app',
            data() {
                return {
                    blue:'blue'
                }
            },
            methods: {
            },
            directives:{
                color:{
                    bind:function(el,binding){
                        el.style.color = binding.value
                    }
                }
            }
        })

计算属性

computed

<div id="app">
        <div>{{reverseString}}</div>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data() {
                return {
                    msg:'hello'
                }
            },
            methods: {
            },
            computed:{
                reverseString:function(){
                    return this.msg.split('').reverse('').join('')
                }
            }
        })
    </script>

计算属性与方法的区别

节省性能

<div id="app">
        <div>{{sumnum}}</div>
</div>
    <script>
        var vm = new Vue({
            el:'#app',
            data() {
                return {
                    num:100
                }
            },
            computed:{
                sumnum:function(){
                    var total = 0;
                    for(var i = 0; i<=this.num;i++){
                        total += i;
                    }
                    return total
                }
            }
        })
    </script>

过滤器

全局以及局部过滤器

 <div id="app">
        <input type="text" v-model='msg'>
        <div>{{msg | upper}}</div>
        <div>{{msg | upper | lower}}</div>
        <div :id='msg | upper'>过滤属性</div>
    </div>
    <script>
        Vue.filter('upper',function(e){
            return e.charAt(0).toUpperCase() + e.slice(1)
        })
        var vm = new Vue({
            el:'#app',
            data() {
                return {
                    msg:''
                }
            },
            methods: {
            },
            filters:{
                lower:function(e){
                    return e.charAt(0).toLowerCase() + e.slice(1)
                }
            }
        })
    </script>

带参数过滤器

<div id="app">
        <div>{{date | format('yyyy-MM-dd')}}</div>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data() {
                return {
                    date:new Date()
                }
            },
            filters:{
                format:function(v,arg){
                    if(arg == 'yyyy-MM-dd'){
                        var res = ''
                        res += v.getFullYear() + "-" + (v.getMonth() + 1) + "-" + v.getDate()
                    }
                    return res
                }
            }
        })
    </script>

侦听器

数据一旦发生变化就通知侦听器所绑定的方法
用于 数据量大 数据变化时执行异步或开销大的操作

 <div id="app">
        <input type="text" v-model='uname'>
        <span>{{tip}}</span>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data() {
                return {
                    uname:'',
                    tip:''
                }
            },
            methods: {
                checkname(uname){
                    //模拟
                    setTimeout(()=>{
                        if(this.uname == 'admin'){
                            this.tip = '已存在'
                        }else{
                            this.tip = '可以使用'
                        }
                    },2000)
                }
            },
            watch: {
                uname:function(val){
                    this.checkname(val);
                    this.tip = '验证中'
                }
            },
        })
    </script>

生命周期

8个生命周期
钩子函数