Vue基础----指令系统

最新推荐文章于 2024-09-11 15:33:18 发布
最新推荐文章于 2024-09-11 15:33:18 发布
阅读量779 收藏
点赞数
分类专栏： Vue框架笔记 文章标签： javascript 动画 css3 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bjsyc123456/article/details/121638981
版权

内容渲染指令

v-text

类似原生js的innerText

  • 改变了元素的内容但是读取不了html语法
  • 不能渲染成标签
<!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="./js/vue.js"></script>
    <script>
        window.addEventListener('load', function(e) {
            var vm = new Vue({
                el: '#app',
                data: {
                    message: '我是动态赋值的信息',
                    message1: '<a href="#">111</a>'
                }
            })

        })
    </script>
</head>

<body>
    <div id="app">
        <p v-text="message">xxx</p>
        <p v-text=message1>xxx</p>
    </div>
</body>

</html>

在这里插入图片描述

插值表达式:

vue提供的模板语法，解决v-text覆盖原有的文本内容的问题

  • 不可以读取html语法，渲染不成标签
<!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="./js/vue.js"></script>
    <script>
        window.addEventListener('load', function(e) {
            var vm = new Vue({
                el: '#app',
                data: {
                    message: '我是动态赋值的信息',
                    message1: '<a href="#">111</a>'
                }
            })

        })
    </script>
</head>

<body>
    <div id="app">
        <p>xxx----{{ message }}</p>
        <p>xxx----{{ message1 }}</p>
    </div>
</body>

</html>

在这里插入图片描述

v-html

类似原生js的innerHTML

  • 改变了元素的内容
  • 可以读取html渲染成标签
<!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="./js/vue.js"></script>
    <script>
        window.addEventListener('load', function(e) {
            var vm = new Vue({
                el: '#app',
                data: {
                    message: '我是动态赋值的信息',
                    message1: '<a href="#">111</a>'
                }
            })

        })
    </script>
</head>

<body>
    <div id="app">
        <p v-text="message">xxx</p>
        <p v-html=message1>xxx</p>
    </div>
</body>

</html>

在这里插入图片描述

属性绑定指令

基本用法：

  • 动态修改标签的属性值：v-bind:属性名="属性值"
  • 简写：:属性名="属性值"
  • 自定义属性也可以添加
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入Vue包 -->
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-bind:placeholder="message" :l-index="index">
    </div>
</body>
<script>
    window.addEventListener('load', function(e) {
        var vm = new Vue({
            el: '#app',
            data: {
                'index': 2,
                'message': '动态修改placeholder'
            }
        })
    })
</script>

</html>

在这里插入图片描述

绑定class属性：

  • 普通用法：:class="属性值"
  • 对象用法： :class="{ active: flag }" 当flag为true时class的属性值为active，当为false时没有。
  • 数组用法： :class="[class1,class2]" 两个类名都会渲染到标签
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入Vue包 -->
    <script src="./js/vue.js"></script>
    <style>
        .active {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
        
        .class1 {
            width: 50px;
            height: 50px;
            border: 5px solid black;
        }
        
        .class2 {
            background-color: brown;
        }
    </style>
</head>

<body>
    <div id="app">
        <div :class="{ active:flag }"></div>
        <div :class="[c1Name ,c2Name]"></div>
    </div>
</body>
<script>
    window.addEventListener('load', function(e) {
        var vm = new Vue({
            el: '#app',
            data: {
                flag: true,
                c1Name: 'class1',
                c2Name: 'class2'
            }
        })
    })
</script>

</html>

在这里插入图片描述

绑定style属性：

也可以使用数组用法
.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入Vue包 -->
    <script src="./js/vue.js"></script>

</head>

<body>
    <div id="app">
        <!-- :style="data中的key" -->
        <div :style="active"></div>
    </div>
</body>
<script>
    window.addEventListener('load', function(e) {
        var vm = new Vue({
            el: '#app',
            data: {
                // 定义一个对象  css数据 backgroundColor为大驼峰形式
                active: {
                    width: '100px',
                    height: '100px',
                    backgroundColor: 'red',
                }
            }
        })
    })
</script>

</html>

在这里插入图片描述

事件绑定指令

绑定事件语法：

v-on:click="methods中的函数"

简写：

@click="methods中的函数"

  • 可以传参数

  • 如果不传参数默认接收事件对象event

  • 如果传参数了之后还要使用事件对象event

      @click="函数名(参数1,$event)" // 参数2为事件对象

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入Vue包 -->
    <script src="./js/vue.js"></script>

</head>

<body>
    <div id="app">
        <button @click="btnClick('zhangsan',$event)">按钮</button>
    </div>
</body>
<script>
    window.addEventListener('load', function(e) {
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                btnClick(name, e) {
                    console.log(name);
                    console.log(e);

                }
            }
        })
    })
</script>

</html>

在这里插入图片描述

事件修饰符

