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-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
代码块:
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>
结束
本文分享笔记结束,感谢你的阅读,如有不足或者错误欢迎指出!
代码:我的仓库