标签：绑定 console title 修饰符 事件 双向 click 属性

a1:v-bind：属性绑定

a2:v-on:事件绑定

a3:v-model:数据双向绑定，一般用于表单元素

• v-bind:title，绑定title属性，简写：  【:title='title_info'】
• v-on:click,绑定点击事件，简写：【@click='func'】
• 事件可以链式的连接修饰符====> @click.stop.once=‘func’

 

事件修饰符【 并且这些修饰符是可以串联使用的】

1. .stop:阻止冒泡
2. .prevent：阻止默认事件[例如 <a>跳转/表单的默认submit提交]这种默认事件都可以用.prevent阻止
3. .capture：事件监听时的事件捕获【】
4. .self：事件只在自己身上触发，不包过子元素，父元素
5.  .once：事件只触发一次

demo:

 1  <div id="app">
 2         <div style="height:100px;background-color: aqua;" @click.capture='divclick'>
 3             <input type="button" value="点我" @click ='btnclick'>
 4         <!-- 默认 点击事件会从子元素向父元素传递（冒泡【如果父元素有点击事件的话】），
 5             如果在子元素上绑定事件修饰符 .stop可以组织默认冒泡事件【从里到外】
 6             如果在btn父级div上添加.capture修饰符，那么点击btn就不会是冒泡那样先执行子元素，在父元素，而是先执行
 7             带有prevent修饰符的click事件【也就是从外到里】
 8         -->
 9         </div>
10 
11     </div>

View Code

    let vm = new Vue({//确保引入了vue.js
        el:'#app',
        data:{},
        methods:{
            divclick () {
                console.log('点击了div')
            },
            btnclick () {
                console.log('点击了btn')
            },
            aclick () {
                console.log('点击了超链接a')
            }
        }
    })

View Code

 

标签：绑定,console,title,修饰符,事件,双向,click,属性
来源： https://www.cnblogs.com/Hijacku/p/14729042.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。