夜光带你走进Vue.js（二十六）擅长的领域

最新推荐文章于 2022-01-26 13:05:39 发布

GeniusTeam-夜光

最新推荐文章于 2022-01-26 13:05:39 发布

阅读量124

点赞数

分类专栏： Genius-Vue.js

本文链接：https://blog.csdn.net/weixin_41987706/article/details/102466722

版权

Genius-Vue.js 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

夜光序言：

我涉旷野丛林而来，你撑船渡我，入灿灿花海。

正文：

data 必须是一个函数

嗯唔~~ button-counter 组件中的 data 不是一个对象，而是一个函数：

data: function () {
return {
count: 0
}
}

这样的好处就是每个实例可以维护一份被返回对象的独立的拷贝，如果 data 是一个对象则会影响到其他实例，如下所示：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>夜光</title>
</head>

<body>
<div id="components-demo3" class="demo">
    <button-counter2></button-counter2>
    <button-counter2></button-counter2>
    <button-counter2></button-counter2>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
    var buttonCounter2Data = {
        count: 0
    };
    Vue.component('button-counter2', {
        /*
        data: function () {
            // data 选项是一个函数，组件不相互影响
            return {
                count: 0
            }
        },
        */
        data: function () {
            // data 选项是一个对象，会影响到其他实例
            return buttonCounter2Data
        },
        template: '<button v-on:click="count++">嗯唔~~点击了 {{ count }} 次。</button>'
    });
    new Vue({ el: '#components-demo3' })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>夜光</title>
</head>

<body>
<div id="div_col">
    <p>自定义事件</p>
    <p>{{total}}</p>
    <example1 v-on:incretment="incretmentTotal" value="点击"></example1>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
    Vue.component('example1', {
        props: ['value'],
        template: '<button v-on:click="incrementHanlder">{{value}}</button>',
        // data: function () {
        //   return {
        //     count: 0
        //   }
        // },
        methods: {
            incrementHanlder: function () {
                // this.count += 1
                this.$emit('incretment')
            }
        }
    });
    new Vue({
        el: '#div_col',
        data: {
            total: 0
        },
        methods: {
            incretmentTotal: function () {
                this.total += 1
            }
        }
    })
</script>
</body>
</html>

Vue.js 自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>夜光</title>
</head>

<body>
<div id="app">
    <p>页面载入时，input 元素自动获取焦点：</p>
    <input v-focus>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
    // 注册一个全局自定义指令 v-focus
    Vue.directive('focus', {
        // 当绑定元素插入到 DOM 中。
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        }
    });
    // 创建根实例
    new Vue({
        el: '#app'
    });// 注册一个全局自定义指令 v-focus
    Vue.directive('focus', {
        // 当绑定元素插入到 DOM 中。
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        }
    });
    // 创建根实例
    new Vue({
        el: '#app'
    })
</script>
</body>
</html>

我们也可以在实例使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>夜光</title>
</head>

<body>
<div id="app">
    <p>页面载入时，input 元素自动获取焦点：</p>
    <input v-focus>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
    // 创建根实例
    new Vue({
        el: '#app',
        directives: {
            // 注册一个局部的自定义指令 v-focus
            focus: {
                // 指令的定义
                inserted: function (el) {
                    // 聚焦元素
                    el.focus()
                }
            }
        }
    })
</script>
</body>
</html>

很帅~~钩子

钩子函数

指令定义函数提供了几个钩子函数（可选）：

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次，指令与元素解绑时调用。

钩子函数参数

钩子函数的参数有：

el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
- name: 指令名，不包括 v- 前缀。
- value: 指令的绑定值，例如： v-my-directive="1 + 1", value 的值是 2。
- oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression: 绑定值的表达式或变量名。例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
- arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
- modifiers: 一个包含修饰符的对象。例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-genius="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>夜光</title>
</head>

<body>
<div id="app"  v-genius:hello.a.b="message">
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
    Vue.directive('genius', {
        bind: function (el, binding, vnode) {
            var s = JSON.stringify;
            el.innerHTML =
                'name: '       + s(binding.name) + '<br>' +
                'value: '      + s(binding.value) + '<br>' +
                'expression: ' + s(binding.expression) + '<br>' +
                'argument: '   + s(binding.arg) + '<br>' +
                'modifiers: '  + s(binding.modifiers) + '<br>' +
                'vnode keys: ' + Object.keys(vnode).join(', ')
        }
    });
    new Vue({
        el: '#app',
        data: {
            message: '夜光'
        }
    })
</script>
</body>
</html>

GeniusTeam-夜光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
夜光带你走进Vue.js（二十六）擅长的领域

夜光序言：我涉旷野丛林而来，你撑船渡我，入灿灿花海。正文：data 必须是一个函数嗯唔~~ button-counter 组件中的 data 不是一个对象，而是一个函数：data: function () { return { count: 0 }}这样的好处就是每个实例可以维护一份被返回对象的独立的拷...
复制链接

扫一扫