vue-project
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
<hr />
<!-- 操作这个元素，然后通过Set Attri -->
<!-- 一套独立的语法，获取元素的属性，然后来实现属性的绑定 -->
<!-- person.name -> element Set attri: v-bind -->
<!-- 为元素绑定动态属性 -->
<!-- v-bind -> : -->
<span name="静态变量" :id="person.name">{{ person.name }}, {{ person.age }}</span>
元素事件binding
<button v-show="false" @click="buttonClickHandler">确定</button>
表单bindding
<input v-model="inputData" type="text" />
https://cn.vuejs.org/guide/essentials/forms.html
元素内联样式binding
沿用v-bing 这个属性绑定语法: style 这种 样式设置，他有特殊的结构, 样式属性：
{
color: bule,
backgrouClor: blue;
}
<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
<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>
条件渲染
<button v-if="true" @click="buttonClickHandler">确定</button>
列表渲染
<ul>
<li v-for="item in drinks" :key="item">{{ item }}</li>
</ul>