go17/skills/web/vue-project/README.md

# vue-project

## Vue 模版语法

```vue
<template>
  <div class="about">
    <h1>This is an about {{ pageName }} page</h1>
    <hr />
    <input v-model="inputData" type="text" />
    <hr />

    {{ person.name }}, {{ person.age }}
  </div>
</template>
```

`{{ }}` vue的模版语法, 需要vue编译器, 编程普通的 js语法

### 标签的文本值

HTML标签里 所有的 InterText的值，都可以使用`{{}}`来访问, element.innerText

### 元素属性binding

```html
<hr />
<!-- 操作这个元素，然后通过Set Attri -->
<!-- 一套独立的语法，获取元素的属性，然后来实现属性的绑定 -->
<!-- person.name -> element Set attri: v-bind -->
<!-- 为元素绑定动态属性 -->
<!-- v-bind -> : -->
<span name="静态变量" :id="person.name">{{ person.name }}, {{ person.age }}</span>
```

### 元素事件binding

```html
<button v-show="false" @click="buttonClickHandler">确定</button>
```

### 表单bindding

```html
<input v-model="inputData" type="text" />
```

https://cn.vuejs.org/guide/essentials/forms.html

### 元素内联样式binding

沿用v-bing 这个属性绑定语法: style 这种 样式设置，他有特殊的结构, 样式属性：

```
{
    color: bule,
    backgrouClor: blue;
}
```

```html
<div>Picked: <span :style="">{{ picked }}</span></div>

<input type="radio" id="red" value="red" v-model="picked" />
<label for="red">Red</label>

<input type="radio" id="blue" value="blue" v-model="picked" />
<label for="blue">Blue</label>
```

### 元素class样式binding

```html
<div>Picked: <span :class="[picked]">{{ picked }}</span></div>

<input type="radio" id="red" value="red" v-model="picked" />
<label for="red">Red</label>

<input type="radio" id="blue" value="blue" v-model="picked" />
<label for="blue">Blue</label>
```

### 条件渲染

```html
<button v-if="true" @click="buttonClickHandler">确定</button>
```

### 列表渲染

```html
<ul>
  <li v-for="item in drinks" :key="item">{{ item }}</li>
</ul>
```