| Vue.js 框架使用----跑马灯案例 Vue的基本使用：
- {{ msg }} 插值表达式
- v-text 解决闪烁问题
- v-cloak 解决闪烁问题
- v-html 显示标签
- v-bind Vue 提供的属性绑定机制 缩写是 ：
- v-on Vue 提供的属性绑定机制 缩写是 @
| <!-- 将来 new 的Vue实例， 会控制这个 元素中的所有的内容--> <div id="app"> <!-- 1.{{ msg }} 插值表达式 --> <p>{{ msg }}</p> <!-- 2.v-text,v-cloak 解决闪烁问题 --> <div v-cloak>{{msg}}</div> <div v-text="msg"></div> <!-- 3.v-html 显示标签--> <div v-html="msg2"></div> <!-- 4.v-bind Vue 提供的属性绑定机制 缩写是 ： --> <input type="button" value="我要" :title="msg2"> <!-- 5.v-on Vue 提供的属性绑定机制 缩写是 @ --> <input type="button" value="按钮" @click="show"> </div> <script> //2.创建一个Vue的实例 var vm = new Vue({ el: '#app', //表示要控制页面上的那个区域 data: {//data el 中要用的数据 msg: '欢迎学习Vue', msg2:'<h1>hOHo,谁TM买小米</h1>' }, methods:{ show:function () { alert("谁TM买小米！"); } } }) </script> |
注意：在VM实例中，如果想要获取 data 上的数据 ，或者 想要调用 methods中的方法 ，必须通过this.数据属性名 或 this.方法名 来进行访问， 这里的this，就表示 我们 new 出来的 VM 实例对象 跑马灯------------------------小案例 分析：
- 分析：给 '嘿嘿' 按钮，绑定一个点击事件 v-on @
- 逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可
- 实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跑马灯</title> <script src="../lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <input type="button" value="嘿嘿" @click="lang"> <input type="button" value="暂停" @click="stop"> <h4>{{msg}}</h4> </div> <script> var vm = new Vue({ el:'#app', data:{ msg:'窝窝头，一块钱四个！！！嘿嘿，嘿嘿，嘿嘿,嘿嘿，嘿嘿，嘿嘿,嘿嘿，嘿嘿，嘿嘿', intervalId: null //定义定时器ID }, methods:{ lang() { if (this.intervalId != null) return; this.intervalId = setInterval(() => { //获取到头的第一个字符 var start = this.msg.substring(0,1); //获取到 后面的所有的字符 var ent = this.msg.substring(1); // 重新拼接得到新的字符串， 并赋值给 this.msg this.msg = ent + start; },100) }, stop(){//暂停定时器 clearInterval(this.intervalId); //重新赋值为null this.intervalId=null; } } }); </script> </body> </html> |
总结：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面 |
注意：在VM实例中，如果想要获取 data 上的数据 ，或者 想要调用 methods中的方法 ，必须通过this.数据属性名 或 this.方法名 来进行访问， 这里的this，就表示 我们 new 出来的 VM 实例对象
跑马灯------------------------小案例
分析：
- 分析：给 '嘿嘿' 按钮，绑定一个点击事件 v-on @
- 逻辑代码：拿到 msg 字符串，然后 调用 字符串的 substring 来进行字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可
- 实现点击下按钮，自动截取的功能，需要把 2 步骤中的代码，放到一个定时器中去
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跑马灯</title> <script src="../lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <input type="button" value="嘿嘿" @click="lang"> <input type="button" value="暂停" @click="stop"> <h4>{{msg}}</h4> </div> <script> var vm = new Vue({ el:'#app', data:{ msg:'窝窝头，一块钱四个！！！嘿嘿，嘿嘿，嘿嘿,嘿嘿，嘿嘿，嘿嘿,嘿嘿，嘿嘿，嘿嘿', intervalId: null //定义定时器ID }, methods:{ lang() { if (this.intervalId != null) return; this.intervalId = setInterval(() => { //获取到头的第一个字符 var start = this.msg.substring(0,1); //获取到 后面的所有的字符 var ent = this.msg.substring(1); // 重新拼接得到新的字符串， 并赋值给 this.msg this.msg = ent + start; },100) }, stop(){//暂停定时器 clearInterval(this.intervalId); //重新赋值为null this.intervalId=null; } } }); </script> </body> </html> |
总结：程序员只需要关心数据，不需要考虑如何重新渲染DOM页面
扫一扫
89
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
