Vue指令

内容渲染指令

v-text、{{}}、v-html

属性绑定指令

v-bind

事件绑定指令

v-on

双向绑定指令

v-model

条件渲染指令

v-show、v-if、v-else-if、v-else

列表渲染指令

v-for

Vue指令

指令（Directives）是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构，vue中的指令按照不同的用途分为以下6大类：(指令是vue开发中最基础、最常用、最简单的知识点)。

内容渲染指令

v-text、{{}}、v-html

v-text：

能够渲染内容但其缺点会覆盖元素内部原有的内容。

{{ }}：

专门用来解决 v-text 会覆盖文本内容的问题，该语法的专业名称是插值表达式(Mustache)。在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！注意：插值表达式只能用在元素的内容节点上，不能用在元素的属性节点上！

在vue提供的模板渲染语法中，除支持绑定简单的数据值之外，还支持JavaScript表达式的运算：

{{number + 1}} //数值运算
{{ok ? 'YES' : 'NO'}}//三元运算
{{message.split('').reverse().join('')}}//函数运算

举个例子：

<body><div class="root"><div>{{name}} 的反转结果为：{{name.split('').reverse().join('')}}</div></div><script src="/Vue.js/vue.min.js"></script><script>Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'.root',data:{name:'这是一个div'}})</script>
</body>

v-html：

v-text指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素，则需要借助 v-html 这个指令！该指令可以把带有标签的字符串，渲染成真正的HTML内容。

属性绑定指令

v-bind

v-bind：

在vue中，可以使用 v-bind: 指令，为元素的属性动态绑定值，也可简写为英文的 : 即可。

在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号

<body><div class="root"><div :title="'div'+index">这是一个div</div></div><script src="/Vue.js/vue.min.js"></script><script>Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'.root',data:{index:3}})</script>
</body>

事件绑定指令

v-on

v-on：

vue提供了 v-on 事件绑定指令，用来辅助程序员为DOM元素绑定事件监听，案例如下：

