vue 基础入门笔记 01:Vue 基本代码、插值表达式、v-on、v-bind
1426 / 0 / 创建于 4年前 /
September 的个人博客
Vue 学习笔记
- Vue和MVVM 区别
- 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> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <p>{{msg}}</p> </div> <script> var vm = new Vue({ el :'#app', data:{ msg :'hello wold' } }) </script> </body> </html> -
插值表达式
- v-cloak 解决插值表达式闪烁问题
- v-text 没有插值闪烁问题 会覆盖元素内原有的内容 插值表达式只会替代自己的占位符
- v-html 重新解析html到该元素
<!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> </head> <style> [v-cloak]{ display: none; } </style> <body> <!-- v-cloak 解决插值闪烁问题 --> <div v-cloak id="app"> {{msg}} <!-- v-text 覆盖原元素的内容 解决闪烁问题 --> <div v-text="text">原有text</div> <!-- 解析html --> <div v-html="html">原有text</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> let vm = new Vue({ el:'#app', data:{ msg:'hello', text:'新的text', html:'<h1>hello</h1>' } }) </script> </body> </html> - v-bind 用于绑定属性的指令 缩写 可以写合法的js表达式
<!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="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <!-- v-bind 用于绑定属性的指令 --> <input type="button" :value="msg"> <!-- 缩写 --> <input type="button" v-bind:value="msg"> <!-- 可以写合法的js表达式 --> <input type="button" :value="msg+'测试'"> </div> <script> let vm = new Vue({ el:'#app', data:{ msg:"自定义按钮" } }) </script> </body> </html> -
v-on 事件绑定指令 缩写 @
<!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="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <input type="button" v-on:click='show' value="按钮"> </div> <script> let vm = new Vue({ el:'#app', data:{ msg:"自定义按钮" }, methods:{ show:function(){ alert('abc') } }, }) </script> </body> </html> - 跑马灯小案例
<!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="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <button type="button" @click="run" value="run">run</button> <button type="button" @click="stop" value="stop">stop</button> <h1>{{msg}}</h1> </div> <script> let vm = new Vue({ el:'#app', data:{ msg:'动起来1，2，3，4，5，6', timer:null }, methods: { run:function(){ if(this.timer!=null) return false let that = this that.timer = setInterval(function(){ let start = that.msg.substring(0,1) let end = that.msg.substring(1) that.msg = end+start },400) }, stop:function(){ clearInterval(this.timer) this.timer = null } }, }) </script> </body> </html>
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：