Vue2_入门体验

yma16

已于 2023-06-30 00:07:40 修改

阅读量3.5w

点赞数

文章标签： css html vue

于 2020-11-21 00:01:05 首次发布

yma16

本文链接：https://blog.csdn.net/qq_38870145/article/details/109776632

版权

vue2入门体验

前言

大家好，我是yma16，本文分享自己的学习vue2的入门笔记

vue2是什么

Vue2是一种流行的JavaScript框架，用于构建用户界面和单页应用程序。Vue2具有响应式和可组合的视图组件系统，使开发人员可以轻松地构建复杂的用户界面。Vue2还提供了许多其他功能，例如路由管理、状态管理和插件系统。Vue2是Vue.js框架的第二个主要版本，于2016年发布。

vue2的双向绑定

Vue2的双向绑定是指将模板中的数据和组件实例中的数据相互绑定，当一个数据发生变化时，另一个数据也会发生变化，从而实现在模板和组件之间的数据交互。

双向绑定可以通过v-model指令来实现。v-model指令可以绑定到表单的输入控件上，如<input>、<textarea>等，当表单的值发生变化时，组件实例中的数据也会相应地发生变化，反之，如果组件实例中的数据发生变化，表单的值也会相应地更新。

示例代码如下：

<template>
  <div>
    <input v-model="message" type="text">
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: ''
      }
    }
  }
</script>

在上面的代码中，<input>标签通过v-model指令与组件实例中的message数据双向绑定。当用户输入内容时，message数据会随之更新，同时在<p>标签中展示实时的message数据。当message数据发生变化时，<input>标签的值也会随之更新。

除了v-model指令外，Vue2还提供了其他指令来实现双向绑定，如v-bind和v-on指令的缩写:和@。这些指令可以在组件的模板中灵活地使用，满足不同场景下的数据交互需求。

vue2的参数传递

在Vue2中，有多种方式可以进行参数传递：

props传递：通过在父组件中定义props属性，将数据传递给子组件。在子组件中通过props属性接收父组件传递的值。
自定义事件传递：在子组件中通过$emit触发事件，将事件传递给父组件。父组件可以通过在子组件上绑定自定义事件v-on监听子组件的事件。
父子组件数据共享：使用Vuex来实现全局状态管理，可以让多个组件共享同一个状态数据。
$refs传递：可以通过在父组件中定义ref属性，来获取子组件的实例对象。从而可以通过子组件实例对象的属性和方法，与子组件进行交互。

以上是Vue2中常用的参数传递方式，开发者可以根据具体需求选择最适合的方式。

表单的双向绑定

v-model的使用
在这里插入图片描述

组件

template渲染
在这里插入图片描述
props传递参数

class和style

v-bind:class按钮控制css样式
在这里插入图片描述

自动收缩导航栏

思路：通过事件触发css样式。
左侧导航栏左移，主菜单跟随左移
改变x方向的属性translateX

效果1

在这里插入图片描述

效果2

在这里插入图片描述
代码块:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>侧边栏</title>
		<!-- 引入阿里图标和vue -->
		<script src="//at.alicdn.com/t/font_1957918_yovoq1vtjq.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
		<style>
			/* 图标样式 */
			.icon {
				       width: 2em; height: 2em;//1em=16px
				       vertical-align: -0.15em;
				       fill: currentColor;
				       overflow: hidden;
				    }
			
/* 			*{
				margin: 0px;
				padding: 0px;
				box-sizing:border-box;
			} */
			.page{
				/* display: block; */
				width: 100vw;
				height:100px;
				background-color: #62ebd5;
				position: fixed;
				left:0;
				top:0;
			}
			.leftpage{
				width:200px;
				height:100vh;
				position: fixed;
				left:0;
				top:100px;
				transform:translateX(0vw);
				/* 位置100不显示 */
				background-color: #078bff;
				transition: transform 1s;
			}
			.activeleft{
				transform:translateX(-50vw);
				/* 位置50的时候显示在右边，100到50,从右边到左边 */
			}
			.rightpage{
				width:100vw;
				height:100vh;
				position: fixed;
				right:0;
				top:100px;
				transform:translateX(200px);
				/* 位置100不显示 */
				background-color: #ff985c;
				transition: transform 0.6s;
			}
			.activeright{
				transform:translateX(0vw);
				}
			/* 从左往右，再从右往左逆向 */
		</style>
	<body>
		<div id="app">
			
			<div class="page">
				
				<button @click="css_control" type="button" v-show="!isFlag">隐藏</button>
				<button @click="css_control" type="button" v-show="isFlag">显示</button>
				<form v-show="isFlag" action="" method="post">
					<input type="text" name="username" v-model="username" placeholder="username" value=""/>
					<input type="submit" @click.prevent="submitMethod" value="提交">
					
					<!-- 阻止表单提交 click.prevent-->
				</form>
			</div>
			
			<div class="leftpage" v-bind:class="{activeleft:isFlag}">
				<h1>菜单栏</h1>
			</div>
			<div class="rightpage" v-bind:class="{activeright:isFlag}">
				<h1>主界面</h1>
				</div>
				
		</div>
		<script>
			let app=new Vue(
			{
				el:"#app",
				data:{
					isFlag:false
				},methods:{
					css_control:function(){
						this.isFlag=!this.isFlag
					}
				}
			})
		</script>
	</body>
</html>