Vue笔记（1）

1.Vue是什么

渐进式javacript框架, 一套拥有自己规则的语法

2.为什么学习Vue

花更少的时间,干更多的活. 开发网站速度更快。

3.库和框架的区别

库: 封装的属性或方法 (例jquery.js)

框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js）

4.Vue基础

4.1.插值表达式:

目的: 在dom标签中, 直接插入内容

又叫: 声明式渲染/文本插值

语法: {{ 表达式 }}

代码展示：

结果展示：

4.2.vue指令 v-on：

语法：（1）v-on:事件名="要执行的==少量代码=="

（2）v-on:事件名="methods中的函数"

（3）v-on:事件名="methods中的函数(实参)"

简写: @事件名="methods中的函数"

代码展示：

 结果展示：

4.3.vue指令 v-show：

目标: 控制标签的隐藏或出现

语法: v-show="vue变量"

 

 当isOk换成flase时：

 

 5.小练习：折叠面板

<template>
	<div class="panel">
		<h3>案例：折叠面板</h3>
		<div>
			<div class="title">
				<h4>芙蓉楼送辛渐</h4>
				<span class="btn" @click="showHandle">
					{{ isShow ? "收起" : "展开" }}
				</span>
			</div>
			<div class="container" v-show="isShow">
				<p>寒雨连江夜入吴,</p>
				<p>平明送客楚山孤。</p>
				<p>洛阳亲友如相问，</p>
				<p>一片冰心在玉壶。</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isShow: true,
			};
		},
		methods: {
			showHandle() {
				this.isShow = !this.isShow;
			},
		},
	};
</script>

<style lang="less" scoped>
	.panel {
		width: 400px;
		margin: 20px auto;
		background-color: #fff;
		border: 4px solid blueviolet;
		border-radius: 1em;
		box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
		padding: 1em 2em 2em;

		h3 {
			text-align: center;
		}

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border: 1px solid #ccc;
			padding: 0 1em;
		}

		.title h4 {
			line-height: 2;
			margin: 0;
		}

		.container {
			border: 1px solid #ccc;
			padding: 0 1em;
		}

		.btn {
			cursor: pointer;
		}
	}
</style>

 结果显示：