<!-- 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、修饰符、组件基础
最新推荐文章于 2022-09-28 20:08:41 发布