修饰符作用
.stop 阻止单击事件继续传播
.prevent 提交事件不再重载页面
.capture 添加事件监听器时使用事件捕获模式 (内部元素触发的事件先在此处理，然后才交由内部元素进行处理)
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次

双向绑定指令

  • 不操作DOM的前提下快速获取表单的数据
  • 用户输入DOM中的数据，Vue的data中的数据也会随之改变
  • 修改data中的数据 ，DOM中的数据也会被修改
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入Vue包 -->
    <script src="./js/vue.js"></script>

</head>

<body>
    <div id="app">
        <input type="text" v-model="textValue">
        <button @click="btn1">按钮1</button>
        <button @click="btn2">按钮2</button>
    </div>
</body>
<script>
    window.addEventListener('load', function(e) {
        var vm = new Vue({
            el: '#app',
            data: {
                textValue: '',
            },
            methods: {
                btn1() {
                    console.log(this.textValue);
                },
                btn2() {
                    this.textValue = '哈哈哈'
                }
            }
        })
    })
</script>

</html>

在这里插入图片描述

双向数据绑定修饰符

修饰符作用示例
.number 自动将用户输入的值转换为数值类型 <input v-model.number="age">
.trim 自动顾虑用户输入的首位空白字符 <input v-model.trim="msg">
.lazy在change时而非input时更新<input v-model.lazy="msg">
B.Bz
关注
专栏目录
Vue基础-vue指令
Autumnxwq的博客
10-16 1080
Vue 基础指令
vue基础指令
陌尘吖的博客
01-27 304
vue基础命令 {{ msg }} 插入字符串，可以插入单个js表达式 v-once 一次性插值，当数据改变时，插值处的内容不会更新 v-bind 用于单向绑定数据，缩写：: v-html 插入html字符串，会将字符串作为html代码解析 v-if 指令将根据表达式的值的真假来插入或移除元素 v-elese-if 同v-if需跟在v-if后 v-else 需跟在v-els...
vue基础12（vue的指令系统）
weixin_30302609的博客
05-23 106
vue的指令系统 　　所谓指令系统，可以联想咱们的cmd命令行工具，只要我输入一条正确的指令，系统就开始干活了。 　　在vue中，指令系统，设置一些命令之后，来操作我们的数据属性，并展示到我们的DOM上。 　　接下来一一介绍我们的指令系统的用法。 1、条件渲染 一、v-if 表示条件渲染 在vue中，我们使用v-if指令，将当前的dom元素设置 <p v-if = 'sh...
vue指令系统
过客如期的博客
06-09 168
一，前言 1.vue的一个重要的知识点就是指令，是带有 v- 前缀的特殊 attribute。 2.指令 attribute 的值预期是单个 JavaScript 表达式，v-for除外。 二，常用指令 1.v-bind:为元素属性传递动态参数。 2.v-on: 绑定事件 3.v-for：列表渲染 4.v-if: 条件渲染 5.v-show,v-if :控制显隐 6.v-modal : 表单元素的双向绑定 三，指令缩写 1.v-bind 可以缩写为 : 2.v-on 可以缩写为@ ...
vue——指令系统
anmi3721的博客
09-09 217
　　指令系统，可以联想咱们的cmd命令行工具，只要我输入一条正确的指令，系统就开始干活了。 　　在vue中，指令系统，设置一些命令之后，来操作我们的数据属性，并展示到我们的DOM上。 　　在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统，以v-xxx所表示。如在angular中以ng-xxx开头的也叫做指令。 　　指令原理：指令中封装了一些DOM行为，结合属...
vue 指令系统的使用
dianshuochi1092的博客
07-22 84
所谓指令系统，大家可以联想咱们的cmd命令行工具，只要我输入一条正确的指令，系统就开始干活了。 在vue中，指令系统，设置一些命令之后，来操作我们的数据属性，并展示到我们的DOM上。 OK，接下来我们一一介绍我们的指令系统的用法。 v-if 指令 <div id="app"> <h2 v-if="show"> haha</h2> ...
3. vue 系统指令
ximingx
05-07 468
3. vue 系统指令 指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。 vue 中的指令按照不同的用途可以分为如下 6 大类： 内容渲染指令 属性绑定指令 事件绑定指令 双向绑定指令 条件渲染指令 列表渲染指令 Vue 的使用基于 HTML 的模板语法，允许您以声明方式将渲染的 DOM 绑定到底层组件实例的数据。所有 Vue 模板都是语法上有效的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。 指令是带有v-前缀的特殊属性。Vue 提供了许
vue3-clipboard:for Vue 3的剪贴板.js绑定
04-28
vue3剪贴板 Vue 3的绑定。 该存储库是Inndy用于Vue3的插件的端口。 安装 npm install --save @soerenmartius/vue3-clipboard 用法 全局导入v-clipboard指令 src/main.ts import { createApp } from 'vue' import...
学习vue-admin-template，优化了大量融入代码，添加中文注释
05-16
1. **Vue.js基础知识**：理解Vue的核心概念，如组件化、指令、计算属性、监听器和生命周期钩子函数，这是使用vue-admin-template的前提。 2. **Vue CLI**：Vue的命令行工具，用于快速初始化项目，构建开发环境和...
vue3-captcha（vue3行为验证码）
06-20
2. **自定义指令（Custom Directives）**：Vue3-Captcha可能使用自定义指令来绑定用户的行为事件，例如监听拖动滑块的动作，确保用户的交互符合预期的验证规则。 3. **模板语法**：Vue3的模板语法保持了与Vue2的向...
vue-admin-template-4.4.0.zip
03-01
1. **Vue.js**：Vue.js的核心特性包括组件化、虚拟DOM、响应式数据绑定和指令系统。它允许开发者通过声明式语法创建用户界面，并提供了丰富的生命周期钩子和插槽机制，便于理解和组织代码。 2. **前端框架**：Vue....
学习vue-element-admin，优化了大量融入代码，添加中文注释
05-16
- **指令系统**：如`v-if`、`v-for`、`v-bind`等，用于增强HTML元素的功能。 - **组件化**：Vue.js的核心就是组件，可以将复杂的UI拆分成可复用的组件。 2. **Element UI**： - **组件库**：Element UI提供了一...
2 Vue-指令系统
行走的皮卡丘
08-05 447
2 Vue-指令系统
Vue系统指令（一）
KennGum的博客
11-04 131
Vue系统指令（一）插值表达式 {{}}v-cloakv-textv-htmlv-bind：属性绑定机制v-on：事件绑定机制`v-on:click`：点击事件`v-on`的简写形式v-on的事件修饰符v-on的常见事件修饰符简单了解Node中的MVC与前端中的MVVM之间的区别 插值表达式 {{}} 数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值。 {{}}中每个绑定都只能包含单个表达式. <span>Message: {{ msg }}</span>
Vue指令系统
weixin_30394251的博客
06-19 96
Vue指令系统和computed // 常用，所有指令都是v-*的形式，指令系统控制着html标签的显示 v-text v-html // 解析html标签 v-if // 条件渲染 v-show // 切换 v-for // 遍历，指令优先级最高 v-bind // 绑定属性 简写:属性 v-on // 绑定事件 简写@事件 v-...
Vue指令系统（上部分）
zhang1339435196的博客
10-11 299
概念： 指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for )。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 ...
深入vue2.0源码系列: 指令的实现原理与实现方式
前端程序员、项目经理、人工智能博主
03-16 464
前言 Vue.js 2.0 中指令的实现原理是通过解析模板语法生成一个 AST（抽象语法树），然后通过遍历 AST 树为模板中的每个指令创建一个 Watcher 对象，当数据变化时，这些 Watcher 对象就会收到通知，并根据指令对应的更新函数对 DOM 进行更新。 实现示例 vue.js 2.0 中指令的实现方式可以分为两种：一种是内置指令，如 v-model、v-bind 等，这些指令是在 Vue.js 的编译阶段直接处理的；另一种是自定义指令，开发者可以通过 Vue.directive 方法自定义指
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 929
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
vue vue-grid-layout 代码
04-25
Vue是一种流行的JavaScript框架，用于构建用户界面。它采用了组件化的开发方式，使得开发者可以将页面拆分成多个独立的组件，每个组件负责自己的逻辑和样式。Vue具有简洁易学的语法和高效的性能，因此在前端开发中得到了广泛应用。 Vue-grid-layout是Vue的一个插件，用于实现网格布局。它提供了一个可拖拽和可调整大小的网格系统，使得开发者可以轻松地创建灵活的布局。通过使用vue-grid-layout，开发者可以将页面元素按照网格的形式进行排列，并且可以通过拖拽和调整大小来改变元素的位置和尺寸。 以下是一个简单的示例代码，展示了如何在Vue中使用vue-grid-layout： ```html <template> <div> <vue-grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true"> <div v-for="item in layout" :key="item.i" :data-grid="item"> {{ item.i }} </div> </vue-grid-layout> </div> </template> <script> import VueGridLayout from 'vue-grid-layout'; export default { components: { VueGridLayout }, data() { return { layout: [ { x: 0, y: 0, w: 2, h: 2, i: '1' }, { x: 2, y: 0, w: 4, h: 2, i: '2' }, { x: 6, y: 0, w: 2, h: 4, i: '3' } ] }; } }; </script> ``` 在上面的代码中，我们首先导入了vue-grid-layout插件，并将其注册为Vue的组件。然后，在模板中使用`vue-grid-layout`标签来创建一个网格布局容器。通过设置不同的属性，我们可以定义网格的列数、行高、是否可拖拽和调整大小等。在`vue-grid-layout`标签内部，我们使用`v-for`指令来遍历`layout`数组，并将每个元素渲染为一个网格项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值