Vue应用（五）---on、model、is、修饰符、组件基础

<!-- 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、修饰符、组件基础

猜你喜欢
