前端培训之vue内置指令与自定义指令

内置指令与自定义指令
1.1. 效果 (12_指令/test.html)
12_指令_内置指令 .gif
1.2. 常用内置指令
1) v:text: 更新元素的 textContent 2) v-html: 更新元素的 innerHTML 3) v-if: 如果为 true, 当前标签才会输出到页面
4) v-else: 如果为 false, 当前标签才会输出到页面 5) v-show: 通过控制 display 样式来控制显示/隐藏 6) v-for: 遍历数组/对象 7) v-on: 绑定事件监听, 一般简写为@ 8) v-bind: 强制绑定解析表达式, 可以省略 v-bind 9) v-model: 双向数据绑定 10) ref: 指定唯一标识,vue 对象通过$els 属性访问这个元素对象 11) v-cloak: 防止闪现, 与 css 配合:[v-cloak]{display:none}
1.3. 自定义指令
1) 注册全局指令 Vue.directive(‘my-directive’,function(el,binding){ el.innerHTML=binding.value.toupperCase() }) 2) 注册局部指令 directives:{ ‘my-directive’:{ bind(el,binding){ el.innerHTML=binding.value.toupperCase() } } } 3) 使用指令 v-my-directive=’xxx’

1.4. 编码 1(内置指令)
<style> [v-cloak] { display: none } </style>
<div id=”example”>
<p v-text=”url”></p> <p v-html=”url”></p> <img :id=”myid” :src=”imageSrc”> <p> <span ref=”message”>atguigu.com</span> <button @click=”showMsg”>显示左侧文本</button> </p> <p v-cloak>{{url}}</p> </div>
<script type=”text/javascript” src=”../js/vue.js”></script> <script type=”text/javascript”> alert(‘模拟加载慢’) new Vue({ el: ‘#example’, data: { url: ‘<a href=”http://www.atguigu.com”>尚硅谷</a>’, myid: ‘abc123’, imageSrc: ‘http://cn.vuejs.org/images/logo.png’ },
methods: { showMsg: function () { alert(this.$refs.message.textContent) } } }) </script>
1.5. 编码 2(自定义指令)
需求: 自定义 2 个指令 1. 功能类型于 v-text, 但转换为全大写 2. 功能类型于 v-text, 但转换为全小写 <div id=”demo1″> <p v-upper-text=”msg”></p> <p v-lower-text=”msg”></p> </div>
<div id=”demo2″>
<p v-upper-text=”msg2″></p> <p v-lower-text=”msg2″></p> <!-局 部 指 令 ,
此 处 不 能 使 用 –>
</div>
<script type=”text/javascript” src=”../js/vue.js”></script> <script type=”text/javascript”> // 注 册 全 局 指 令 Vue.directive(‘upper-text’, function (el, binding) { el.innerHTML = binding.value.toUpperCase() })
new Vue({ el: ‘#demo1’, data: { msg: ‘NBA love this game!’ }, directives: { // 注 册 局 部 指 令 ‘lower-text’: { bind (el, binding) { el.innerHTML = binding.value.toLowerCase() } } } })
new Vue({ el: ‘#demo2’, data: { msg2: ‘I Like You’ } }) </script>

想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训，尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习


上一篇:
下一篇:
吉ICP备19006430号