自学Vue第三天

自定义指令 --初识Vue

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令
基本用法

<div id="app">
    <input type="text" v-focus>
</div>
<script>
    Vue.directive('focus', {
        inserted(el) {
            console.log(el)
            el.focus()
        }
    })
    new Vue({
        el: '#app'
    })
</script>

钩子

<div id="app">
    <div v-smallfour>{{ num }}</div>
    <div>
    <button @click="add">Add</button>
</div>
    <button onclick="unbind()">unbind</button>
</div>
<script>
    // 自定义指令
    Vue.directive("smallfour",{
        bind:function(el,binding){	//被绑定
            console.log('1 - bind');
        },
        inserted: function () {		//绑定到节点
            console.log('2 - inserted');
        },
        update: function () {		//组件更新
            console.log('3 - update');
        },
        componentUpdated: function () {		//组件更新完成
            console.log('4 - componentUpdated');
        },
        unbind: function () {		//解绑
            console.log('5 - unbind');
        }

    });

    // 解绑
    function unbind() {
        vm.$destroy();  //解除绑定
    }

    // 实例化
    const vm = new Vue({
        el : '#app',
        data : {
            num: 0
        },
        methods: {
            add: function () {
                this.num++;
            }
        }
    })
</script>

修饰符

事件修饰符

• stop
• capture
• self
• once
• …

按键修饰符

• enter
• tab
• delete
• esc
• …

V-model

checkbox

<div id="app">
    <input type="checkbox" value="熊大" v-model="checkedNames">
    <label for="">熊大</label>
    <input type="checkbox" value="熊二" v-model="checkedNames">
    <label for="">熊二</label>
    <input type="checkbox" value="强哥" v-model="checkedNames">
    <label for="">强哥</label>
    <br />
    <span>checked names: {{ checkedNames }}</span>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            checkedNames: []
        }
    })
</script>

radio

<div id="app">
    <input type="radio" value="熊大" v-model="picked">
    <label for="">熊大</label>
    <input type="radio" value="熊二" v-model="picked">
    <label for="">熊二</label>
    <input type="radio" value="强哥" v-model="picked">
    <label for="">强哥</label>
    <br />
    <span>picked: {{ picked }}</span>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            picked: ''
        }
    })
</script>

select

<div id="app">
    <select v-model="selected">
        <option v-for="option in options" :value="option.value">
            {{ option.text }}
        </option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            selected: 'B',
            options: [
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' }
            ]
        }
    })
</script>

数组更新检测

Vue中数组的方法是变异的方法，因为和原生JS相比增加了响应式的特性；
作业

表单-v-model

computed 计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

<div id="app">
    <p>{{ message }}</p>
    <p>{{ reverseMessage }}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'React'
        },
        computed: {
            reverseMessage() {
                return  this.message.split('').reverse().join('')
            }
        }
    })
</script>

methods

<div id="app">
    <p>{{ message }}</p>
    <p>{{ reverseMessage() }}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'angularJS'
        },
        computed: { // 只要计算属性依赖的data里面的某个值没有发生任何变化，处理数据的逻辑代码就不再执行了，而是直接返回上次计算的结果
            reverseMessage() {
                return  this.message.split('').reverse().join('')
            }
        }
        // methods: { // methods每次都会执行一遍，没有缓存
        //     reverseMessage() {
        //         return this.message.split('').reverse().join('')
        //     }
        // }
    })
</script>

watch

<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <input type="text" v-model="fullName">
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        watch: {
            // 监听firstName这个数据
            firstName: function(val) {
                console.log(val)
                this.fullName = val + '' + this.lastName
            },
            // 监听firstName这个数据
            lastName: function(val) {
                console.log(val)
                this.fullName = this.firstName + '' + val
            }
        }
    })
</script>

computed同样可以使用更加简便的方法实现和watch同样的效果

<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <input type="text" v-model="fullName">
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            firstName: 'Foo',
            lastName: 'Bar'
        }
        computed: {
            // fullName定义的计算属性名
            fullName: function() {
                return this.firstName + '' + this.lastName
            }
        }
    })
</script>

watch的使用场景/watch的特点

只有监听的值变化的时候才执行，默认不执行

<div id="app">
   <p>fullName: {{ fullName }}</p>
   <p>firstName: <input type="text" v-model="firstName"></p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: ''
        },
        watch: {
            firstName(newName, oldName) {
                this.fullName = newName + '' + this.lastName
            }
        }
    })
</script>

初始化执行一次，需要配置一个属性immerdiate

<div id="app">
   <p>fullName: {{ fullName }}</p>
   <p>firstName: <input type="text" v-model="firstName"></p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: ''
        },
        watch: {
            firstName: {
                // 类似于钩子
                handler(newName, oldName) {
                    this.fullName = newName + '' + this.lastName
                },
                immediate: true // 初始化执行一次
            },

        }
    })
</script>

deep 深度监听

<div id="app">
   <p>obj.title: <input type="text" v-model="obj.title"></p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            obj: {
                title: '熊大'
            }
        },
        watch: {
            obj: {
                handler(newName, oldName) {
                   console.log('obj.title改变了')
                },
                // immediate: true, // 初始化执行一次
                deep: true // 深度监听
            },

        }
    })
</script>

作业

TODOlist -----用Vue