Vue学习（二）：Vue指令汇总

最新推荐文章于 2022-09-18 16:55:13 发布
最新推荐文章于 2022-09-18 16:55:13 发布
阅读量110 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21439711/article/details/109649197
版权

Vue指令概念

指令的本质就是自定义属性，指令格式：以v-开始（比如v-cloak）

 

Vue指令汇总

 

 

v-cloak

插值表达式存在问题“闪动”，可以使用v-cloak解决这个问题，解决该问题的原理：先隐藏，替换好之后再显示最终的值

<!DOCTYPE html>
<head>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <div id="hello">
        <p v-cloak>{{msg}}</p>
    </div>
    <script>
        new Vue({
            el:'#hello',
            data() {
                return {
                    msg:'hi winter',
                }
            }
        })
    </script>
</body>
</html>

 

v-pre,v-text,v-html

  • v-text填充纯文（相比插值表达式更简单，没有闪动问题）
  • v-html填充html片段（存在安全问题，本网站内部数据可以使用，来自第三方的数据不可以使用）
  • v-pre填充原始信息（显示原始信息，跳过编译过程）
<!DOCTYPE html>
<head>
    <style></style>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <div id="hello">
        <p v-text="msg1">{{msg}}</p>
        <p v-html="msg1"></p>
        <p v-pre="msg">{{msg}}</p>
    </div>
    <script>
        new Vue({
            el:'#hello',
            data() {
                return {
                    msg1:'<h1>hi winter1</h1>',
                    msg:'<h1>hi winter</h1>',
                }
            }
        })
    </script>
</body>
</html>

 

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

 

v-model

在表单控件或者组件上创建双向绑定，所谓双向绑定就像下面的图，v-model的底层原理就是：属性绑定+事件绑定

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

Vue使用mvvm我们不需要关注viewModel是怎么实现的，他是Vue自己实现的，我们只要关注view和Model（负责存储数据）

所以在vue中数据（model）变化了，视图（view）就会改变，这个实现是vm层做的，vue会监听到数据变化映射到视图层

<!DOCTYPE html>
<head>
    <style></style>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <div id="hello">
        <p>{{msg}}</p>
        <input type="text"  v-model="msg">
    </div>
    <script>
        Vue.config.devtools = true;
        var vm = new Vue({
            el:'#hello',
            data:{
                msg:"ssss"
            }
        });
    </script>
</body>
</html>

 

v-click

  • 绑定事件监听器
<!DOCTYPE html>
<head>
    <style></style>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <div id="hello">
        <p @click='num++'>{{num}}</p>
        <p >{{num}}</p>
        <!--
            v-on：click可以简写为@click
            v-on:click='handleClick' 直接绑定事件函数名称,默认第一个参数是event（事件对象，隐式传递）
            v-on:click='handleClick()' 调用函数,可以传入参数,最后一个参数就是event（事件对象，显式传递）
           
        --->
        <button v-on:click='handleClick'>点击数字增加</button>   
        <button @click='handleClick()'>点击数字增加</button>
        <button @click='handleClick(123,123,$event)'>点击数字增加</button>
    </div>
    <script>
        Vue.config.devtools = true;
        var vm = new Vue({
            el:'#hello',
            data:{
                num:1
            },
            methods:{
                handleClick:function(){
                    this.num++;   // this就是vm(vue的实例对象)
                },
                handleClick:function(p,p1,event){
                   console.log(p,p1,event.target.tagName);  // 获取事件对象
                }
            }
        });
    </script>
</body>
</html>
  • 事件修饰符
    • .stop：阻止冒泡
    • .prevent：阻止默认行为
