Vue——指令及其使用

最新推荐文章于 2024-01-25 17:14:31 发布
最新推荐文章于 2024-01-25 17:14:31 发布
阅读量99 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44389562/article/details/109920506
版权

指令

以v-开头的自定义属性。

v-cloak(了解)

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

<style>
     [v-cloak] {
            display: none;
      }
</style>
<body>
    <div id='app'>
        <div v-cloak>{{msg}}</div>
        <div v-cloak v-once>{{msg}}</div>
    </div>
    <script>
        let options={
            el:'#app',
            data:{
                msg:'hello Vue'
            }
        }
        var vm=new Vue(options);
       
    </script>
</body>
v-text

填充纯文本，无闪动问题

v-html

填充html片段

1.存在安全问题

2.本网站内部数据可以使用，来自第三方的数据不可以用

v-pre

填充原始信息

显示原始信息，跳过编译过程（分析编译过程）

//v-text,v-html,v-pre的使用
<body>
  <div id="app">
    <div>{{msg}}</div>
    <div v-text='msg'></div>
    <div v-html='msg1'></div>
    <div v-pre>{{msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      1、v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
      2、v-html指令用于将HTML片段填充到标签中，但是可能有安全问题
      3、v-pre用于显示原始信息
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue',
        msg1: '<h1>HTML</h1>'
      }
    });
  </script>
</body>
v-once

只编译一次

显示内容之后不再具有响应式功能

<body>
  <div id="app">
    <div>{{msg}}</div>
    <div v-once>{{info}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      v-once的应用场景：如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提高性能。
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue',
        info: 'nihao'
      }
    });
  </script>
</body>
v-model

表单控件类型不同而不同

双向数据绑定

当视图发生变化时，数据会同步变化

当数据变化时，试图也会同步变化

限制在<input>、<select>、<textarea>中使用(表单控件)；

本质

<input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>

<body>
  <div id="app">
    <div>{{msg}}</div>
    <input type="text" v-bind:value="msg" v-on:input='handle'>
    <input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>
    <input type="text" v-model='msg'>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      v-model指令的本质

    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello'
      },
      methods: {
        handle: function(event){
          // 使用输入域中的最新的数据覆盖原来的数据
          this.msg = event.target.value;
        }
      }
    });
  </script>
</body>
v-on(★)

事件绑定

参数的传递
body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
            <button v-on:click='handle1'>点击1</button>
            <!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，
                 并且事件对象的名称必须是$event 
            -->
            <button v-on:click='handle2(123, 456, $event)'>点击2</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle1: function(event) {
                    console.log(event.target.innerHTML)
                },
                handle2: function(p, p1, event) {
                    console.log(p, p1)
                    console.log(event.target.innerHTML)
                    this.num++;
                }
            }
        });
    </script>
事件修饰符

.stop 阻止冒泡

.prevent 阻止默认行为

//使用
<a v-on:click.stop="handle">跳转</a>
<a v-on:click.prevent="handle">跳转</a>
按键修饰符

.enter 回车键

.delete 退出键

//使用
<input v-on:keyup.enter='submit'>
<input v-on:keyup.delete='handle'>
自定义修饰符

全局 config.keyCodes 对象

//使用  全局声明Vue.config.keyCodes.自定义名称 = 对应按键的值
Vue.config.keyCodes.f1 = 112
v-bind(☆)
属性绑定

属性绑定

v-bind:属性名(内置属性)

//v-bind指令用法
<a v-bind:href='url'>跳转</a>
<a :href='url'>跳转</a>
样式绑定
class样式绑定
  1. 对象形式绑定
  2. 数组形式绑定

对象语法

<div v-bind:class="{ active: isActive }"></div>

数组语法

<div v-bind:class="[activeClass, errorClass]"></div>


<div id="app">
      <!-- 类class操作 -->

      <!-- 1.对象形式 -->
      <div v-bind:class="{active:isActive,error:isError}">样式操作</div>
      <!-- 对象的简化形式 -->
      <div v-bind:class="objClasses"></div>

      <button @click="handle">切换</button>
     
      <!-- 2.数组形式 -->
      <div v-bind:class="[activeClass,errorClass]"></div>
		
    
    	<!--可以用三元表达式：-->
			<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
    
    
      <!-- 简化形式 -->
      <div v-bind:class="arrClasses"></div>
      <button @click="handle1">切换</button>

      <p>...........................</p>

</div>

<script>
 let options = {
        el: "#app",
        data: {
          isActive: true,
          isError: true,
          objClasses: {
            active: true,
            error: false,
          },
          activeClass: "active",
          errorClass: "error",
          arrClasses: ["active", "error"]
        },
        methods: {
          handle: function () {
            this.isActive = !this.isActive;
            this.isError = !this.isError;
            this.objClasses.error = true;
          },
          handle1: function () {
            this.activeClass = "";
          },
        },
      };
      var vm = new Vue(options);
