master

Branches (1)

Manage

Manage

master

LearnVue
/
Html
/
component.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="../js/vue.js" ></script>
		<title>组件学习</title>
	</head>
	<body>
		<div id="el-component-id">
			<div>{{welcome}}</div>
			<div>
				<h4>组件一-props传递单个参数</h4>
				<component-span-child-1 message="component-style-one"></component-span-child-1>
				<br />
				<component-span-child-1 :message="parentMessage"></component-span-child-1>
				<br />
				<component-span-child-1 v-bind:message="parentMessage"></component-span-child-1>
				<br />
				<input v-model="iMessage" placeholder="请输入值"/>
				<component-span-child-1 :message="iMessage"></component-span-child-1>
			</div>
			<div>
				<h4>组件二-props传递多个参数</h4>
				<component-span-child-2 name="小李" from="南京" to="北京" purpose="去买个书包"></component-span-child-2>
				<component-span-child-2 :name="person.name" :from="person.from" :to="person.to" :purpose="person.purpose"></component-span-child-2>
			</div>
			<div>
				<h4>组件三-使用props对象传递参数，和校验</h4>
				<component-span-child-3 name="小狗" :persons="persons" location="讲述郾城" action="去淘金啊"></component-span-child-3>
			</div>
			<div>
				<h4>组件四-"v-on"绑定事件</h4>
				<span>{{sumOfTotal}}</span>
				<br />
				<!--'@'是'v-on:'监听器的简写-->
				<component-span-child-4 v-on:increment-total="incrementWithTotal"></component-span-child-4>
				<component-span-child-4 @increment-total="incrementWithTotal"></component-span-child-4>
				<component-span-child-4 @increment-total="incrementWithTotal"></component-span-child-4>
			</div>
			<div>
				<h4>组件五-绑定原生事件</h4>
				<span>{{nativeSumOfTotal}}</span>
				<br />
				<component-span-child-5 v-on:click.native="nativeDoThing"></component-span-child-5>
			</div>
			<div>
				<h4>组件六-.sync同步父组件和子组件之间的props</h4>
				父组件中的值: {{food}}
				<component-span-child-6 :food.sync=food></component-span-child-6>
				<component-span-child-6 v-bind:food.sync=food></component-span-child-6>
				<!--扩展之后的模版-->
				<component-span-child-6 v-bind:food=food v-on:update:food="val => food = val"></component-span-child-6>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		// 使用props数组的形式进行传递参数
		Vue.component("component-span-child-1", {
			props: ["message"],
			template: "<span>{{message}}</span>"
		})
		Vue.component("component-span-child-2", {
			props: ["name", "from", "to", "purpose"],
			template: "<div><span>{{name}}从{{from}}到{{to}}，{{purpose}}</span></div>"
		})
		Vue.component("component-span-child-3", {
			props: {
				name: {
					type: String,
					require: true
				},
				persons: {
					type: Number,
					default: 1,
					validator: function(value) {
						return value > 0;
					}
				},
				location: {
					type: String,
					default: "上海"
				},
				action: {
					type: String,
					default: "拉粑粑"
				}
			},
			template: "<div><span>{{name}}和{{persons}}个人，去{{location}}里面{{action}}</span></div>"
		})
		Vue.component("component-span-child-4", {
			template: "<button v-on:click='incrementOfButtonCounter'>{{counter}}</button>",
			data: function() {
				return {
					counter: 0
				}
			},
			methods: {
				incrementOfButtonCounter: function() {
					this.counter = this.counter + 1;
					// post a notification of increment counter
					// 'increment-total' 相当于一个通知名称，在父组件中，会检测一个同名的通知名称
					this.$emit("increment-total");
				}
			}
		})
		Vue.component("component-span-child-5", {
			template: "<button>检测原生事件-点击</button>"
		})
		Vue.component("component-span-child-6", {
			props: ["food"],
			template: "<div>{{selectedFood}}<button v-on:click='changeSelectedFood'>点击选择其他食物</button></div>",
			data: function() {
				return {
					selectedFood: this.food,
					foods: ["米饭", "水果", "青菜", "沙拉"]
				}
			},
			methods: {
				changeSelectedFood: function() {
					var num = Math.floor(Math.random() * 3 + 1);
					this.selectedFood = this.foods[num];
					this.$emit('update:food', this.selectedFood);
				}
			}
		})
		var vm = new Vue({
			el: "#el-component-id",
			data: {
				welcome: "welcome to Vue",
				parentMessage: "this is parent message",
				iMessage: "",
				person: {
					name: "小明",
					from: "江苏",
					to: "江西",
					purpose: "喝一杯牛奶"
				},
				persons: 10,
				sumOfTotal: 0,
				nativeSumOfTotal: 0,
				food: "牛肉"
			},
			methods: {
				incrementWithTotal: function() {
					this.sumOfTotal = this.sumOfTotal + 1;
				},
				nativeDoThing: function() {
					this.nativeSumOfTotal += 1;
				}
			}
		});
	</script>
</html>