vue-01-插值表达式事件修饰符
Posted cgy-home
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-01-插值表达式事件修饰符相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <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包 下载地址：https://files.cnblogs.com/files/cgy-home/vue.min.js--> <script src="../lib/vue.min.js"></script> </head> <body> <!--2. 创建一个要控制的区域--> <div id="app"> </div> <script> var vm = new Vue( el: ‘#app‘, data: , methods: ) </script> </body> </html> <!--1. 如何定义一个基本的Vue代码结构--> <!--2. 插值表达式 和 v-text --> <!--3. v-cloak --> <!--4. v-html --> <!--5. v-bind Vue提供的属性绑定机制 缩写 ：--> <!--6. v-on Vue提供的事件绑定事件 缩写 @--> <!--7. v-cloak 解决插值表达式闪烁的问题--> <!--8. v-text 覆盖标签内部内容--> <!--9. v-html 解析html标签--> <!--10. 使用 .stop 阻止冒泡--> <!--11. 使用 .prevent 阻止默认行为--> <!--12. 使用 .capture 实现捕获触发事件的机制--> <!--13. 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数--> <!--14. 使用 .once 只触发一次事件处理函数--> <!--15. .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为， .stop则是阻止所有冒泡行为--> <!--16. v-model 实现数据双向绑定--> <!--17. :class="classObj"--> <!--18. :style="[styleObj,styleObj2]"--> <!--19. v-for="(item,i) in list" 循环普通数组--> <!--20. v-for="(user,i) in list" 循环对象数组--> <!--21. v-for="(val, key,i) in user" 循环对象--> <!--22. v-for="count in 10" 迭代数字--> <!--23. v-for="item in list" :key="item.id" 对象的使用--> <!--24. v-if="flag" 和 v-show="flag" 的使用--> 总结 <!--1. MVC 和 MVVM 的区别 --> <!--2. Vue中最基本代码的结构--> <!--3. 插值表达式 v-cloak v-text v-html v-bind v-on(缩写是@) v-model v-for v-if v-show--> <!--4. 事件修饰符： .stop .prevent .capture .self .once--> <!--5. el 指定要控制的区域 data是个对象，制定了控制区域内要用到的数据 methods 虽然带个s后缀，但是是个对象，这里可以自定义方法--> <!--6. 在VM实例中，如果要访问 data 上的数据，或者要访问 methods 中的方法， 必须带 this--> <!--7. 在 v-for 要会使用 key 属性 （只接受 String / number）--> <!--8. v-model 只能应用于表单元素--> <!--9. 在Vue中绑定样式两种方式 v-bind:class v-bind:style-->
例子：跑马灯
<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.方法名 来进行访问，这里的tihs，就表示我们new出来的 vm 实例对象
// 注意： vm实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data上同步收到
var vm = new Vue(
el: ‘#app‘,
data:
msg: ‘猥琐发育，别浪---！‘,
intervalId: null
,
methods:
lang:function ()
if (this.intervalId != null)
return;
this.intervalId = setInterval(()=>
var start = this.msg.substring(0,1);
var end = this.msg.substring(1);
this.msg = end + start;
, 400)
,
stop:function ()
clearInterval(this.intervalId);
this.intervalId = null;
)
</script>
</body>
例子：简易计算器
<body>
<!--2. 创建一个要控制的区域-->
<div id="app">
<input type="text" v-model="n1">
<select vaule="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="cal">
<input type="text" v-model="result">
</div>
<script>
var vm = new Vue(
el: ‘#app‘,
data:
n1:0,
n2:0,
result:0,
opt: "+"
,
methods:
cal()
/*switch (this.opt)
case "+":
this.result = parseInt(this.n1) + parseInt(this.n2);
break;
case "-":
this.result = parseInt(this.n1) - parseInt(this.n2);
break;
case "*":
this.result = parseInt(this.n1) * parseInt(this.n2);
break;
case "/":
this.result = parseInt(this.n1) / parseInt(this.n2);
break;
*/
var str = "parseInt(this.n1) " + this.opt + " parseInt(this.n2)"
this.result = eval(str);
)
</script>
</body>
以上是关于vue-01-插值表达式事件修饰符的主要内容，如果未能解决你的问题，请参考以下文章