<!DOCTYPE html>
<head>
    <style></style>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <div id="hello">
       <div @click="handleDivClick">{{divValue}}
           <p @click="handlePClick">{{pValue}}
               <div v-on:click.stop="handleSpanClick">{{spanValue}}</div>
           </p>
           <!--
               利用v-on:click.prevent阻止默认行为发生
           -->
           <a href="http://www.baidu.com" v-on:click.prevent>百度</a>
       </div>
    </div>
    <script>
        Vue.config.devtools = true;
        var vm = new Vue({
            el:'#hello',
            data:{
                divValue:'div',
                pValue:'p',
                spanValue:'span'
            },
            methods:{
                handleDivClick:function(){
                    console.log(this.divValue);
                },
                handleSpanClick:function(){
                    console.log(this.spanValue);
                },
                handlePClick:function(){
                    console.log(this.pValue);
                }
            }
        });
    </script>
</body>
</html>
  • 按键修饰符
    • .delete：删除键
    • .enter：回车键
<!DOCTYPE html>
<head>
    <style></style>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <div id="hello">
        <p>name<input type="text" v-model="name" v-on:keyup.enter='submit'  v-on:keyup.delete='clear'></p>
        <p>password<input type="text" v-model="password" v-on:keyup.enter='submit' v-on:keyup.delete='clear'></p>
        <button type="submit" @click='submit'>提交</button>
    </div>
    <script>
        Vue.config.devtools = true;
        var vm = new Vue({
            el:'#hello',
            data:{
                name:'',
                password:''
            },
            methods:{
                submit:function(){
                    console.log(this.name,this.password);
                },
                clear:function(){
                    this.name = "";
                    this.password = "";
                }
            }
        });
    </script>
</body>
</html>
  • 自定义按键修饰符
    • Vue.keyCodes对象
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>自定义按键修饰符</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <input  type="text" v-on:keyup.aaa='handle' v-model='info'>
	</div>
  <script type="text/javascript">
    /*
      事件绑定-自定义按键修饰符
      规则：自定义按键修饰符名字是自定义的（aaa），但是对应的值必须是按键对event.keyCode的值
    */
    Vue.config.keyCodes.aaa = 65
		var vm = new Vue({
			el: '#app',
			data: {
        info:'hello'
			},
			methods: {
        handle:function(event){
          console.log(event.keyCode)
        }
			}
		})
	</script>
</body>
</html>

 

v-bind

  • 属性绑定
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>v-bind属性绑定</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
  <div id="app">
    /*
    v-bind:href可以缩写为 :href
    */
    <a :href="url">{{urlName}}</a>
    <a v-bind:href="url">{{urlName}}</a>
    <button @click="handleClick">点击修改url</button>
	</div>
  <script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
                url:"http://www.baidu.com",
                urlName:"百度"
			},
			methods: {
                handleClick:function(){
                  this.url = "http://www.hao123.com"
                  this.urlName="好123"
        }
			}
		})
	</script>
</body>
</html>
  • class样式绑定
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
  <title>v-bind属性绑定</title>
  <style>
    .active {
      width:100px;
      height: 100px;
      background-color: yellowgreen;
    }
    .error{
      color: red;
    }
  </style>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
  <div id="app">
    /*
        利用对象
    */
    <div v-bind:class="{active:isActive,error:isError}">test</div>
    /*
        利用数组
    */
    <div v-bind:class="[activeClass,errorClass]">test</div>
    <button @click="handleClick">切换属性是否展现</button>
	</div>
  <script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
              /*
                利用isActive的值在true和false之间进行切换
              */
                isActive:true,
                isError:true,
                activeClass:"active",
                errorClass:"error"
			},
			methods: {
               handleClick:function(){
                  this.isActive=!this.isActive;
                  this.isError=!this.isError;
                  this.activeClass == ""? this.activeClass ='active':this.activeClass ="";
                  this.errorClass == ""? this.activeClass ='error':this.errorClass =""
          
                }
			}
		})
	</script>
