• vue自定义组件 事件修饰符 表单修饰符


    今天给大家分享自定义组件、表单修饰符和事件修饰符的基本使用方法

    1.设置style样式的三种方式

    1.直接使用原来的style样式单

    2.通过data属性控制样式,进行拼接

    3.通过事件设置样式

    效果展示

     

    vue代码

    1. new Vue({
    2. el: "#app",
    3. data(){
    4. return{
    5. a: 'fontClass',
    6. b: ['fontClass', 'colorClass'],
    7. fontSize: 40,
    8. color: 'red',
    9. //样式对象,注意:样式名使用驼峰命名,如:fontSize
    10. clickStyle: {
    11. fontSize: '50px',
    12. color:'blue'
    13. }
    14. }
    15. }
    16. });

    HTML代码 

    1. <div id="app">
    2. <p>
    3. <span :class="a">灰太狼span>
    4. <br />
    5. <span :class="b">灰太狼span>
    6. p>
    7. <p>
    8. <span style="font-size: 40px;color: green;">原本样式span>
    9. <br />
    10. <span :style="{fontSize:fontSize+'px',color: color}">拼接样式span>
    11. p>
    12. <p>
    13. <span :style="clickStyle" >设置事件样式span>
    14. p>
    15. div>

    2. 事件修饰符

    几个常用的事件修饰符:

    stop
    prevent
    self
    once
    capture
    passive
    native

    stop
    阻止了事件冒泡,相当于调用了event.stopPropagation方法

    1. <div @click="shout(2)">
    2.   <button @click.stop="shout(1)">okbutton>
    3. div>

    //点击shout只输出1,不会触发shout(2)

     

     

    prevent
    阻止了事件的默认行为,提交事件不再重载页面

    1. <form action="test.action" method="post" @submit.prevent="Onsumit">
    2.         <input type="text" name="name" />
    3.         <input type="submit" value="提交" /    >
    4. form>

    self
    只当在 event.target 是当前元素自身时触发处理函数

    <div v-on:click.self="doThat">...div>

    使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。

    因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击

     

    once
    绑定了事件以后只能触发一次,第二次就不会触发,打个比方,用户支付只能触发一次

    <button @click.once="shout(1)">okbutton>

     

     

    keyup

    当用户点击回车时,提交事件

    1. <input type="text" @keyup.13="doSubmit" v-model="name">

    常用的表单修饰符

    • lazy
    • trim
    • number

    lazy
    在我们填完信息,光标离开标签的时候,才会将值赋予给value,也就是在change事件之后再进行信息同步

    1. <input type="text" v-model.lazy="age">
    2. <p>{{age}}p>

     


    trim
    自动过滤用户输入的首空格字符,而中间的空格不会过滤

    <input type="text" v-model.trim="age" >

      

     

    number
    自动将用户的输入值转为数值类型,但如果这个值无法被parseFloat解析,则会返回原来的值

    1. <div id="app">
    2. <div>
    3. <button-counter title="测试"/>
    4. div>
    5. div>

    注意事项:如果没有加number,转为数值类型,表单输入的是字符串,就会拼接上去,不能实现增加。

    3.自定义组件

     定义一个button-counter组件

    1. <div id="app">
    2. <div>
    3. <button-counter title="测试"/>
    4. div>
    5. div>

    属性如下

    props

    • props是父组件用来传递数据的一个自定义属性。
    • 父组件的数据需要通过props把数据传给子组件,子组件需要显式地用props选项声明 "prop"

    components

    局部自定义组件名称

    template: '

    1. var vm = new Vue({
    2. el: '#app',
    3. data: {
    4. ts: new Date().getTime()
    5. },
    6. //局部自定义组件
    7. components: {
    8. //组件名: {配置项}
    9. 'button-counter': {
    10. //用来传值的自定义属性
    11. props:['title'],
    12. //模板,模板中写的html代码,在其中可以使用{{}},及指令等vue元素
    13. template: '',
    14. //注意:在自定义的组件中需要使用函数来定义data
    15. data: function() {
    16. return {
    17. count: 0
    18. }
    19. },
    20. //定义响应事件函数
    21. methods: {
    22. doClick: function() {
    23. //注意此处this的作用返回是自定义组件,而不是上面声明
    24. //的vue实例.
    25. this.count++;
    26. }
    27. }
    28. }
    29. }

  • 相关阅读:
    odoo javascript参考(一)
    WPF透明置顶窗口wine适配穿透问题解决
    React通过属性 (props) 和状态 (state) 来传递和管理组件的数据
    MySQL中的索引事务(1)索引----》数据库运行的原理知识+面试题~
    在 Python 3 中释放 LightGBM 的力量:您的机器学习大师之路
    使用iperf3测试网络带宽
    【ccf-csp题解】第30次csp认证-第三题-解压缩-字符串模拟
    挑战与机遇的交织
    用浏览器快速开启Docker的体验之旅
    洛谷-P7910 [CSP-J 2021]-插入排序(详细讲解)
  • 原文地址:https://blog.csdn.net/Bugxiu_fu/article/details/126956296