【精选】Vue2_入门体验

vue2入门体验

前言

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

vue2是什么

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

vue2的双向绑定

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

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

示例代码如下:

xml 复制代码
<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-bindv-on指令的缩写:@。这些指令可以在组件的模板中灵活地使用,满足不同场景下的数据交互需求。

vue2的参数传递

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

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

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

表单的双向绑定

v-model的使用

组件

template渲染

props传递参数

class和style

v-bind:class按钮控制css样式

自动收缩导航栏

思路:通过事件触发css样式。

左侧导航栏左移,主菜单跟随左移

改变x方向的属性translateX

效果1
效果2

代码块:

html 复制代码
<!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>

结束

本文分享笔记结束,感谢你的阅读,如有不足或者错误欢迎指出!

代码:我的仓库

相关推荐
Bug从此不上门6 分钟前
Nuxt3之使用lighthouse性能测试及性能优化实操
前端·javascript·性能优化·vue·fetch·nuxt3
拼图20934 分钟前
Vue.js开发基础——数据绑定/响应式数据绑定
前端·javascript·vue.js
刘志辉39 分钟前
vue反向代理配置及宝塔配置
前端·javascript·vue.js
oliveira-time1 小时前
爬虫学习8
开发语言·javascript·爬虫·python·算法
海绵波波1072 小时前
Webserver(4.5)复用
android·开发语言·javascript
老胡说前端2 小时前
vue3 elemnetPlus table 数据id 相同的合并单元格
javascript·vue.js·elementui
废柴小z2 小时前
从零创建vue+elementui+sass+three.js项目
javascript·vue.js·elementui
郑小憨2 小时前
Node.js NPM以及REPL(交互式解释器) 使用介绍(基础介绍 二)
开发语言·前端·javascript·npm·node.js
嚣张农民2 小时前
在 WebSocket 连接中出现错误时,如何处理和捕获错误?
前端·javascript·面试
解道Jdon2 小时前
Mill:比Maven快10倍的JVM构建工具
javascript·reactjs