一和二，請參考https://www.cnblogs.com/zui-ai-java/p/11109213.html
三、index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>index</title> 8 <style> 9 .card{ 10 width:200px; 11 padding:10px; 12 margin:5px; 13 background: #ccc; 14 } 15 </style> 16 17 </head> 18 <body> 19 <div id="app"> 20 <div v-pin:true.bottom.left="card1.pinned" class="card"> 21 <button @click="card1.pinned = !card1.pinned">固定/取消</button> 22 點擊佛啊 到愛上對方 大理市地方 大理石的發生啥都if靜安寺 23 </div> 24 25 <div v-pin="card2.pinned" class="card"> 26 <a @click="card2.pinned = !card2.pinned" href="#">pin it</a> 27 魯大師的佛 了發斯蒂芬 的拉法的拉法 豆愛瘋 28 </div> 29 30 <div> 31 基礎方式 32 new 一個Vue的實例<br> 33 注冊組件並使用<br> 34 注冊組件 35 全局注冊<br> 36 局部注冊<br> 37 通過new創建Vue實例, 全局注冊組件，局部注冊組件三者的使用頻率（場景）<br> 38 Vue中的props數據流 39 props取值的方式<br> 40 props內寫的是駝峰命名法，為什么在HTML（模板）中又用了短橫線命名法？<br> 41 使用v-bind的必要性：props不綁定的前提下,只能被作為字符串解析<br> 42 Vue的自定義事件 43 自定義事件的原理<br> 44 自定義事件的作用1 ——“重新定義”了事件監聽機制的范圍<br> 45 自定義事件的作用2 ——使得父子組件權責明確<br> 46 Slot的使用<br> 47 具名slot<br> 48 49 50 正文<br> 51 52 回到頂部<br> 53 Vue渲染的兩大基礎方式<br> 54 new 一個Vue的實例 55 這個我們一般會使用在掛載根節點這一初始化操作上：<br> 56 57 new Vue({<br> 58 el: '#app'<br> 59 })<br> 60 61 62 注冊組件並使用<br> 63 通過Vue.component（）去注冊一個組件，你就可以全局地使用它了，具體體現在每個被new的 Vue 64 65 <br>實例/注冊組件， 的template選項屬性或者對應的DOM模板中,去直接使用<br> 66 67 68 69 回到頂部<br> 70 注冊組件 71 全局注冊<br> 72 例如，放在通過new創建的Vue實例當中：<br> 73 74 復制代碼 75 Vue.component('my-component', {<br> 76 template: '<p>我是被全局注冊的組件</p>'<br> 77 }) 78 /* 79 Vue.component(組件名稱[字符串], 組件對象)<br> 80 */ 81 82 new Vue({<br> 83 el: '#app',<br> 84 template: '<my-component></my-component>'<br> 85 }) 86 復制代碼<br> 87 88 89 demo:<br> 90 </div> 91 </div> 92 93 <script src="../lib/vue.js"></script> 94 <script src="./js/main.js"></script> 95 </body> 96 </html>
四、main.js
1 // 自定義v-pin指令 2 // el表示指令所在標簽元素 3 // binding表示指令，其中value屬性得到指令的值 4 Vue.directive("pin",function(el,binding){ 5 var pinned = binding.value; 6 // console.log("pinned",pinned) 7 8 // 使用modifiers屬性可以得到指令的屬性，是一個js對象 9 var position = binding.modifiers; 10 // console.log("position",position); 11 // 使用arg屬性來獲取指定的參數 12 var warning = binding.arg; 13 // console.log("warning",warning); 14 if(pinned){ 15 el.style.position="fixed"; 16 // 通過for..in..遍歷position對象 17 for(var key in position){ 18 // 使用[key],實現動態的設置方位 19 el.style[key] = "40px"; 20 } 21 22 if(warning){ 23 el.style.background="yellow"; 24 } 25 // el.style.top = "40px"; 26 // el.style.left = "40px"; 27 }else{ 28 el.style.position = "static"; 29 el.style.background = "#ccc" 30 } 31 32 }) 33 34 new Vue({ 35 el:"#app", 36 data:{ 37 card1:{ 38 pinned:false 39 }, 40 card2:{ 41 pinned:false 42 } 43 } 44 })
五、效果
六、感謝觀看，如有疑問，歡迎交流哦