</script>

//区别：

绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据

绑定数组的时候数组里面存的是data 中的数据

style样式绑定
  1. 对象形式绑定
  2. 数组形式绑定

对象语法

<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>

数组语法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

<body>
  <div id="app">
      <!-- 对象形式绑定-->
    <div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
    	<!-- 对象简化形式绑定-->
    <div v-bind:style='objStyles'></div>
      <!-- 数组形式绑定-->
    <div v-bind:style='[objStyles, overrideStyles]'></div>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定之内联样式Style：
      
    */
    var vm = new Vue({
      el: '#app',
      data: {
        borderStyle: '1px solid blue',
        widthStyle: '100px',
        heightStyle: '200px',
        objStyles: {
          border: '1px solid green',
          width: '200px',
          height: '100px'
        },
        overrideStyles: {
          border: '5px solid orange',
          backgroundColor: 'blue'
        }
      },
      methods: {
        handle: function(){
          this.heightStyle = '100px';
          this.objStyles.width = '100px';
        }
      }
    });
  </script>
</body>

分支结构

v-if
v-else
v-else-if
v-show
<body>
  <div id="app">
    <div v-if='score>=90'>优秀</div>
    <div v-else-if='score<90&&score>=80'>良好</div>
    <div v-else-if='score<80&&score>60'>一般</div>
    <div v-else>比较差</div>
    <div v-show='flag'>测试v-show</div>
    <button v-on:click='handle'>点击</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      分支结构

      v-show的原理：控制元素样式是否显示 display:none
    */
    var vm = new Vue({
      el: '#app',
      data: {
        score: 10,
        flag: false
      },
      methods: {
        handle: function(){
          this.flag = !this.flag;
        }
      }
    });
  </script>
</body>

v-if与v-show的区别

v-if控制元素是否渲染到页面 （条件渲染）

v-show控制元素是否显示（已经渲染到了页面）

v-for(★)

列表渲染

遍历数组

<li v-for='item in list'>{{item}}</li>

//item是数组的每一项元素,list整个数组

key的作用：帮助Vue区分不同的元素，从而提高性能

<li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li>

<li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li>

<body>
  <div id="app">
    <div>水果列表</div>
    <ul>
      <li v-for='item in fruits'>{{item}}</li>
      <li v-for='(item, index) in fruits'>{{item + '---' + index}}</li>
      <li :key='item.id' v-for='(item, index) in myFruits'>
        <span>{{item.ename}}</span>
        <span>-----</span>
        <span>{{item.cname}}</span>
      </li>

    </ul>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      循环结构-遍历数组
    */
    var vm = new Vue({
      el: '#app',
      data: {
        fruits: ['apple', 'orange', 'banana'],
        myFruits: [{
          id: 1,
          ename: 'apple',
          cname: '苹果'
        },{
          id: 2,
          ename: 'orange',
          cname: '橘子'
        },{
          id: 3,
          ename: 'banana',
          cname: '香蕉'
        }]
      }
    });
  </script>
遍历对象

v-for遍历对象 //value每个属性值, key每个属性, index每个索引

<div v-for='(value, key, index) in object'></div>

v-if和v-for结合使用

<div v-if='value==12' v-for='(value, key, index) in object'></div>

<body>
  <div id="app">
    <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    // 使用原生js遍历对象
    var obj = {
      uname: 'lisi',
      age: 12,
      gender: 'male'
    }
    for(var key in obj) {
      console.log(key, obj[key])
    }
    /*
      循环结构
    */
    var vm = new Vue({
      el: '#app',
      data: {
        obj: {
          uname: 'zhangsan',
          age: 13,
          gender: 'female'
        }
      }
    });
  </script>
