Vue指令
插值表达式
插值表达式语法：{{content}}
使用时请注意以下几点：
- 插值表达式是vue框架提供的指令
- 插值表达式中 不可以写代码片段 会报错
- 属性节点中不能使用插值表达式，如果要为元素节点动态绑定数据，我们要用v-bind动态绑定属性
Vue基本指令
- v-text v-text会覆盖元素中原本的内容， Vue中默认 v-text 是没有闪烁问题的
- v-cloak Vue提供 v-cloak 能够解决 插值表达式闪烁的问题
- v-html 覆盖元素的内容
- v-bind Vue提供的属性绑定机制 缩写是 :
- v-on Vue提供的事件绑定机制 缩写是 @
Vue指令之v-bind的三种用法
- 直接使用指令v-bind
- 使用简化指令:
- 在绑定的时候，拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"
Vue指令使用综合案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> [v-cloak] { /* display: none; */ } </style> </head> <body> <div id="app"> <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 --> <p v-cloak>------------ {{ msg }} ----------</p> <h1 v-text="msg">==================</h4> <!-- 默认 v-text 是没有闪烁问题的 --> <!-- v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空 --> <div>{{msg2}}</div> <div v-text="msg2"></div> <div v-html="msg2">这个内容不会显示的</div> <!-- v-bind: 是 Vue中，提供的用于绑定属性的指令 --> <!-- <input type="button" value="按钮" v-bind:title="mytitle + '123'"> --> <!-- 注意： v-bind: 指令可以被简写为 :要绑定的属性 --> <!-- v-bind 中，可以写合法的JS表达式 --> <!-- Vue 中提供了 v-on: 事件绑定机制 --> <input type="button" value="按钮" :title="mytitle + ' 新加到title中的内容'" v-on:click="alert('hello')"> <input type="button" value="按钮" @click="show"> </div> <script src="./lib/vue-2.4.0.js"></script> <script> var vm = new Vue({ el: '#app', data: { msg: '数据消息', msg2: '<h1>我是一个可爱的 h1 </h1>', mytitle: '这是一个自己定义的title' }, methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法 show: function () { alert('Hello') } } }) /* 上面的vue函数就相当于下面的DOM操作 */ /* document.getElementById('btn').onclick = function(){ alert('Hello') } */ </script> </body> </html>
Vue指令之v-on和跑马灯效果
v-on
v-on 指令，它用于监听 DOM 事件。v-on缩写为‘ @ ’
<!-- 完整语法 --> <view v-on:click="doSomething">点击</view> <!-- 缩写 --> <view @click="doSomething">点击</view>
跑马灯效果
- HTML结构：
<div id="app"> <p>{{info}}</p> <input type="button" value="开启" v-on:click="go"> <input type="button" value="停止" v-on:click="stop"> </div>
- Vue实例：
// 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { info: '猥琐发育，别浪~！', intervalId: null }, methods: { go() { // 如果当前有定时器在运行，则直接return if (this.intervalId != null) { return; } // 开始定时器 this.intervalId = setInterval(() => { this.info = this.info.substring(1) + this.info.substring(0, 1); }, 500); }, stop() { clearInterval(this.intervalId); } } });
跑马灯完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 1. 导入Vue包 --> <script src="./lib/vue-2.4.0.js"></script> <style> #app { width: 100%; height: 200px; font-size: 120px; } #app h4 { background-color: pink; } input { width: 20%; height: 40px; } </style> </head> <body> <!-- 2. 创建一个要控制的区域 --> <div id="app"> <input type="button" value="浪起来" @click="lang"> <input type="button" value="猥琐一点" @click="stop"> <h4>{{ msg }}</h4> </div> <script> // 注意：在 VM实例中，如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名 或 this.方法名 来进行访问，这里的this，就表示 我们 new 出来的 VM 实例对象 var vm = new Vue({ el: '#app', data: { msg: '猥琐发育，别浪~~！', intervalId: null // 在data上定义 定时器Id }, methods: { lang() { // console.log(this.msg) // 获取到头的第一个字符 // this if (this.intervalId != null) return; this.intervalId = setInterval(() => { var start = this.msg.substring(0, 1) // 获取到 后面的所有字符 var end = this.msg.substring(1) // 重新拼接得到新的字符串，并赋值给 this.msg this.msg = end + start }, 400) // 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去 }, stop() { // 停止定时器 clearInterval(this.intervalId) // 每当清除了定时器之后，需要重新把 intervalId 置为 null this.intervalId = null; } } }) // 跑马灯分析： // 1. 给 【浪起来】 按钮，绑定一个点击事件 v-on @ // 2. 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可； // 3. 为了实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去； </script> </body> </html>
Vue指令之v-on的缩写和事件修饰符
事件修饰符
- .stop 阻止冒泡
- .prevent 阻止默认事件
- .capture 添加事件侦听器时使用事件捕获模式
- .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
- .once 事件只触发一次
事件修饰符使用案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <style> .inner { height: 150px; background-color: darkcyan; } .inner input { height: 100px; font-size: 50px; } .outer { padding: 40px; background-color: red; } </style> </head> <body> <div id="app"> <!-- 使用 .stop 阻止冒泡 --> <div class="inner" @click="div1Handler"> <input type="button" value="阻止冒泡 戳他" @click.stop="btnHandler"> </div> <!-- 使用 .prevent 阻止默认行为 --> <a href="http://www.baidu.com" @click="linkClick">有问题，先去百度 ←-------阻止默认行为 </a> <!-- 使用 .capture 实现捕获触发事件的机制 --> <div class="inner" @click.capture="div1Handler"> <input type="button" value="捕获触发事件 戳他" @click="btnHandler"> </div> <!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 --> <div class="inner" @click="div1Handler"> <input type="button" value="点击当前元素时候，才会触发事件处理函数 戳他" @click="btnHandler"> </div> <!-- 使用 .once 只触发一次事件处理函数 --> <a href="http://www.baidu.com" @click.prevent.once="linkClick" >有问题，先去百度 ←--------只触发一次事件处理函数</a> <!-- 演示： .stop 和 .self 的区别 --> <!-- <div class="outer" @click="div2Handler"> <div class="inner" @click="div1Handler"> <input type="button" value="戳他" @click.stop="btnHandler"> </div> </div> --> <!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为 --> <!-- <div class="outer" @click="div2Handler"> <div class="inner" @click.self="div1Handler"> <input type="button" value="戳他" @click="btnHandler"> </div> </div> --> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: { div1Handler() { console.log('这是触发了 inner div 的点击事件') }, btnHandler() { console.log('这是触发了 btn 按钮 的点击事件') }, linkClick() { console.log('触发了连接的点击事件') }, div2Handler() { console.log('这是触发了 outer div 的点击事件') } } }); </script> </body> </html>