</body>
</html>
  • style样式处理
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
  <title>v-bind样式绑定</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <div v-bind:style="{width:widthStyle,height:heighStyle,backgroundColor:colorStyle}">test</div>
    <div v-bind:style="objStyle">test</div>
    <button @click="handleClick">修改样式</button>
  </div>
  <script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
                widthStyle:'100px',
                heighStyle:'100px',
                colorStyle:'red',
                objStyle:{
                  width:"100px",
                  height:"100px",
                  backgroundColor:"red"
                }
			},
			methods: {
                handleClick:function(){
                  this.widthStyle = "200px";
                  this.objStyle.width="200px"
                }
			}
		})
	</script>
</body>
</html>

 

v-show,v-if,v-else-if,v-else

v-if和v-show的区别：

  • v-if控制元素是否渲染到页面（visibility:hidden）
  • v-show控制元素是否展示（display:none）
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
  <title>v-bind属性绑定</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<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="isShow">v-show</div>
  </div>
  <script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
                score:50,
                isShow:false
			}
		})
	</script>
</body>
</html>

 

v-for

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
  <title>v-bind属性绑定</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <!--
      v-for = 'item in list'
    -->
   <li v-for='item in list'>{{item}}</li>
   <!--
      v-for = '(item,index) in list'
    -->
   <li v-for='(item,index) in student'>{{item.cname}}+'---'+{{index}}</li>
   <!--
      :key='item.id' v-for='(item,index) in list'
    -->
   <li :key='item.id' v-for='(item,index) in list'>{{item}}+'---'+{{index}}</li>
  </div>
  <script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
                list:["nianyuyu","winter"],
                student:[{
                   ename:'apple',
                   cname:'苹果'
                },{
                  ename:'banana',
                  cname:'香蕉'
                }]
			}
		})
  </script>
</body>
</html>

 

 