<body><div class="root"><p>count的值是：{{count}}</p><button v-on:click="addCount">+1</button><button v-on:click="subCount">-1</button></div><script src="/Vue.js/vue.js"></script><script>Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示const vm = new Vue({data: {count: 0},// methods 的作用就是定义事件的处理函数methods: {addCount () {vm.count += 1},subCount(){// vm === thisthis.count-=1}}})vm.$mount('.root')</script>
</body>

当然我们在事件绑定的时候也可以进行传参，如下：这样点击事件addCount的步长就为2，即默认点击一下按钮增加2。

因为 v-on 事件绑定事件在vue开发中使用频繁，所以也提供了一种简写形式 @ ，如下：

注意：原生 DOM 对象有 onclick、oninput、onkeyup等原生事件，替换为 vue 的事件绑定形式后，分别为：v-on:click、v-on:input、v-on:keyup。

Vue提供了内置变量，当我们传递参数的时候，也会传入 $event(当前触发的事件)，它就是原生的DOM事件对象 e ，View视图里面固定写法是 $event ，但是函数形参里面，可以简写为 e ，如下举例：

<body><div class="root"><p>count的值是：{{count}}</p><button @click="addCount(1,$event)">+1</button></div><script src="/Vue.js/vue.js"></script><script>Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示const vm = new Vue({data: {count: 0},// methods 的作用就是定义事件的处理函数methods: {addCount (n,e) {vm.count += nif(vm.count % 2 == 0){e.target.style.backgroundColor = 'red'}else{e.target.style.backgroundColor = ''}}}})vm.$mount('.root')</script>
</body>

总结：

1）使用v-on:xxx 或 @xxx 绑定事件。其中 xxx 是事件名。

2）事件的回调需要配置在methods对象中，最终会在vm上。

3）methods中配置的函数，不需要箭头函数！否则this就不是vm了

4）methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象

5）@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参。

事件修饰符：

在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。因此vue提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常见如下：

事件修饰符	说明
.prevent	阻止默认行为(例：阻止a链接跳转，阻止表单的提交)
.stop	阻止事件冒泡
.capture	以捕获模式触发当前的事件处理函数
.once	绑定的事件只触发1次
.self	只有在 event.target 是当前元素自身时触发事件处理函数

.prevent：阻止默认行为（常用），案例如下：

<body><div id="root"><a href="https://www.baidu.com" @click.prevent="stop">跳转到百度</a></div><script src="/Vue.js/vue.js"></script><script>Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'#root',data:{},methods: {stop(e){// e.preventDefault()console.log('阻止事件发生');}}})</script>
</body>

.stop：阻止事件冒泡（常用），案例如下：

<body><div id="root"><div style="height: 100px;background-color: aqua;padding-left: 100px;line-height: 100px;" @click="divHandler"><button @click.stop="btnHandler">按钮</button></div></div><script src="/Vue.js/vue.js"></script><script>Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'#root',data:{},methods: {divHandler(){console.log('divHandler');},btnHandler(){console.log('btnHandler');}}})</script>
</body>

.once：事件只触发一次（常用），案例如下：

<body><div id="root"><button @click.once="showsay">点击我弹窗</button></div><script src="/Vue.js/vue.js"></script><script>Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示const vm = new Vue({data:{},methods: {showsay(){alert('Hello World')},}})vm.$mount('#root')</script>
</body>

按键修饰符：

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符

<body><div id="root"><!-- 为键盘相关的事件添加按键修饰符 --><input type="text" @keyup.esc="clearInput" @keyup.enter="enterAjax"></div><script src="/Vue.js/vue.js"></script><script>Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'#root',data:{},methods: {//清屏(退出)按键clearInput(e){e.target.value = ''console.log('鼠标按键执行了');},//回车按键enterAjax(e){e.target.value = ''console.log('触发了enterAjax了');}}})</script>
</body>

总结：

1）Vue中常见的按键别名：

回车=》enter

删除=》delete（捕获“删除”和“退格”键）

退出=》esc

空格=》space

换行=》tab

上=》up、下=》down、左=》left、右=》right

2）Vue未提供别名的按键，可以使用按键的原始key值去绑定，但注意要转为kebab-case(短横线命名 )

3）系统修饰键（用法特殊）：ctrl、alt、shift、meta

(1)配合keyup使用：按下修饰符的同时，再按下其他键，随后释放其他键，事件才被触发

(2)配合keydown使用：正常触发事件

4）也可以使用keyCode去指定具体的按键（不推荐）

5）Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

双向绑定指令

v-model

v-model：

vue提供了v-model双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单的数据。案例如下：

<body><div id="root"><div>用户的名字是：{{name}}</div><p>v-model：双向数据绑定</p><input type="text" v-model="name"><br><p>:value：input自带属性</p><input type="text" :value="name"></div><script src="/Vue.js/vue.js"></script><script>Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'#root',data:{name:'张三'},})</script>
</body>

注意：v-model 指令只能用在表单元素中，即能与数据进行交互的地方。比如：input输入框、textarea、select等，举例如下：

<body><div id="root"><select v-model="city"><option value="">请输入城市</option><option value="1">上海</option><option value="2">北京</option><option value="3">深圳</option><option value="4">苏州</option></select></div><script src="/Vue.js/vue.js"></script><script>Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'#root',data:{city:''}})</script>
</body>

v-model指令的修饰符：

为了方便对用户输入的内容进行处理，vue为v-model指令提供了3个修饰符，分别如下所示：

修饰符	作用	示例
.number	自动将用户的输入值转为数值类型	<input v-model.number='age' />
.trim	自动过滤用户输入的首尾空白字符	<input v-model.trim='msg' />
.lazy	在“change”时而非“input”时更新	<input v-model.lazy='msg' />

.number修饰符讲解：未加修饰符输入的结果是拼接，加了修饰符结果是数值运算。

<body><div id="root"><p>未加 .number 修饰符的结果：</p><input type="text" v-model="n1"> + <input type="text" v-model="n2"> = <span>{{ n1 + n2 }}</span><br><p>加 .number 修饰符的结果：</p><input type="text" v-model.number="m1"> + <input type="text" v-model.number="m2"> = <span>{{ m1 + m2 }}</span></div><script src="/Vue.js/vue.js"></script><script>Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'#root',data:{n1:1,n2:2,m1:1,m2:2}})</script>
</body>

.trim：自动过滤用户输入数据首尾产生的空格。

<body><div id="root"><p>没加 .trim 修饰符的结果</p><input type="text" v-model="name"><button @click="showName">获取用户名</button><p>加 .trim 修饰符的结果</p><input type="text" v-model.trim="name1"><button @click="showName1">获取用户名</button></div><script src="/Vue.js/vue.js"></script><script>Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'#root',data:{name:'张三',name1:'李四'},methods: {showName(){console.log(`用户名是："${this.name}"`);},showName1(){console.log(`用户名是："${this.name1}"`);}}})</script>
</body>

.lazy：在“change”时而非“input”时更新。

<body><div id="root"><p>未加 .lazy 修饰符的结果</p><input type="text" v-model="name"><p>加 .lazy 修饰符的结果</p><input type="text" v-model.lazy="name1"></div><script src="/Vue.js/vue.js"></script><script>Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'#root',data:{name:'张三',name1:"李四"},})</script>
</body>

条件渲染指令

v-show、v-if、v-else-if、v-else

v-if、v-show：

条件渲染指令是用来辅助开发者按需控制DOM的显示和隐藏。条件渲染指令有如上两个：两者达到的效果是相同的，如下：

