Vue中哪些基本指令的使用方法最常见？

本文共计2532个文字，预计阅读时间需要11分钟。

Vue基本指令+1. 差值表达式+又称插值表达式/文本差值+语法：{{ 表达式 }}+差值表达式+--div id=apph1>{{ name }}{{ jxxin.age }}{{ jxxin.addr }} Vue基本指令

1.差值表达式

又叫声明式渲染/文本差值

语法：{{表达式}}

<!-- 差值表达式 --> <div id="app"> <h1>{{name}}</h1> <h1>{{jxxin.age}}</h1> <h1>{{jxxin.addr}}</h1> </div> <!-- ----------------------------------------------------------- --> <script type="text/javascript"> var vm=new Vue({ el:"#app", data:{ name:"xiaoming", jxxin:{ age:"56", addr:"云南的好玩" } } });

vue指令 v-bind

vue指令实质：给特殊的html标签属性，特点v-开头

语法：v-bind：属性名

<div id="app2"> <a v-bind:href="url">点击我跳转</a> </div> <script type="text/javascript"> var vm=new Vue({ el:"#app2", data:{ url:'cn.vuejs.org/' } }); </script>

v-bind绑定class

<style> .dom { width: 100px; height: 100px; border: 1px solid black; border-radius: 5px; background-color: red; } </style> <div id="app3"> <div v-bind:class="sty"></div> </div> <script type="text/javascript"> var vm = new Vue({ el: "#app3", data: { sty:"dom" } }); </script>

vue指令 v-text和v-html

作用：给目标标签的更新innerText/innerHTML

语法：v-text='vue变量'

​ v-html='vue变量'

注意：它会覆盖差值表达式

<div id="app"> <h1>{{name}}</h1> <h1>{{jxxin.age}}</h1> <h1 v-html='str'>{{jxxin.addr}}</h1> <h1 v-text='str'>我有值的</h1> </div> <script type="text/javascript"> var vm=new Vue({ el:"#app", data:{ name:"xiaoming", str:'我要替换你的值', jxxin:{ age:"56", addr:"云南的好玩" } } }); </script>

vue指令 v-on

作用：给标签绑定事件

语法：

• v-on:事件名="要执行的少量代码"
• v-on:事件名="methods中的函数"
• v-on:事件名="methods中的函数(实参)"

<div id="app"> <h1>您已经累计充值：{{money}}人民币</h1> <button v-on:click="money=money+1">点我+1</button> <button v-on:click="add1">点我增加1个</button> <button v-on:click="addco(5)">点我+5</button> <button @click="del">点我扣除1</button> <button @click="delcot(10)">点我扣除10</button> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { money: 100 }, methods: { add1: function() { this.money++; }, addco: function(num) { this.money += num; }, del: function() { this.money--; }, delcot: function(num) { this.money -= num; } } }); </script>

效果：

v-on指令修饰符

修饰符包括:事件修饰符、按键修饰符、系统修饰符和鼠标按钮修饰符

事件修饰符

• .stop 阻止事件冒泡

  事件冒泡：比如box2在box1中，点击box2时，也同时点击了box1，这就是事件冒泡

  从最具体的元素到不具体的元素（由内到外）

  当子元素（事件源）事件触发，事件会沿着包含关系，依次往上级传递，每一级都可以感知到事件，直到触发根元素（根源)

  <div id="app2"> <div @click="tgclk"> <button @click.stop="zuzclk">点我阻止冒泡</button> </div> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app2', methods: { tgclk() { console.log('我让你走') }, zuzclk() { console.log('阻止冒泡') } } }); </script>

• .prevent 阻止默认事件

  调用event.preventDefault()，阻止默认事件，比如：form表单在提交时，会自动刷新页面

<div id="app3"> <!-- 方法一 --> <form @submit.prevent="onSubmit"> <input type="submit" value="查询"> </form> <!-- 方法二 --> <form v-on:submit.prevent> <input type="submit" value="搜索"> </form> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app3', methods: { onSubmit() { console.log('submit') } } }); </script>

• .capture 事件捕获模式

  <!-- =====================事件捕获模式========================== --> <div id="app4"> <div @click.capture="fatck"> <button @click="dayck">点击事件捕获并打印</button> </div> </div> <script type="text/javascript"> //================================= var vm = new Vue({ el: '#app4', methods: { //fatck(){}==fatcik:function(){} fatck() { console.log('fatck') }, dayck(){ console.log('dayiw') } } }); </script>

• .self:只当事件从侦听器的元素本身出发时才出发回调

• .once：值触发一次回调

1. 使用时注意顺序

   v-on:click.prevent.self //会阻止所有的点击的默认事件 v-on:click.self.prevent //会阻止元素自身的默认事件

按键修饰键

