Vue之常用指令介绍

最新推荐文章于 2024-05-06 08:56:15 发布

浅若清风爱

最新推荐文章于 2024-05-06 08:56:15 发布

阅读量1.1k

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/qq_43245746/article/details/89886341

版权

Vue.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

什么是指令

在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示
- 比如html页面中的属性 ```
  ``
比如在angular中以ng-xxx开头的就叫做指令
在vue中以v-xxx开头的就叫做指令
指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关DOM操作的绑定

vue中常用的v-指令演示

v-text:元素的InnerText属性,必须是双标签跟{{ }}效果是一样的使用较少
v-html: 元素的innerHTML
v-if : 判断是否插入这个元素,相当于对元素的销毁和创建
v-else-if
v-else
v-show 隐藏元素如果确定要隐藏, 会给元素的style加上display:none。是基于css样式的切换

 v-text 只能用在双标签中
 v-text 其实就是给元素的innerText赋值
 v-html 其实就是给元素的innerHTML赋值
 v-if 如果值为false,会留下一个<!---->作为标记，万一未来v-if的值是true了，就在这里插入元素
 如果有if和else就不需要单独留坑了
 如果全用上  v-if 相邻v-else-if 相邻 v-else 否则 v-else-if可以不用
 v-if和v-else-if都有等于对应的值，而v-else直接写
 v-if家族都是对元素进行插入和移除的操作
 v-show是显示与否的问题
 注意: 指令其实就是利用属性作为标识符,简化DOM操作,
  看：v-model="xxx"
  v-model 代表要做什么  xxx代表针对的js内存对象
  写在那个元素上，就对哪个元素操作

v-if和v-show的区别 (官网解释)

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-on的使用

处理自定义原生事件的,给按钮添加click并让使用变量的样式改变
普通使用 v-on:事件名="表达式||函数名"
简写方式 @事件名="表达式"

v-bind使用

给元素的属性赋值
- 可以给已经存在的属性赋值 input value
- 也可以给自定义属性赋值 mydata
语法在元素上 v-bind:属性名="常量||变量名"
简写形式 :属性名="变量名"

<div v-bind:原属性名="变量"></div>
<div :属性名="变量">
    
</div>

v-model

双向数据流（绑定）
- 页面改变影响内存(js)
- 内存(js)改变影响页面

v-bind 和 v-model 的区别?

input v-model="name"
- 双向数据绑定页面对于input的value改变，能影响内存中name变量
- 内存js改变name的值，会影响页面重新渲染最新值
input :value="name"
- 单向数据绑定内存改变影响页面改变
v-model: 其的改变影响其他 v-bind: 其的改变不影响其他
v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染

v-for的使用

基本语法 v-for="item in arr"
对象的操作 v-for="item in obj"
如果是数组没有id
- v-for="(item,index) in arr" :class="index"
各中v-for的属性顺序(了解)
- 数组 item,index
- 对象 value,key,index

v-click的使用

基本语法@click="事件名"
使用v-click简单的实现一个跑马灯的效果，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../vue.js"></script>
</head>

<body>
    <!-- 创建一个要控制的区域 -->
    <div id="app">
        <input type="button" value="浪起来" @click='lang'>
        <input type="button" value="低调" @click='low'>

        <h3>{{msg}}</h3>
    </div>

    <script>
        // 分析：
        // 1：给【浪起来】按钮，绑定一个点击事件 
        // 2.在按钮的事件处理函数中，写相关的业务逻辑代码，拿到msg字符串后，然后调用字符串的  substring（截取字符串）方法 把第一个字符截取出来，放到最后一个位置即可
        // 3.为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去
        var app = new Vue({
            // 注意  在app实例中  如果想要获取data上的数据 ，或者想要调用 methods 中的方法，必须通过 this.数据属性名  或 this.方法名  来进行访问  这里的this. 表示 我们new出来的 app实例对象
            el: '#app',
            data: {
                msg: '猥琐发育，别浪~~！',
                timer: null
            },
            methods: {
                lang() {
                  
                   if(this.timer != null) return
                    this.timer = setInterval(() => {
                        // 获取到头的第一个字符
                        var start = this.msg.substring(0, 1)
                        // 获取到 后面的所有字符
                        var end = this.msg.substring(1)
                        // 需要拼接得到新的字符串 并赋值给 this.msg
                        this.msg = end + start
                    }, 1000)


                    // 注意：app实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data 上同步到页面中去
                },
                low(){  // 停止定时器
                   clearInterval(this.timer) 
                }
            }
        })
    </script>
</body>

</html>