<body><div id="root"><div v-if="flag">这是用v-if隐藏的div</div><div v-show="flag">这是用v-show隐藏的div</div></div><script src="/Vue.js/vue.js"></script><script>Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'#root',data:{// 如果flag为true，则显示被控制的元素；如果flag为false，则隐藏被控制的元素flag:true}})</script>
</body>

如上图，虽然两者达到的效果相同，但是还是有一定区别的，如下解释：

v-if 原理：每次动态创建或移除元素，实现元素的显示和隐藏。(消耗资源)

如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时v-if性能更好。

v-show 原理：动态为元素添加或移除 display:none 样式，来实现元素的显示和隐藏

如果要频繁的切换元素的显示状态，用v-show性能会更好。

总结：在面试中，面试官可能会问你v-if与v-show的区别以及适用条件，但在实际开发中，绝大多数情况下，不用考虑性能问题，直接适用v-if就好了！！！

v-else、v-else-if：

顾名思义，v-else与v-else-if充当v-if的else块和else-if块，该两个指令必须配合 v-if 指令一起使用，否则它们将不会被识别！

<body><div id="root"><div v-if="type === 'A'">优秀</div><div v-else-if="type === 'B'">良好</div><div v-else-if="type === 'C'">及格</div><div v-else>差</div></div><script src="/Vue.js/vue.js"></script><script>Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'#root',data:{type:'A'}})</script>
</body>

列表渲染指令

v-for

v-for：

vue提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for指令需要使用 item in items 形式的特殊语法。其中：items是待循环数组；item是被循环的每一项。当然v-for指令还支持可选的第二个参数，即当前项的索引。语法格式为：(item,index) in items ，注意：v-for指令中的item项和index索引都是形参，可以根据需要改名。注意：只要用到 v-for 指令，那么一定要绑定一个 :key 值，而且尽量把 id(具有唯一性) 作为key值，官方对key的值类型是有要求的：字符串或数字类型。案例如下：

<body><div id="root"><table class="table table-bordered table-hover table-striped"><thead><th>索引</th><th>ID</th><th>姓名</th></thead><tbody><!-- key的值千万不能重复，否则终端会报错：Duplicate keys detected --><!-- 这也就是为什么不能用name作为key值，因为name的值有可能重复 --><tr v-for="(item,index) in list" :key="item.id" :title="item.name"><td>{{ index }}</td><td>{{ item.id }}</td><td>{{ item.name }}</td></tr></tbody></table></div><script src="/Vue.js/vue.js"></script><script>Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示new Vue({el:'#root',data:{list:[{id:1,name:'张三'},{id:2,name:'李四'},{id:3,name:'王五'},{id:4,name:'王五'}]}})</script>
</body>

key值的注意事项：

1）key的值只能是字符串或数字类型

2）key的值必须具有唯一性（即：key的值不能重复）

3）建议把数据项id的属性的值作为key的值（因为id属性的值具有唯一性）

4）使用index的值当作key值是没有任何意义的（因为index的值不具有唯一性）

5）建议使用v-for指令时一定要指定可以的值（即提升性能又能防止列表状态紊乱）

Vue--》 Vue六大基础指令使用方法相关推荐

【Vue】v- xxx 基础指令
文章目录 v- xxx 基础指令 1.v-text 文本指令 2.v-html 标签指令 3.v-on 事件指令实战:计数器补充 4.v-show 图片指令 5.v-if 条件指令 6.v-bin ...
【Vue系列1】—— Vue入门和基础指令
点赞多大胆,就有多大产!开源促使进步,献给每一位技术使用者和爱好者! 干货满满,摆好姿势,点赞发车 ** 这是Vue框架的第一篇,也不说多重要,掌握的必要性这些了,懂的都懂,直接干货怼起来! ** 学 ...
vue快速复制快捷键_vue快捷键与基础指令详解
v-bind可以简写成 : → v-on:click可以写成@click v-if实例可以通过对对象操作条件来实现想要展示的效果现在你看到我了天气炎热 new Vue({ el: &quo ...
vue入门（一）搭建vue项目，基础显示，指令
之前接触过vue,但是一直不是十分清晰,学的云里雾里,最近打算再次系统的整理一下,重新入门.还是根据vue官方文档一步一步的来,但是是属于简化的那种,会把我的学习过程都记录下来. 下一篇:vue入门( ...
vue脚手架_基础API、Vue基本概念、vue-cli 脚手架、vue指令
vue脚手架_基础API 安装:vue-devtools 学习和调试vue必备之利器 - 官方插件安装: 打开Chrome浏览器 =>点击浏览器右上角小图标,按图示操作 2.进入扩展程序菜单 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch...
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
vue基础1--脚手架的使用与vue基础指令
脚手架的使用与vue基础指令安装 vue-devtools 安装vscode插件 1. Vue基本概念 1.1 Vue是什么 1.2 Vue学习的方式 2. @vue/cli脚手架 2.1 @vue ...
[vue] vue性能的优化的方法有哪些？
[vue] vue性能的优化的方法有哪些? Vue 项目性能优化 - 实践指南(网上最全 / 详细) 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM ...

Vue--》 Vue六大基础指令使用方法

Vue指令

内容渲染指令

v-text、{{}}、v-html

属性绑定指令

v-bind

事件绑定指令

v-on

双向绑定指令

v-model

条件渲染指令

v-show、v-if、v-else-if、v-else

列表渲染指令

v-for

Vue--》 Vue六大基础指令使用方法相关推荐

最新文章

热门文章