vue2入门体验
- 前言
- vue2是什么
- vue2的双向绑定
- vue2的参数传递
- 表单的双向绑定
- 组件
- class和style
- 自动收缩导航栏
- 效果1
- 效果2
- 结束
前言
大家好，我是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>结束
本文分享笔记结束，感谢你的阅读，如有不足或者错误欢迎指出！
代码：我的仓库
