Vue 常用指令(上)

简介: Vue 常用指令(上)

Vue 常用指令

扩展了html标签的功能、大部分的指令的值是js的表达式

取代DOM操作

v-text和 v-html

很像innerText和innerHTML

  • v-text:更新标签中的内容
  • v-text和插值表达式的区别
  • v-text 更新整个标签中的内容
  • 插值表达式: 更新标签中局部的内容
  • v-html:更新标签中的内容/标签
  • 可以渲染内容中的HTML标签
  • 注意:尽量避免使用,容易造成危险 (XSS跨站脚本攻击)
<div id="app">
        <!-- v-text指令的值会替换标签内容 -->
        <p>{{str}}</p>
        <p v-text="str"></p>
        <p v-text="str">我是p标签中的内容</p>
        <p v-text="strhtml">我是p标签中的内容</p>
        <p v-html="str"></p>
        <!-- v-html指令的值(包括标签字符串)会替换掉标签的内容 -->
        <p v-html="strhtml">我是p标签中的内容</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                str: 'abc',
                strhtml: '<span>content</span>'
            }
        });
    </script>
复制代码

v-if 和 v-show

作用:根据表达式的bool值进行判断是否渲染该元素

<div id="app">
        <!-- 如果isShow的值是true ,就显示p标签 -->
        <p v-if="isShow">我是p标签中的内容</p>
        <p v-show="isShow">我是p标签中的内容</p>
        <!-- 如果标签显示与隐藏切换频繁, 就使用v-show 
            v-show本质是通过修改标签的display值
        -->
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                isShow: false
            }
        });
    </script>
复制代码

v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。

因此,如果需要非常频繁地切换,则使用 v-show 较好;

如果在运行时条件很少改变,则使用 v-if 较好。

v-on

  • 作用:使用 v-on 指令绑定 DOM 事件,并在事件被触发时执行一些 JavaScript 代码。
  • 语法: @事件名.修饰符 = "methods中的方法名"
  • 注意: $event 可以传形参
<div id="app">
        <!-- v-on.xx事件名='当触发xx事件时执行的语句' -->
        <!-- 执行一段js语句:可以使用data中的属性 -->
        <button v-on:click="count += 1 ">增加 1</button>
        <!-- v-on的简写方法 -->
        <button @click="count += 1">增加 1</button>
        <!-- 执行一个方法 -->
        <button @click="add">增加 1</button>
        <!-- 执行一个方法、这种写法可以传形参 -->
        <button @click="fn1(count)">执行fn1方法</button>
        <!-- 执行一个方法、这种写法可以传形参,特殊的形参$event -->
        <button @click="fn2($event)">执行fn2方法</button>
        <hr>
        <!-- 和v-for结合使用 -->
        <button @click="fn3(index)" v-for="(item, index) in items">执行fn3方法</button>
        <!-- v-on修饰符 如 once: 只执行一次 -->
        <button @click.once="fn4">只执行一次</button>
        <p>上面的按钮被点击了 {{ count }} 次。</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                count: 0,
                items: ['a', 'b', 'c']
            },
            methods: {
                add: function() {
                    this.count += 1;
                },
                fn1: function(count) {
                    console.log(count);
                    console.log('fn1方法被执行');
                },
                fn2: function(e) {
                    console.log(e);
                    console.log('fn2方法被执行');
                },
                fn3: function(index) {
                    console.log(index);
                    console.log('fn3方法被执行');
                },
                fn4: function() {
                    console.log('fn4方法被执行了');
                }
            }
        });
    </script>
复制代码
  • 修饰符
  • .once - 只触发一次回调。
  • .prevent - 调用 event.preventDefault()

简写: @事件名.修饰符 = 'methods中的方法名'

v-for

根据一组数组或对象的选项列表进行渲染。

v-for 指令需要使用 item in items 形式的特殊语法,

items 是源数据数组 /对象

当要渲染相似的标签结构时用v-for