监听键盘事件时，我们经常需要检查详细的按键。Vue允许为v-on在监听键盘事件时添加按键修饰符

<div id="app"> <!-- 只有在key是Enter时，调用vm.submit --> <input @keyup.enter="submit"> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', methods: { submit() { alert('提交成功') } } }) </script>

• @keyup.enter - 监测回车按键
• @keyup.esc - 监测返回按键

<input type="text" @keydown.enter="enterFn"> <input type="text" @keydown.esc="escFn">

vue指令 v-model

1. v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令

   在<input>、<select>、<textarea>、components中使用

   <div id="app"> <h1>{{val}}</h1> <h1>{{val}}</h1> <input v-model="val" type="text" id="ipval"> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { val: '我们都是一样的值' } }) </script>

vue指令 v-if、v-else、v-else-if

v-if和v-show有同样的效果，不同在于v-if是重新渲染，而v-show使用display属性来控制显示隐藏。

频繁切换的话使用v-show减少渲染带来的开销。

v-if可以单独使用，而v-else-if,``v-else必须与v-if组合使用

v-if、v-else-if都是接受一个条件或布尔值，v-else不需要参数

<div id="app-2"> <h1>我的成绩为：{{score}}</h1> 我的评级为： <p v-if="score>=90">优秀</p> <p v-else-if="score>=80">良好</p> <p v-else-if="score>=60">及格</p> <p v-else="score<60">不及格</p> </div> <script type="text/javascript"> var vm=new Vue({ el:"#app-2", data:{ score:80 } }) </script>

vue指令 v-for

作用：列表渲染，主要用于显示列表和表格 以"itme in itmes"形式，注v-for需要每项提供一个唯一key

<table border="1"> <!-- 表头 --> <thead> <tr> <th>编号</th> <th>商品名</th> <th>价格</th> <th>存库</th> </tr> </thead> <tr v-for="(item,index) in goodsList" :key="item.id"> <td>{{index}}</td> <td>{{item.name}}</td> <td>{{item.price}}</td> <td>{{item.count}}</td> </tr> </table> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { tite: '商品信息表', goodsList: [{ id: 1, name: '麻辣条', price: 255.22, count: 100 }, { id: 2, name: '康师傅泡面', price: 235, count: 1500 }, { id: 3, name: '泡鸡脚', price: 22, count: 500 }, { id: 4, name: '娃哈哈', price: 2, count: 300 }, { id: 5, name: '娃哈哈果汁', price: 5, count: 200 } ]} </script>

v-for以下方法监测到并更新页面

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

还有一下不会更新

• slice()
• filter()
• concat()
• map()

利用computed属性计算属性实现模糊查询

<div id="app"> <h1>{{tite}}</h1> 查询<input type="text" placeholder="请输入" v-model="mykey"> <table border="1"> <!-- 表头 --> <thead> <tr> <th>编号</th> <th>商品名</th> <th>价格</th> <th>存库</th> </tr> </thead> <tr v-for="(arr,index) in goodsList"> <td>{{index}}</td> <td>{{arr.name}}</td> <td>{{arr.price}}</td> <td>{{arr.count}}</td> </tr> </table> </div> <!-- ================================================================== --> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { tite: '商品信息表', arr: [{ id: 1, name: '麻辣条', price: 255.22, count: 100 }, { id: 2, name: '康师傅泡面', price: 235, count: 1500 }, { id: 3, name: '泡鸡脚', price: 22, count: 500 }, { id: 4, name: '娃哈哈', price: 2, count: 300 }, { id: 5, name: '娃哈哈果汁', price: 5, count: 200 } ], mykey:'' }, computed:{ goodsList(){ var _this=this; return _this.arr.filter(function(arr){ return arr.name.indexOf(_this.mykey)!=-1; }) } } }) </script> 监听属性

监听的属性发生变化时，会自动调用回调函数，

<div id="app"> <h1>学生信息</h1> <p> 姓名：<input type="text" v-model="name"> <span>{{tsname}}</span> </p> <p> 性别：<input type="text" v-model="gender"> <span>{{tsgender}}</span> </p> <p> 姓名：<input type="text" v-model="phone"> <span>{{tsphone}}</span> </p> </div> <script type="text/javascript"> var vm=new Vue({ el:"#app", data:{ name:'', gender:'', phone:'', tsname:'', tsgender:'', tsphone:'' }, watch:{ name(newVal){ if(newVal!=''){ this.tsname="输入用户名正确"; }else{ this.tsname="姓名不能为空！"; } }, gender(newVal){ if(newVal!=''){ this.tsgender="输入性别正确"; }else{ this.tsgender="性别不能为空！"; } }, phone(newVal){ if(newVal!=''){ this.tsphone="输入电话正确"; }else{ this.tsphone="电话不能为空！"; } } }, }) </script>