qq_21439711
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue-tippy：由Tippy.js支持的VueJS工具提示
02-06
Tippy.js的指令包装 文献资料 有关完整的v4文档，请访问 。 安装 npm install --save vue-tippy # or yarn add vue-tippy 用法 捆绑器（Webpack，汇总） import Vue from "vue" ; import VueTippy , { ...
Vue快速入门，基础知识点排查
ningsheng的博客
11-22 570
Vue基础Vue的安装及使用Vue的创建Vue的常用操作用户输入双向绑定（input输入的内容message会自动更新）绑定变量的参数值|绑定属性绑定函数监听事件过滤器单层过滤器多层过滤器两个缩写（熟练之后可以用）一般语法Vue的监听Vue组件（类似轮子：封装好的demo）父组件与子组件之间的通信Vue指令 Vue的安装及使用 1、在 Vue.js 的官网上直接下载 vue.min.js ，并用 script 标签引入。 等到应用需要越来越多的前端库和前端框架的时候，一个一个在HTML文件中引入会很不方便
vue深入响应式原理
tangren_wyx的博客
04-19 394
1. vue深入响应式原理 数据模型 —》 vm（创建的实例 new Vue()）中 的data选项 状态管理 什么叫做状态？什么叫做状态管理？ 我们使用一个数据去管理视图中的一个部分， 那么这条数据就叫做状态， 这种管理模式就叫做状态管理 对象的创建： 1. var obj = {} 2. var obj = new Object() 深入响应式原理： 1. 当视图模型（VM）中的数据模型（M）...
Vue入门学习（一）
m0_46616045的博客
01-19 226
1、Vue学习 1、起步 1.1、引入VUE的依赖 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 1.2、每个 Vue 应用都需要通过实例化 Vue 来实现 var vm = new Vue({ // 选项 }) 1.3、在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中： <div id = "v
引用线上vue.js
酸奶盖儿的博客
04-17 1360
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
Vue.js的使用
苦逼打工人的博客
05-10 1355
VUE属性的使用
vue经典面试题及答案汇总
06-03
vue经典面试题及答案汇总（请下载） Vue面试的注意事项： 1. 熟悉Vue的基本概念和特性，如组件、指令、生命周期等。 2. 熟悉Vue的常用API，如数据绑定、事件处理、计算属性等。 3. 熟悉Vue的路由和状态管理，如...
2019vue常用指令.rar
07-17
vue常用指令解析汇总，让你更清晰的了解指令，学习vue
vue常见面试题集合汇总
04-10
简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习； 双向数据绑定：保留了angular的特点，在数据操作方面更为简单； 组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着...
常见vue面试题汇总系列
02-04
还有哪些钩子函数参数,说出至少 4 种 vue 当中的指令和它的用法,vue 的双向绑定的原理是什么,vue生命周期的理解,vuex 的 getter 特性是什么, vuex 的 mutation 特性是什么,vue 中 ajax 请求代码应该写在组件的...
VUE 入门及应用 ( 一 ) 基本语法
yuanchun的知识整理
09-18 695
VUE 入门及应用 ( 一 ) 基本语法 扩展功能
vue中事件绑定
我不想说
04-09 523
事件另一种写法 一般我们事件是这么写 <div id="app"> <button @click="handleClick">提交</button> </div> <script> var vm=new Vue({ el:'#app', methods:{ ...
vue 中的事件绑定修饰符详解
qq_36958916的博客
11-13 318
<div id="root"> //普通点击事件可获取事件对象 <div @click="handleclick">button</div> //普通点击事件不可获取事件对象 <div @click="handleclick1()">button</div> //普通点击事件可获取事件对象 <div @click="handleclick2($event)">button</div> //阻止表单默认提交.
Vue的常用指令之事件绑定（v-on）
XLGKXSH的博客
08-12 883
Vue的常用指令之事件绑定（v-on） v-on：通过v-on去给指定的事件绑定一个处理函数 语法：<any v-on:eventName="处理函数的名字"></any> eg：<button v-on:click="handleClick">clickMe</button> 当触发click事件就回调用handleClick方法 注意：方法在定义...
vue click事件_复习之v-on指令 （监听事件指令）
weixin_39620001的博客
12-03 676
引入vue.js <!-- 引入vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>作用：可以监听 DOM 事件，并在触发时运行一些 JavaScript 代码。v-on指令简写：@ <div id="app"> ...
vue 点击一个按钮触发两个事件_vue 点击按钮触发另一个dom的click事件
weixin_42318815的博客
01-13 3006
手掌心直接用原生js操作dom了，办法比较笨，效果是实现了。 methods: { handleClick(tab, event) { console.log(tab, event); }, switchTab(){ this.boolea2 = false; } }, updat...
@click="handleClick"
chunlindian8111的博客
07-25 5380
方法里写的handleClick(id){} template上@click="handleClick" 方法取得的id会是event 而不是想要的id 要加个括号template上 @click="handleClick()" 到底需不需要加括号的话，一般...
vue组件通信，点击传值，动态传值（父传子，子传父）
热门推荐
Dreamer_xr的博客
10-23 2万+
vue说到组件通信，无非是父组件传子组件，子组件传父组件，跨级组件传值，同级组件传值，个人觉得，除了父子组件的传值，其余情况就可以用vuex来解决了，这篇先不说vuex，这里介绍父子组件传值。不会你打我！ 一、父组件传子组件，核心--props 下面是场景，点击传值给子组件 在这里触发 handleClick 点击事件，额外声明一个clickData，点击按钮将 inpMessage 的...
Vue的基本用法
qq_53907937的博客
11-18 772
目录 Vue的基本用法 模板语法 指令v-bind 指令v-on:click 指令v-model 条件渲染 列表渲染 网络请求 1.安装： 2.引入（main.js中）： 3.使用： Vue的基本用法 Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用
bash: vue-V: command not found
最新发布
12-20
根据提供的引用内容，报错"bash: vue: command not found"是因为在执行"vue -V"命令时，系统无法找到vue命令。而引用中的"$ npm install vue -g"命令是用来全局安装vue的。 为了解决"bash: vue: command not found...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_21439711

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值