<!-- v-on绑定监听事件 --> <!-- 鼠标右击监听沒成功、在组件上使用v-model测试失败 --> <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style> .dynamic-component-demo-tab-button { padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid #ccc; cursor: pointer; background: #f0f0f0; margin-bottom: -1px; margin-right: -1px; } .dynamic-component-demo-tab-button:hover { background: #e0e0e0; } .dynamic-component-demo-tab-button-active { background: #e0e0e0; } .dynamic-component-demo-tab { border: 1px solid #ccc; padding: 10px; } </style> </head> <body> <!-- v-on绑定监听事件 --> <div id="app"> <!-- 如html中的用法,可以直接在click后写js语句 --> <button v-on:click="counter += 1;var a = 1; console.log(a+counter)">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> <!-- 也可以像下面一样指定方法名clickFun,写作clickFun()同样可以调用,使用这种形式获得传入的点击事件 的对象需要写为clickFun($event),当然可以传入其他参数 --> <button v-on:click="clickFun($event)">btn2</button> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { counter: 0 }, methods:{ clickFun:function(e){ console.log(e) } } }) </script> <!-- 事件修饰符、按键修饰符、系统修饰键 --> <div id="app-2" v-on:click="console.log('app2')"> app2 <!-- 正常操作 --> <a href="http://www.baidu.com" target="_blank">跳转打印app2</a> <form action="192.168.56.102/app/index"> <input type="submit" name="submit"> </form> <!-- 阻止单击事件继续传播 --> <a href="http://www.baidu.com" target="_blank" v-on:click.stop="doThis">跳转不打印app2</a> <!-- 提交事件不再重载页面 --> <form action="192.168.56.102/app/index" v-on:submit.prevent="onSubmit"> 阻止提交打印app2 <input type="submit" name="submit"> </form> <!-- 修饰符可以串联 --> <a href="http://www.baidu.com" target="_blank" v-on:click.stop.prevent="doThat">不跳转不打印app2</a> <!-- 只有修饰符 --> <form action="192.168.56.102/app/index" v-on:submit.prevent> 阻止提交不打印app2 <input type="submit" name="submit" @click.stop> </form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">捕获模式</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat"> 点击自身触发<div>点击内部元素不触发</div> </div> <!-- 按键修饰符 --> <input v-on:keyup.13="submit">鼠標放入后回車弹出提示框</input><br/> <!-- 使用按键别名 --> <input v-on:keyup.enter="submit2">鼠標放入后回車弹出提示框2</input><br> <!-- 系统修饰键 --> <input @keyup.alt.67="clear">alt+c</input> <div @click.ctrl="doSomething">Do something</div> <!-- 將right謝偉left可以發揮作用,但是right、middle都不能測試成功 --> <div @click.right="right">鼠标右击未测试成功</div> </div> <script type="text/javascript"> var app2 = new Vue({ el: '#app-2', data: { }, methods:{ doThis:function(e){ console.log(e) console.log("doThis") }, onSubmit:function(e){ console.log(e) console.log("onSubmit") }, doThat:function(e){ console.log(e) console.log("doThat") }, submit:function(){ alert('提示框') }, submit2:function(){ alert('提示框2') }, clear:function(){ alert('alt+c') }, doSomething:function(){ alert('ctrl+click') }, right:function(){ alert("鼠标右击") } } }) </script> <!-- v-model绑定表单元素,v-model的作用是双向绑定(控件的输入可以影响vue的属性,vue属性的变化也可以影响控件), 若是将v-model替换为:value,因为v-bind是单相绑定,则控件不会影响vue的属性,但是vue的属性可以影响控件 --> <div id="app-3"> <!-- 文本框 --> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> <!-- 复选框 --> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <!-- 下拉框 --> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span> </div> <script> var app3 = new Vue({ el: '#app-3', data: { message:'msg', checked:true, selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } }) </script> <!-- 组件基础, i. 注意模板中的属性要通过一个data属性的function来返回。 ii. 如果要在使用模板时动态的传入值(这种操作是很普遍的),需要用到props属性,传入数据的方式可以为:1.通过vue的属 性动态传入,2.直接利用这个属性。 iii.通过发送事件通知父级控件,使用$emit。 iv. 在组件上使用v-model测试失败,当对绑定的属性赋值时,会导致输入框变为一个li。 v:通过插槽分发内容 --> <div id="app-4"> <button-counter v-bind:name="name"></button-counter> <button-counter name="按钮2"></button-counter> <button-counter name="按钮3"></button-counter> <blog-post v-for="post in posts" :key="post.id" :post="post" @title="alert('title')" @content="conFun"></blog-post> <abc v-model="va"></abc> {{va}} <myslot>slotcontent</myslot> </div> <script type="text/javascript"> Vue.component('button-counter', { data: function () { return { count: 0 } }, props:['name'], template: '<button v-on:click="count++">{{name}}:You clicked me {{ count }} times.</button>' }) Vue.component('blog-post', { props: ['post'], template: ' \ <div> \ <h3 @click="$emit(\'title\')">{{ post.title }}</h3> \ <div @click="$emit(\'content\',post.id)" v-html="post.content"></div> \ </div> \ ' }) Vue.component('abc', { props: ['value'], template: ' \ <div> \ <span>自定义组件input:</span><br>\ <input :value="value" @input="$emit(\'input\',$event.target.value)"> \ </div> \ ' }) Vue.component('myslot', { template: ' \ <div> \ <span>这是自定义插槽:</span>\ <slot></slot> \ </div> \ ' }) var app4 = new Vue({ el: '#app-4', data: { name:'按钮', posts:[ {id:1,title:'title1',content:'content1'}, {id:2,title:'title2',content:'content2'}, ], va:'init', }, methods:{ // 若要在内嵌的js语句中获得子控件抛出的值,需要使用变量$event,如conFun可替换为console.log($event) conFun:function(e){ console.log(e) } } }) </script> <!-- 动态组件 --> <div id="app-5"> <div id="dynamic-component-demo" class="demo"> <button v-for="tab in tabs" v-bind:key="tab" class="dynamic-component-demo-tab-button" v-bind:class="{ 'dynamic-component-demo-tab-button-active': tab === currentTab }" v-on:click="currentTab = tab"> {{ tab }} </button> <component v-bind:is="currentTabComponent" class="dynamic-component-demo-tab"></component> </div> </div> <script type="text/javascript"> Vue.component('tab-home', { template: '<div>Home component</div>' }) Vue.component('tab-posts', { template: '<div>Posts component</div>' }) Vue.component('tab-archive', { template: '<div>Archive component</div>' }) var app5 = new Vue({ el: '#app-5', data: { currentTab: 'Home', tabs: ['Home', 'Posts', 'Archive'] }, computed: { currentTabComponent: function () { return 'tab-' + this.currentTab.toLowerCase() } } }) </script> <!-- is的使用 --> <div id="app-6"> <div is="abc"></div> <div is="abc2"></div> </div> <script type="text/javascript"> Vue.component('abc', { template: '\ <span>span1</span> \ ' }) Vue.component('abc2', { template: '\ <span>span2</span> \ ' }) var app6 = new Vue({ el: '#app-6' }) </script> </body> </html>
Vue应用(五)---on、model、is、修饰符、组件基础
猜你喜欢
转载自blog.csdn.net/hurricane_li/article/details/80723240
今日推荐
周排行