Vue 常用指令自定义指令

最新推荐文章于 2024-06-16 13:00:26 发布

熊熊很酷

最新推荐文章于 2024-06-16 13:00:26 发布

阅读量480

点赞数

分类专栏：笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_56350749/article/details/125797313

版权

笔记专栏收录该内容

28 篇文章 0 订阅

订阅专栏

v-bind, v-model

v-bind 为单向绑定: 数据只能从data流向页面
v-model 双向绑定: 数据不仅从data流向页面,还可以重页面流向data,
一般应用在表单类元素上,(如:input,select…)
v-model:value 可以简写成 v-model,因为v-model默认收集的就是value值

一般使用简写方式

v-on:xxx 或 @xxx 事件处理

<body>
    <div id="app">
        <!-- <button v-on:click="click">点我</button> 请输入： -->
        <!--简写 -->
        <button @click="click">点我</button> 请输入：
        <!--可传入参数,比如id值-->
        <button @click="click2($event,2132312321)">点我</button> 请输入：
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>

        var app = new Vue({
            el: '#app',
            data: {
                message: '我来了 vue',
                xiong: '男',
                studyList: ['马子哥', '电光马子', '神威']
            },
            methods: {
                click(event) {
                    console.log(event.target.innerText)
                    
                    alert(this.message);
                },
                click2(event,id) {
                    console.log(event,id)
                    alert(this.message);
                }
            }
        });
    </script>
</body>

使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名,如click;
事件的回调需要配置在methods对象中,最终会在vm上;
methods中配置的函数,不需要箭头函数!否则this就不是vm了;
methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或组件实例对象;
@click=“demo” 和 @click=“demo($event)” 效果一致,但后者可以传参;

事件修饰符 (可以连着写如click.prevent.stop)

prevent：阻止默认事件（常用）；event.preventDefault()

        <!--阻止默认事件 点击后不会跳转连接到百度-->
        <a href="http://www.baidu.com" @click.prevent="click">跳转到百度</a>

stop：阻止事件冒泡（常用）；event.stopPropagation()

        <!--阻止事件冒泡 点里面的按钮,外面盒子的click事件不会触发-->
        <div @click="click" style="height: 50px; background:blue">
            <button @click.stop="click">点我</button>
        </div>

once：事件只触发一次（常用）；

        <!--事件只触发一次 -->
        <button @click.once="click">点我</button>

capture：使用事件的捕获模式；
self：只有event.target是当前操作的元素时才触发事件；
passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

键盘事件

<!--按下回车 会触发回调函数 -->
<input type="text" @keyup.enter="showInfo">

Vue中常用的按键别名：
 	回车 => enter
 	删除 => delete (捕获“删除”和“退格”键)
 	退出 => esc
 	空格 => space
 	换行 => tab (特殊，必须配合keydown去使用)
 	上 => up
 	下 => down
 	左 => left
 	右 => right

Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

系统修饰键（用法特殊）：ctrl、alt、shift、meta
(1). 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2). 配合keydown使用：正常触发事件。

也可以使用keyCode去指定具体的按键（不推荐）

Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

v-if 和 v-show

v-if — 移除标签删除
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”
可以和 template 配合使用不破坏结构
v-show ---- 添加样式隐藏（display: none）
写法：v-show=“表达式”
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

【备注】使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到。

v-text

作用:像其所在的节点中渲染文本内容.
与插值语法的区别: v-text 会替换掉节点中的所有内容,{{xxx}} 不会.

<div v-text="name"></div>

v-html

作用: 向指定节点中渲染包含 html 结构和内容

与插值语法的区别:

v-html 会替换掉节点中的所有内容,{{xxx}} 不会.
v-html 可以识别 html 标签

v-html 有安全问题

在网页上动态渲染任意 html 是非常微信的,容易导致 xss 攻击
一定要在可信的内容上使用 v-html, 永远不要用在用户提交的内容上!

<div v-html="name"></div>

v-cloak (没有值)

本质上是一个特殊属性,Vue 实例创建完毕并接管容器后,会删除 v-cloak 属性
使用 css 配合 v-cloak 可以解决网速满时页面展示出 {{xxx}} 的问题

//[] 属性选择器
<style>
  [v-cloak] { 
  	display:none;
  }
</style>

<div id="root">
  <h2 v-cloak>{{name}}</h2>
</div>

v-once (没有值)

v-once 所在的节点在初次动态渲染后,就视为静态内容了
以后数据的改变不回引起 v-once 所在节点的更新,可以用于性能优化

  <h2 v-once>初始化的n值是: {{n}}</h2>

v-pre (没有值)

跳过 v-pre 所在节点的编译过程
可利用它跳过没有使用指令语法,没有使用插值语法的节点,会加快编译

  <h2 v-pre>Vue其实很简单</h2>

自定义指令

指令名是多个单词,用 - 间隔,如product-order ,不可驼峰命名


    <div id="root">
        <h2>当前值: <span v-text="n"></span></h2>
        <h2>n乘10: <span v-big="n"></span></h2>
        <button @click="n++">点我+1</button>

         <br/><br/>
        <input type="text" v-fbind:value="n">
    </div>
   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script type="text/javascript">

        var vm = new Vue({
            el: "#root",
            data: {
                n: 1
            },
            directives: {
                  // big函数何时会被调用？
     			 // 1.指令与元素成功绑定时（一上来） 2.指令所在的模板被重新解析时
                big(element,binding){
               		// console.log('big', this) //注意此处的 this 是 window
                    element.innerText = binding.value*10;
                },
                fbind: {
                    bind(element,binding){   // 指令与元素成功绑定时（一上来）
                        element.value = binding.value;
                    },
                    inserted(element,binding){  // 指令所在元素被插入页面时
                        element.focus();
                    },
                    update(element,binding) {  // 指令所在的模板被重新解析时
                        element.value = binding.value;
                    },
                }
            }
        });

    </script>

全局指令写法

    <script type="text/javascript">

        //全局指令
        Vue.directive('big',function(element,binding){
                    console.log(binding)
                    element.innerText = binding.value*10;
                })
        Vue.directive('fbind',{
                    bind(element,binding){
                        element.value = binding.value;
                    },
                    inserted(element,binding){
                        element.focus();
                    },
                    update(element,binding) {
                        element.value = binding.value;
                    },
                })

        var vm = new Vue({
            el: "#root",
            data: {
                n: 1
            }
        });

    </script>