Vue 指令

最新推荐文章于 2021-07-26 17:10:03 发布

前端-小鑫

最新推荐文章于 2021-07-26 17:10:03 发布

阅读量95

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_43876728/article/details/119000477

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

自带常用指令

v-text 相当于 innerText
v-html 相当于innerHTML
v-show 显示隐藏隐藏相当于css display：none 有节点
v-if 显示隐藏无节点
v-if v-else-if v-else 相当于 if else
v-for 循环遍历数组
v-bind绑定属性简写 :xx(属性值)
v-on 绑定方法 v-on:方法简写@

<template>
  <div>
    指令
    <input type="text" v-model="value1" />
    <div v-text="value0"></div>
    {{ value1 }}
    <div v-html="value2"></div>
    <div v-show="value3">是否显示 隐藏时会出现dom</div>
    <div v-if="value3">是否显示 隐藏时不会出现dom</div>
    <div v-if="value4">有值显示</div>
    <div v-else-if="!value4">无值不显示</div>
    <div v-for="(item, index) in value5" :key="index">{{ value5.$index }}</div>
    <!-- 简写::href=link -->
    <a v-bind:href="link">a</a>
    <!-- v-on:click="aa"等价于@click="aa" -->
    <div v-on:click="aa">v-on</div>
    <div @click="aa">v-on2</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value0: "aaaaa",
      value1: "",
      value2: "<div></div>",
      value3: false,
      value4: "测试",
      value5: [{ text: 2 }],
      link: "link",
    };
  },
  methods: {
    aa() {
      alert(2);
    },
  },
};
</script>

自定义指令 directives

directives三个参数

el 在这里是input元素
bind 绑定的信息绑定信息 1. v-自定义的指令 2.绑定值 v-自定义的指令=‘值’
vnode 虚拟dom节点

bind与inserted区别

共同点

dom插入都会调用，bind在inserted之前

不同点

bind 只调用一次,第一次绑定元素的时 inserted插入父节点
bind在inserted之前
bind 时父节点为 null
inserted 时父节点存在。
bind是在dom树绘制前调用，inserted在dom树绘制后调用
可以理解成 bind=>create inserted=>mounted

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    //对象写法
    Vue.directive('focus', {
        bind(el, bind, vnode) {
            console.log(el)//bind 只调用一次
        },
        update(el, bind, vnode) {
            //虚拟dom 重新渲染
        },
        inserted(el, bind, vnode) {
            el.focus()
        }
    });

    //函数写法
    /*
    el在这里是input元素
    bind绑定的信息  绑定信息  v-focus2:2.number='content'
    vnode 虚拟dom节点
    */
    Vue.directive('focus2', (el, bind, vnode) => {
        console.log(el, bind, vnode)
    });

    let dom = new Vue({
        el: '#app',
        data: {
        },
        directives: {  //自定义一个局部指令
            'aa': {  //设置字体颜色
                bind: function (el, bind, vnode) {
                    console.log(el, bind, vnode)
                }
            },
            //指令函数的简写：
            //function等同于将代码写入bind和update
            'bb': function (el, bind, vnode) {
                console.log(el, bind, vnode)
            }
        },
        template: `
            <div>  <input v-focus/> <input v-focus2/>  <input v-aa/>  <input v-bb/> </div>
       `
    })
</script>
</html>

前端-小鑫

关注

1
点赞
踩
0

收藏

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

自带常用指令 v-text 相当于 innerText v-html 相当于innerHTML v-show 显示隐藏隐藏相当于css display：none 有节点 v-if 显示隐藏无节点 v-if v-else-if v-else 相当于 if else v-for 循环遍历数组 v-bind绑定属性简写 :xx(属性值) v-on 绑定方法 v-on:方法简写@ <template> &l
复制链接

扫一扫

专栏目录