vue自定义指令-基础配置

原创 2018年04月15日 21:57:09

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .card{
            width:200px;
            background: #ececec;
            margin:10px;
            padding:10px;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-pin="card1.pinned" class="card">
        <button @click="card1.pinned = !card1.pinned">钉住/取消</button>
        After three years of construction, the world's largest cruise ship just set sail from Barcelona, Spain, on its inaugural voyage to destinations around the Mediterranean.    </div>

    <div v-pin="card2.pinned" class="card">
        <a href="#" @click="card2.pinned = !card2.pinned">Pin it!</a>But the ship's record-breaking size isn't its only claim to fame.
    </div>
    <p>The Symphony of the Seas is home to the tallest waterslide at sea, the ocean's fastest Internet and more works of art than the Louvre has paintings.</p>
    <p>"The most surprising and memorable thing for me was that first sight of the ship -- seeing how big and immense it is," Balwin Yeung, Royal Caribbean's director of sales and marketing in Hong Kong, tells CNN Travel.</p>
    <p>"You can actually see it the moment you almost step out of the airport in Barcelona, since the port is just 10 to 15 minutes away. It makes a huge first impression."</p>
    <p>As the world's largest cruiseliner by volume, Symphony of the Seas stretches 1,188 feet long and is filled with 22 restaurants, 24 pools and 2,759 cabins.</p>
    <p>At capacity, the ship can host about 6,680 guests -- plus 2,200-some crew members for a total of nearly 9,000 people.</p>
</div>
<script src="../lib/vue.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

main.js:

Vue.directive('pin', function(el, binding){
    var pinned = binding.value;
    if(pinned){
        el.style.position = 'fixed';
        el.style.left = '20px';
        el.style.top = '20px';
    }else{
        el.style.position = 'static';
    }
})

new Vue({
    el: '#app',
    data: {
        card1: {
            pinned: false
        },
        card2: {
            pinned: false
        }
    }
})

VUE构建工具

-
  • 1970年01月01日 08:00

Vue学习(二)自定义指令

Vue借鉴了AngularJS中的Directive的概念,不仅支持默认设置的核心指令(如[上文](https://syd192.github.io/2016/11/11/vue-learn/#mor...
  • ZUOZIJI416
  • ZUOZIJI416
  • 2016-12-08 10:20:16
  • 16360

vue2自定义指令的作用

自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的。   比如谷歌图...
  • baidu_31333625
  • baidu_31333625
  • 2017-04-22 18:57:48
  • 2010

Vue自定义指令

除了核心指令(v-model和v-for)等外,Vue也允许我们自定义指令。 "box"> span v-text="msg">span> div> scri...
  • gebitan505
  • gebitan505
  • 2017-03-02 09:58:16
  • 1210

Vue.js自定义指令的用法与实例

自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的。   比如谷歌图片的...
  • sinat_17775997
  • sinat_17775997
  • 2017-02-28 17:12:29
  • 710

Vue入门 - 自定义指令

1 自定义指令 指令可以在全局或局部定义。 组件是html和代码的复用,而指令是对DOM的扩展复用。 1.1 全局自定义指令Vue.directive('mydirective',{ //各种...
  • qq451354
  • qq451354
  • 2017-04-08 23:10:16
  • 1224

Vue.js(进阶)自定义指令

0x00 同样 Vue 允许我们自定义指令,以再必要的情况下实现对原生 DOM 的操作。 Vue 提供了 deirevtice 注册全局指令,directives 注册局部指令。 "de...
  • sinat_17775997
  • sinat_17775997
  • 2017-02-18 22:32:11
  • 2171

vue全局自定义指令和局部自定义指令

局部自定义指令(只针对组件内的元素) 定义全局自定义指令 自定义指令的钩子函数 自定义指令钩子函数的参数 例子 除了默认设置的核心指令 (v-model 和 v-show),Vue ...
  • kingov
  • kingov
  • 2017-10-20 15:55:35
  • 1079

vue中的自定义指令

基础 Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为。你可以使用Vue.directive(id, definition)的方法传入指令...
  • sxl131415
  • sxl131415
  • 2018-01-20 16:07:15
  • 59

vue 自定义指令

vue除了内置的核心指令(v-model 、v-show)外,也允许注册自定义指令,这对vue的扩展提供了很大的方便,同时vue的社区很活跃,相信会有很多有意思的指令分享。 基本简单的自定义指令使用:...
  • wngzhem
  • wngzhem
  • 2017-01-12 19:50:42
  • 981
收藏助手
不良信息举报
您举报文章:vue自定义指令-基础配置
举报原因:
原因补充:

(最多只允许输入30个字)