Vue init webpack vue1

npm install

npm run dev

npm install axios -save

npm install element-ui -save

npm install mockjs --save

npm install axios-mock-adapter

npm install babel-runtime --save

 

Vue API

https://cn.vuejs.org/v2/api/

指令

v-text

更新元素的textContent。

<span v-text="msg"></span>同<span>{

{msg}}</span>

v-html

更新元素的innerHTML。

<div v-html="html"></div>

v-show

根据表达式的布尔值，切换元素的display CSS属性。

v-if

根据表达式的布尔值渲染元素。

v-else-if

表示v-if的"else if块"。可以链式调用。

v-else

为v-if或者v-else-if添加"else块"。

<div v-if="type === 'A'">

A

</div>

<div v-else-if="type === 'B'">

B

</div>

<div v-else>

Not A/B

</div>

v-for

基于源数据多次渲染元素或模板块。

<div v-for="item in items">

{

{ item.text }}

</div>

v-on

缩写@。绑定事件监听器。

<!-- 方法处理器 -->

<button v-on:click="doThis"></button>

<!-- 内联语句 -->

<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->

<button @click="doThis"></button>

v-bind

缩写:。动态地绑定一个或多个特性，或一个组件prop到表达式。

<!-- 绑定一个属性 -->

<img v-bind:src="imageSrc">

<!-- 缩写 -->

<img :src="imageSrc">

v-model

在表单控件或者组件上创建双向绑定。

v-pre

跳过这个元素和它的子元素的编译过程。

<span v-pre>{

{ this will not be compiled }}</span>

v-cloak

这个指令保持在元素上直到关联实例结束编译。

[v-cloak] {

display: none;

}

<div v-cloak>

{

{ message }}

</div>

不会显示，直到编译结束。

v-once

只渲染元素和组件一次。

<span v-once>This will never change: {

{msg}}</span>