Vue.js核心概念与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/what_to/article/details/98241546

Vue 基本语法

样式绑定
事件处理器
组件
局部Vue组件
父组件传值给子组件
子组件传值给父组件
全局Vue组件

样式绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>vue的样式绑定</title>
		<style>
			.a{
				color: red;
			}
			.b{
				color: pink;
			}
			.c{
				font-size: 36px;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>文本</h3>
					{{msg}}
				</li>
				<li>
					<h3>样式一</h3>
					<div :class="xa">{{msg}}</div>
				</li>
				<li>
					<h3>样式二</h3>
					<div :class="xb">{{msg}}</div>
				</li>
				<li>
					<h3>样式三</h3>
					<div :class="xc">{{msg}}</div>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: "#app",
			data() {
				return {
					msg: 'hello vue',
					xa:'a',
					xb:'b',
					xc:['a','c']
				};
			}
		});
	</script>
</html>

效果展示
在这里插入图片描述

事件处理器

防止事件冒泡

<h3>防止事件冒泡</h3>
	<div style="height: 300px;width: 300px;background-color: #FFC0CB; " @click="a">
		<div style="height: 200px;width: 200px;background-color: aliceblue; " @click="b">
			<div style="height: 100px;width: 100px;background-color: aqua; " @click="c">
				<div style="height: 50px;width: 50px;background-color: blanchedalmond;" @click.stop="d">

				</div>
			</div>
		</div>
	</div>

事件只能点击一次

	<li>
		<h3>事件只能点击一次(模拟聊天信息发送) </h3>
		{{qqmsg}}<input type="text" v-on:keyup.enter="send" v-model="msg" />
		<button @click="send">发送</button>
		<button @click.once="send">点一次</button>
	</li>

methods: {
	send() {
		this.qqmsg = this.msg;
		this.msg = null;
		}
}

表单中的复选框

<li>
	<h3>表单中的复选框 </h3>
	<div v-for="item,index in hobby">
		<input type="checkbox" v-model="checkedIds" name="hobby" :value="item.id" />{{item.name}}
	</div>
		{{checkedIds}}
</li>

data() {
	return {
		msg: 'hello vue',
		qqmsg: null,
		hobby: [{
			id: '1',
			name: '篮球'
		}, {
			id: '2',
			name: '唱'
		}, {
			id: '3',
			name: '跳'
		}],
	checkedIds:[],

表单中的下拉框

<li>
	<h3>表单中的下拉框 </h3>
	<select name="likes" v-model="selectedId">
		<option v-for="item,index in hobby" :value="item.id">{{item.name}}</option>
	</select>
	{{selectedId}}
</li>

data() {
msg: 'hello vue',
		qqmsg: null,
		hobby: [{
			id: '1',
			name: '篮球'
		}, {
			id: '2',
			name: '唱'
		}, {
			id: '3',
			name: '跳'
		}],
	selectedId:null
};

效果如下
在这里插入图片描述

组件

局部Vue组件

<h3>局部Vue组件</h3>
<my-button></my-button>

components:{
	'my-button':{
			template:'<button @click="doxxx">自定义按钮，被zs点击了{{n}}次</button>',
			data() {
				return {
					n: 0,
				};
			},
			methods:{
				doxxx(){
					this.n++;
			},
		}
	}
},

父组件传值给子组件

<li>
	<p>父主键传值子主键</p>
	<my-button m="狗蛋"></my-button>
</li>

components:{
	'my-button':{
		props:['m'],
		template:'<button @click="doxxx">自定义按钮，被{{m}}点击了{{n}}次</button>',
		data() {
			return {
				n: 0,
			};
		},
		methods:{
			doxxx(){
				this.n++;
			},
		}
	}
},

子组件传值给父组件

<li>
	<p>子主键传父组件</p>
	<my-button @three-click="doSSS"></my-button>
</li>

methods:{
	doSSS(n,x,y){
		alert(n);
		alert(x);
		alert(y);
	}
},
components: {
	'my-button': {
		/* 主键模板样式 */
		template:'<button @click="doXXX" >自定义按钮，被{{m}}点击了{{n}}次</button>',
		data() {
			return {
				n: 0
			}
		},
		methods:{
			doXXX(){
				this.n++;
				this.$emit('three-click',this.n,'xyx','描述');
			},
		}
	}
}

全局Vue组件

<li>
	<p>全局vue组建的注册</p>
	<my-button2 ></my-button2>
</li>

Vue.component('my-button2',{
	template:'<button @click="doxxx">自定义按钮，被{{m}}点击了{{n}}次</button>',
	data() {
		return {
			n: 0,
		};
	},
	methods:{
		doxxx(){
			this.n++;
			this.$emit('three-click',this.n,'xyx','描述');
		},
	}
})

效果图为
在这里插入图片描述