vue基本语法2

样式绑定

<li>
	<h3>样式绑定</h3>
	<span :class='textb'>犯我华夏，虽远必诛</span>
</li>
<script type="text/javascript">
		var vm=new Vue({
			el:'#acc',
			data:function(){
				return{
					textColor:'cl',
					textb:'b',
				}
			}
			
		})
</script>

事件处理器

事件监听可以使用v-on 指令

<li>
	<h3>事件处理-按钮只能点击一次</h3>
	{{info}}<input type="text" v-model="msg" />
	<button @click="e">无限点击</button>
	<button @click.once="e">发送一次</button>
</li>
<li>
	<h3>按键修饰符</h3>
	{{info}}<input type="text" v-model="msg" v-on:keyup.enter="e" />
	<button @click="e">无限点击</button>
	<button @click.once="e">发送一次</button>
</li>
<script type="text/javascript">
		var vm=new Vue({
			el:'#acc',
			data:function(){
				return{
					msg:'',
					info:''
				}
			},
			methods:{
				a(){
					alert('a事件触发');
					alert(this.selectedIds);
				},
				b(){
					alert('b事件触发');
				},
				e(){
					this.info=this.msg;
					this.msg='';
				}
			}
			
		})
</script>

vue表单

用v-model指令在表单控件元素上创建双向数据绑定

3.1 常用控件
文本框/密码框/文本域/隐藏域
单选复选框/多选复选框
单选按钮
下拉框

<li>
	<h3>select标签</h3>
	<select name="hobby" v-model="selectedIds">
		<option v-for="d in datas" :value="d.id">{{d.name}}</option>
	</select>
	选中的值：{{selectedIds}}
</li>
<li>
	<h3>checkbox标签</h3>
	<div v-for="d in datas">
		<input type="checkbox" :value="d.name" name="likes" v-model="selectedIdArr" />{{d.name}}
	</div>
	选中的值：{{selectedIdArr}}
</li>

<script type="text/javascript">
		var vm=new Vue({
			el:'#acc',
			data:function(){
				return{
					datas:[{
						id:1,
						name:'象棋'
					},{
						id:2,
						name:'围棋'
					},{
						id:3,
						name:'五子棋'
					}],
					selectedIds:'',
					selectedIdArr:[]
				}
			}
			
		})
</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>