Vue
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>