<!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>
    </head>
    <body>
        <div id="app">
            <!-- v-for作用:列表渲染,当遇到相似的标签结构时,就用v-for去渲染
        v-for="元素 in 容器(数组和对象)"
        v-for="数组中的元素 in data中的数组名"
        v-for="对象中的属性值 in data中的对象名"
      -->
            <!-- 数组 -->
            <p v-for="item in list">{{item}}</p>
            <hr>
            <p v-for="(item,index) in list">{{item}}----{{index}}</p>
            <!-- (v,i) in 数组
        v:数组中的每个元素
        i:数组中元素的下标
      -->
            <hr>
            <!-- 对象 -->
            <!-- (v,k,i)in 对象
        v:值
        k:键
        i:对象中每对key-value的索引 从0开始
        注意: v,k,i是参数名,见名知意即可!
      -->
            <p v-for="value in per">{{value}}</p>
            <hr>
            <p v-for="(value,key) in per">{{value}}----{{key}}</p>
            <hr>
            <p v-for="(value,key,i) in per">{{value}}----{{key}}--{{i}}</p>
        </div>
        <script src="./vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    list: ['a', 'b', 'c'],
                    per: {
                        name: '老王',
                        age: 38,
                        gender: '男'
                    }
                },
                methods: {
                }
            })
        </script>
    </body>
</html>
复制代码

注意: 在使用v-for时,要把一个唯一值赋值给:key属性(通常是数组的index或者数据的id)

<div id="app">
        <!-- v-for 
            key属性: 值通常是一个唯一的标识
            key是一个可选属性
            养成好习惯:建议在写v-for时 设置:key="唯一值"
        -->
        <ul>
            <li v-for="(item,index) in list" :key="index">{{item}}---{{index}}</li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                list: ['a', 'b', 'c']
            },
            methods: {
            }
        });
    </script>
复制代码

v-bind

作用: 可以绑定标签上的任何属性。

绑定src和id属性

<div id="app">
        <!-- data中的属性值会替换为标签的属性值 -->
        <img v-bind:src="src" />
        <p v-bind:id="idValue">内容</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                src: './logo.png',
                idValue: 'b'
            }
        });
    </script>
复制代码

绑定class类名

对象语法和数组语法

对象语法

如果isActive为true,则返回的结果为 <div class="active"></div>

.active {
            color: red;
 }
复制代码
<div id="app">
        <div v-bind:class="{active: isActive}">
            hei
        </div>
        <button @click="changeClassName">点击切换类名</button>
    </div>
复制代码
<script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: true
            },
            methods: {
                changeClassName: function() {
                    this.isActive = !this.isActive;
                }
            }
        });
    </script>
复制代码
数组语法

渲染的结果 <div class="active text-danger"></div>

<div v-bind:class="[activeClass, dangerClass]">
    hei
</div>
  <script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
          activeClass: 'active',
            dangerClass: 'text-danger'
        }
    });
</script>
复制代码

绑定style

对象语法和数组语法

对象语法

渲染的结果

<div id="app">
        <div v-bind:style="{color: redColor, fontSize: font18 + 'px'}">
            文本内容
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                redColor: 'red',
                font18: 18
            }
        });
    </script>
复制代码
数组语法
<div v-bind:style="[color, fontSize]">abc</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            color: {
                color: 'red'
            },
            fontSize: {
                'font-size': '18px'
            }
        }
    });
</script>
复制代码

简化语法

<div v-bind:class="{active: isActive}">
</div>
<!-- 可以简化为 :,简化语法更常用 -->
<div :class="{active: isActive}">
</div>


相关文章
|
4天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
55 1
|
3月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
515 0
|
3月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
2月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
94 0
|
2月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
221 1
|
3月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
356 17
|
3月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
197 1
|
3月前
|
JavaScript API 开发者
Vue框架中常见指令的应用概述。
通过以上的详细解析,你应该已经初窥Vue.js的指令的威力了。它们是Vue声明式编程模型的核心之一,无论是构建简单的静态网站还是复杂的单页面应用,你都会经常用到。记住,尽管Vue提供了大量预定义的指令,你还可以创建自定义指令以满足特定的需求。为你的Vue应用程序加上这些功能增强器,让编码变得更轻松、更愉快吧!
67 1
|
3月前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中,实现文件批量下载是常见需求。例如文档管理系统或图片库应用中,用户可能需要一次性下载多个文件。本文介绍了三种技术方案:1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载;2) 借助后端接口完成文件压缩与传输;3) 使用`StreamSaver`解决大文件下载问题。同时,通过在线教育平台的实例详细说明了前后端的具体实现步骤,帮助开发者根据项目需求选择合适方案。
269 0
|
3月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
125 0