vue 组件 注册与使用

七亿少女的劫丨

效果gif：

1.引入需要用到的vue.js ,dynamics.js

<script src="https://cdn.bootcss.com/vue/2.5.18-beta.0/vue.min.js"></script>
<script src="https://cdn.bootcss.com/dynamics.js/1.1.5/dynamics.min.js"></script>

2.定义组件

<script type="text/x-template" id="header-view-template">
    <div class="draggable-header-view"
    @mousedown="startDrag" @touchstart="startDrag"
    @mousemove="onDrag" @touchmove="onDrag"
    @mouseup="stopDrag" @touchend="stopDrag" @mouseleave="stopDrag">
    <svg class="bg" width="320" height="560">
      <path :d="headerPath" fill="#3F51B5"></path>
    </svg>
    <div class="header">