# vue2常用语法
```html
Title
```
element-ui
```
https://element.eleme.cn/#/zh-CN/component/form
```
## 1. 常用标签
输入框：
```html
// 绑定点击事件，clickme 是一个方法名，改方法定义在script里面
```
## 2. vue常用指令
### 2.1 v-bind 绑定
> 常用来动态绑定标签的属性。想要修改js里的值属性同步发生变化
- 简写格式
```html
001
002
003
004
```
- 一次性绑定多个属性值或者
```html
// script 的data中，rolePanelParams = {href: url, title: '百度链接'}
// v-bind="{href: url, title: '百度链接'}"会将元素的href属性绑定到变量url的值，title属性绑定到字符串’百度链接’
```
- 给某一个属性比如class绑定多个值
```html
004
// 其中script 的data中，Dict = {info:false, danger: false}
10 20
// 其中script 的data中，a1=10,a2=20
```
- 使用三元表达式为属性赋值
```html
xxx 20
// 这里的 'xxx' 就是一个字符串
// 条件成立src="['xxx',a2]"
// 条件不src="[a1,a2]"
// 其中script 的data中，a1=10,a2=20
```
- v-bind 绑定属于单向绑定
```html
{{text}}
```
### 2.2 v-modle 双向绑定
> 一般用于在用户交互，例如：input、select、textarea等。【双向绑定】
教程：https://www.bilibili.com/video/BV1bG4y1w7Vb?p=77&vd_source=7f93e0882fd754a876ce5807c02287f4
### 2.3 v-for 循环
教程：https://www.bilibili.com/video/BV1bG4y1w7Vb?p=78&vd_source=7f93e0882fd754a876ce5807c02287f4
### 2.4 v-on 事件绑定
```html
v-onyclick
v-on:dblclick
v-on:mouseover,
v-on:mouseout,
v-on:change
v-on:focus
```
```html
```
其中 @close="onResetForm"中的@close
在Vue.js中，使用`@`符号是一种简写方式，用于绑定事件监听器。它等同于使用`v-on`指令。所以`@close="onResetForm"`等同于`v-on:close="onResetForm"`。
教程：https://www.bilibili.com/video/BV1bG4y1w7Vb?p=79&vd_source=7f93e0882fd754a876ce5807c02287f4
### 2.5 数据管理 练手
数据的管理包括对数据：展示、动态添加、削除、修改。
教程：https://www.bilibili.com/video/BV1bG4y1w7Vb?p=80&vd_source=7f93e0882fd754a876ce5807c02287f4
### 2.6 v-if
### 2.7 v-show
### 4 父子页面传值 (主：用户列表页面、子：新增用户弹窗)
```html
// 用户列表 - 主页面