</body>
Wyyyy1024
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE——使用钩子函数
mintsolace的博客
11-24 791
指令定义函数提供几个钩子函数 bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。 update：所在组件的VNode更新时调用，但可能发生在其孩子的VNode更新之前。指令的值可能发生了改变也可能没有。但可以通过比较更新前后的值来忽略不必要的...
Vue2.0——自定义指令
ling_xy的博客
08-10 2112
文章目录一、概念二、示例1.局部注册2.全局注册 钩子函数 钩子函数是在一个事件触发的时候，在系统级捕获到了他，然后做一些操作。一段用以处理系统消息的程序。“钩子”就是在某个阶段给你一个做某些处理的机会。 特点 1.是个函数，在系统消息触发时被系统调用 2.不是用户自己触发的 钩子函数的名称是确定的，当系统消息触发，自动会调用。 常见的钩子函数 vue的生命周期函数 vue的自定义指令 一、概念 vue2.x版本 除了内置指令 可以自定义指令 全局注册**directive**
Vue指令 绑定对象 结构
wushen的博客
02-04 1380
文章目录Vue 是什么指令v-cloakv-textv-htmlv-prev-once双向数据绑定v-modelmvvmv-onv-on事件函数中传入参数事件修饰符按键修饰符自定义按键修饰符别名v-bind绑定对象绑定class绑定对象和绑定数组 的区别绑定style分支结构v-if 使用场景v-show 和 v-if的区别循环结构v-forkey 的作用选项卡案例1、 HTML 结构2、 提供的...
Vue——内置指令
weixin_47412580的博客
08-27 1094
vue的内置指令的讲解
Vue基础——自定义指令
蜡笔不新的博客
11-27 324
Vue自定义指令局部和全局注册
vue——自定义指令，实现拖拽改变元素的宽度——技能提升
yehaocheng520的博客
07-14 2554
vue——自定义指令，实现拖拽改变元素的宽度——技能提升
Vue(二)——指令
黎小小的博客
01-20 209
一、指令 表达式的值除了可以出现内容中，也可以使用在其它位置，比如：属性。但是不能使用 {{}} 语法，而是需要 指令 在 vue 中，指令是一个带有 v- 前缀的属性，与普通属性不一样的地方在于，指令的值是引号括起来的 表达式，不同的指令有不同的作用，vue 内置了一些常用的指令，后期我们还可以自定义属于自己的指令 内容输出 循环 逻辑 属性绑定 事件 其它 二、内容输出 通过 {{}} 我们可以很方便的中模板中输出数据，但是这种方式会有一个问题，当页面加载渲染比较慢的时候，页面中会出现
vue —— h函数的学习与使用
最新发布
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
01-25 9331
介绍vue中的h函数及其使用
【Vue——自定义指令】Vue3的日期时间格式化
毛毛的博客
11-07 2735
Vue3使用自定义指令实现的日期时间格式化。
使用Vue实现简单计算器
10-15
在这个实例中，我们将利用Vue的核心特性——`v-model`指令，以及事件处理方法来构建计算器。 首先，让我们看看HTML结构。这是一个基本的HTML页面，包含两个输入框（`<input type="text" v-model="n1">` 和 `...
前端经典——Vue-tab-demo.rar
11-29
下面我们将详细探讨Vue.js及其在创建Tab组件中的应用。 Vue.js的核心特性包括数据绑定、组件系统和指令系统。数据绑定允许开发者通过声明式的方式将数据模型与DOM元素关联，使得视图和数据模型保持同步。组件系统则...
Vue基础知识记录
09-20
本篇文章将深入探讨Vue基础知识，涵盖指令、属性及其基本应用。 首先，我们要了解Vue的核心概念——数据绑定。Vue采用MVVM（Model-View-ViewModel）模式，通过双向数据绑定实现了视图与数据模型的同步。这主要依赖...
vue初学者资料基础篇和项目学习
03-19
学习Vuex的基本架构（state、mutations、actions、getters）及其使用场景。 3. **Vue.js项目实战——电商项目** - **项目结构**：了解一个标准Vue项目的目录结构，如`src`下的`components`、`views`、`assets`、`...
网页模板——vue.js弹出式音乐播放器特效代码.zip
11-23
这个"网页模板——vue.js弹出式音乐播放器特效代码"是基于Vue.js开发的一个网页应用示例，旨在展示如何在网页上实现一个具有弹出效果的音乐播放器。下面将详细探讨Vue.js及其在创建此类应用中的核心概念和技术。 1....
Vue中import与@import的区别及使用场景
WikY
12-15 8981
import script中的import是js的语法, 是在js中去引用css文件 (ES6)模块化规范：默认导入语法 import 接收名称 from '模块标识符’ 使用 导入组件 import Vue from 'vue' 导入js、css、vue、less等文件 import login from '../views/login/login.vue' import './styles/index.less' 导入第三方插件 import Vant from 'vant'
Vue2与Vue3中Ref绑定元素
WikY
06-18 4992
vue中ref绑定元素
Vue——slot、slot-scope、scope、v-slot详解
WikY
12-07 3479
slot vue2.6.0之前使用，现已经是被废弃的，2.6.0之后新增v-slot替代 用于标记往哪个具名插槽中插入子组件内容。 <body> <div id="app"> <slot-test>插槽的使用</slot-test> </div> </body> <script> Vue.component('slot-test',{ template
vue项目中使用组件库设置样式不生效的解决方法
WikY
12-19 2011
scoped 实现原理 实现组件的私有化，不对全局造成样式污染 ,我们使用scoped 作用：声明的样式只对当前组件生效 <style lang="less" scoped> .hambuger-btn { position: fixed; right: 0; width: 66px; height: 82px; display: flex; justify-content: center; align-items: center; background-co
vue3自定义指令使用
11-26
Vue3中的自定义指令可以通过`directive`函数来创建。下面是一个简单的例子： ```javascript // 注册一个全局自定义指令 `v-focus` const app = Vue.createApp({}); app.directive('focus', { // 当被绑定的元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值