96 lines
1.9 KiB
Markdown
96 lines
1.9 KiB
Markdown
# 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>
|
||
```
|