1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <style> 8 <!-- v-cloak 能解决插件表达式闪烁问题 --> 9 [v-cloak]{ 10 display: none; 11 } 12 </style> 13 <body> 14 <div id="app"> 15 <!-- v-text 默认没有闪烁问题 --> 16 <!-- v-text 会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符， 不会把 整个元素的内容清空--> 17 <div v-text="msg1"></div> 18 19 <!-- v-bind 属性绑定，缩写为 ：--> 20 <input type="button" value="点击" :title="mytitle + '123'" @click="begin"/> 21 22 <!-- v-on 事件绑定，缩写为 @ --> 23 <input type="button" value="停止" :title="mytitle1 + '123'" @click="stop"/> 24 25 <!-- {{ msg}} 后可以加入定值直接显示在页面上， 这是 插值表达式的好处，如果用 v-text则无法显示 今天天气好晴朗， 因为会被覆盖掉 --> 26 <p v-cloak> {{ msg }} 今天天气好晴朗</p> 27 28 <!-- 可以直接输出html格式 --> 29 <div v-html="msg2"></div> 30 </div> 31 32 </body> 33 </html> 34 <script src="../js/vue.js"></script> 35 <script> 36 var vm = new Vue({ 37 el: '#app', 38 data: { 39 msg1: 'hahaha', 40 msg: '123456，789', 41 msg2: '<h1>我是一个h1</h1>', 42 mytitle: '请点击', 43 mytitle1: '点击停止', 44 intervalId: null //在data上定义 定时器Id 45 }, 46 methods: { 47 begin(){ 48 console.log(this.msg) 49 if (this.intervalId != null) return; 50 // 获取第一个字符 this 51 this.intervalId = setInterval( () => { 52 var start = this.msg.substring(0,1) 53 // 获取到 后面的字符 54 var end = this.msg.substring(1) 55 // 重新拼接得到新的字符串 56 this.msg = end + start 57 }, 400) 58 }, 59 stop(){ //停止计时器 60 clearInterval(this.intervalId); 61 //每当清除了定时器之后,需要把 intervalId 置为 null 62 this.intervalId = null; 63 } 64 }, 65 }) 66 </script> 67 68 69 70 <!-- 1. 如何定义一个基本的Vue代码结构 --> 71 <!-- 2. 插值表达式 和 v-text --> 72 <!-- 3. v-cloak --> 73 <!-- 4. v-html --> 74 <!-- 5. v-bind Vue提供的属性绑定机制 缩写是 : --> 75 <!-- 6. v-on Vue提供的事件绑定机制 缩写是 @ -->