Vue自定义指令

最新推荐文章于 2021-12-24 15:56:09 发布

aixian4201

最新推荐文章于 2021-12-24 15:56:09 发布

阅读量149

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zui-ai-java/p/11110381.html

版权

一和二，请参考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="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     if(pinned){
 8         el.style.position="fixed";
 9         el.style.top = "40px";
10         el.style.left = "40px";
11     }else{
12         el.style.position = "static";
13     }
14 
15 })
16 
17 new Vue({
18     el:"#app",
19     data:{
20         card1:{
21             pinned:false
22         },
23         card2:{
24             pinned:false
25         }
26     }
27 })

五、效果

六、感谢观看，如有疑问，欢迎交流哦

转载于:https://www.cnblogs.com/zui-ai-java/p/11110381.html

aixian4201

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue自定义指令

一和二，请参考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 &...
复制链接

扫一扫