Vue2_入门体验

简介: Vue2_入门体验

@TOC

表单的双向绑定

v-model的使用
image.png

组件

template渲染
image.png

props传递参数
image.png

class和style

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

自动收缩导航栏

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

效果1

image.png

效果2

image.png

代码:我的仓库

目录
相关文章
|
6天前
|
JavaScript 开发者 UED
Vue入门到关门之第三方框架elementui
ElementUI是一个基于Vue.js的组件库,包含丰富的UI组件如按钮、表格,强调易用性、响应式设计和可自定义主题。适用于快速构建现代化Web应用。官网:[Element.eleme.cn](https://element.eleme.cn/#/zh-CN)。安装使用时,需在项目中导入ElementUI和其样式文件。
18 0
|
6天前
|
存储 JavaScript 前端开发
从入门到项目实战 - Vue 列表渲染
从入门到项目实战 - Vue 列表渲染
58 0
|
6天前
|
JavaScript 前端开发 程序员
vue入门
vue入门
24 0
|
4天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
10 1
|
5天前
|
JavaScript 定位技术 API
OpenLayers入门-第二篇、在vue3中使用elementplus制作图层控件,图层切换,显示隐藏,图层排序
OpenLayers入门-第二篇、在vue3中使用elementplus制作图层控件,图层切换,显示隐藏,图层排序
|
6天前
|
JavaScript
Vue入门(二)
Vue入门(二)
17 0
|
6天前
|
缓存 JavaScript
【Vue】小例子入门以及生命周期探讨
【Vue】小例子入门以及生命周期探讨
14 0
|
6天前
|
JavaScript 前端开发 内存技术
Vue入门:构建你的第一个Vue应用程序
【4月更文挑战第22天】Vue.js 入门教程:安装 Node.js 和 npm,使用 Vue CLI (`npm install -g @vue/cli`) 创建项目,选择预设或自定义配置。在 `src/components/` 创建 `HelloWorld.vue` 组件,显示数据属性。在 `App.vue` 中引入并注册组件,启动开发服务器 (`npm run serve`) 预览。开始你的 Vue 之旅!
|
6天前
|
存储 缓存 JavaScript
【Vue】day02-Vue基础入门
【Vue】day02-Vue基础入门
69 0
【Vue】day02-Vue基础入门
|
6天前
|
存储 Web App开发 JavaScript
【Vue】day01-Vue基础入门
【Vue】day01-Vue基础入门
52 0