vue指令

╰半夏微凉° 2023-06-01 12:50 5阅读 0赞

### 1.常用内置指令 ###

v:text : 更新元素的 textContent
    v-html : 更新元素的 innerHTML
    v-if : 如果为true, 当前标签才会输出到页面
    v-else: 如果为false, 当前标签才会输出到页面
    v-show : 通过控制display样式来控制显示/隐藏
    v-for : 遍历数组/对象
    v-on : 绑定事件监听, 一般简写为@
    v-bind : 强制绑定解析表达式, 可以省略v-bind
    v-model : 双向数据绑定
    ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
    v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }

<div id="example">
      <p ref="content">abcdefg</p>
      <p v-text="msg"></p>    
      <p v-html="msg"></p>    
      <button @click="hint">提示</button>
      <p v-cloak>{
        {msg}}</p>  
    </div>
    
    <scrip type="text/javascript" src="../js/vue.js"></script>
    <scrip type="text/javascript">
      alert("------")   //解析msg数据之前弹窗
      new Vue({
        el: "#example",
        data: {
          msg: "message",
        },
        methods: {
          hint () {
            alert(this.$refs.content.textContent)
          }
        }
    
      })
    </script>

### 2.自定义指令 ###

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'

<div id="test1">
      <p v-upper-text="msg1"></p>
      <p v-lower-text="msg1"></p>
    </div>
    
    <div id="test2">
      <p v-upper-text="msg2"></p>
      <p v-lower-text="msg2"></p>
    </div>
    
    <scrip type="text/javascript" src="../js/vue.js"></script>
    <scrip type="text/javascript">
      // 注册一个全局指令
      // el: 指令所在的标签对象
      // binding: 包含指令相关数据的容器对象
      Vue.directive("upper-text",function (el,binding) {
        console.log(el,binding)
        el.textContent = binding.value.toUpperCase()
      })
    
      new Vue({
        el: "#test1",
        data: {
          msg1: "NBA I Love This Game!"
        },
        directives: { //注册局部指令：只在当前vm管理范围内有效
          "lower-text"(el,binding){   //es6写法   原本写法："lower-text": function(el,binding){}
            el.textContent = binding.value.toLowerCase()
          }
        }
      })
    
      new Vue({
        el: "#test2",
        data: {
          msg2: "Just Do It!"
        }
      })
    </script>

转载于:https://www.cnblogs.com/itzlg/p/11315835.html