Vue模板语法（二）

样式绑定和事件处理

样式绑定

关键语句：v-bind,可缩写成：号

<div id="app">
    <span v-bind:class="aClz">vue</span>
	<span :class="bClz">vue1</span>
	<span :class="cClz">vue2</span>
</div>

style样式：

<style>
			.a{
				color: black;
			}
			 .b{
				 color: red;
			 }
			 .c{
				 font-size: 18px;
			 }
			
</style>

vue绑定

<script type="text/javascript">
		new Vue({
			el: "#app",
			data: {
				msg: '',
				//str引用样式
				aClz: 'a',
				bClz: 'b',
				cClz: ['a', 'c']
			}
		})
</script>

事件处理

阻止冒泡:@click.stop
div内容：

<div style="background-color:red;width: 600px;height: 600px;" @click="a">
	<div style="background-color:blue;width: 500px;height: 500px;" @click="b">
	  <div style="background-color:pink;width: 400px;height: 400px;" @click="c">
		<div style="background-color:black;width: 300px;height: 300px;" @click="d">
		</div>
	  </div>
	</div>
</div>

script：

<script type="text/javascript">
		new Vue({
			el: "#app",
			methods: {
				a() {
					alert('a事件触发');
				},
				b() {
					alert('b事件触发');
				},
				c() {
					alert('c事件触发');
				},
				d() {
					alert('d事件触发');
				}
			}
		})
</script>

上述代码可看到定义div嵌套，每层div都有一个点击事件，如果点击最内层，会由内到外依次触发div事件，此时如果需求是每个层对应指定的事件，不受嵌套关系影响，也就是说点击哪个层触发对应事件–》阻止冒泡
实现很简单，需要在哪个层阻止就在那个层添加：

@click.stop

<div style="background-color:red;width: 600px;height: 600px;" @click="a">
  <div style="background-color:blue;width: 500px;height: 500px;" @click="b">
	<div style="background-color:pink;width: 400px;height: 400px;" @click="c">
	  <div style="background-color:black;width: 300px;height: 300px;" @click.stop="d">
      </div>
	</div>
  </div>
</div>

那么我在点击d层时，只会弹出d对应的点击事件。

按钮点击单次：@click.once

设置了单击事件后，按钮对应的事件点击只生效一次…

<input type="text" v-model="msg" />
<button @click.once="e">只限点击一次</button>

<script type="text/javascript">
		new Vue({
			el: "#app",
			methods: {
				e() {
					this.info = this.msg;
					this.msg = '';
				}
			}
		})
	</script>

按键修饰符:@keyup.按键名

例如回车键触发方法e：

<input @keyup.enter='e' type="text" v-model="msg" />

select标签：

这里用双向绑定数据绑定下拉框，进行选择时会输出选中的值内容：

<select name="hobby" v-model="selectIds">
	<option v-for="d in datas" :value="d.name">{{d.name}}</option>
</select>
	选中的值：{{selectIds}}

script：

<script type="text/javascript">
		new Vue({
			el: "#app",
			data: {
				datas: [{
					id: '1',
					name: 'vue'
				}, {
					id: '2',
					name: 'java'
				}, {
					id: '3',
					name: 'html'
				}],
				selectIds: '',
			}
		})
	</script>

复选框:

<div v-for="d in datas">
	<input type="checkbox" :value="d.id" name="likes" v-model="selectIdArr" />{{d.name}}
</div>
	选中的值：{{selectIdArr}}

<script type="text/javascript">
		new Vue({
			el: "#app",
			data: {
				datas: [{
					id: '1',
					name: 'vue'
				}, {
					id: '2',
					name: 'java'
				}, {
					id: '3',
					name: 'html'
				}],
				selectIdArr: [],
			}
		})
	</script>

和下拉框不同的是选中的数据一定要用数组来装并显示

组件

<div id="app">
			<ul>
				<li>
					<h2>局部组件的注册</h2>
					<my-button></my-button>
				</li>
				<li>
					<h2>全局组件的注册</h2>
					<my-button2></my-button2>
				</li>
				<li>
					<h2>组件的通信（父传子）</h2>
					<my-button3 m='zs'></my-button3>
				</li>
				<li>
					<h2>组件的通信（子传父）</h2>
					<my-button3 @three-click="xxx" m='zs'></my-button3>
					
				</li>
			</ul>
		</div>

<script type="text/javascript">
		//全局组件
		Vue.component('my-button2', {
			template: '<button v-on:click="doSubmit">被点击了{{n}}次</button>',
			data() {
				return {
					n: 0,
				}
			},
			methods: {
				doSubmit() {
					this.n++;
				}
			}
		})
		//组件通信(父传子)
		Vue.component('my-button3', {
			props: ['m'],
			template: '<button v-on:click="doSubmit">被{{m}}点击了{{n}}次</button>',
			data() {
				return {
					n: 0,
					zedie: '折叠效果'
				}
			},
			//子传父,注册事件
			methods: {
				doSubmit() {
					this.n++;
					// 注册一个事件,让外部调用,然后顺便接收内部的值
					if (this.n % 3 == 0) {
						this.$emit('three-click', this.zedie);
					}
				}
			}
		})
		new Vue({
			el: "#app",
			data() {
				return {}
			},
			//局部组件注册
			components: {
				'my-button': {
					template: '<button @click="doSubmit">被点击了{{n}}次</button>',
					data() {
						return {
							n: 0
						}
					},
					methods: {
						doSubmit() {
							this.n++;
						}
					}
				}
			},methods:{
				xxx(v){
						alert(v);
				}
			}
		})
	</script>

over…