引用Vue
<script src="https://unpkg.com/vue"></script>
|
或者通过其他CDN引用，比如http://www.bootcdn.cn/。
插入文本
{{ message }}<span v-text='message'/><div v-html='message'/>
双向绑定v-model
使用v-model可以实现表单输入和应用状态之间的双向绑定。一般是在input,textarea,select标签下使用。
<input type='text' v-model='message'>
<span>Your message is : {{ message }}</span>
<script async src="//jsfiddle.net/keer2345/tpkon0es/1/embed/result,html,js,css/light/"></script>
## 循环`v-for`
```html
<ul>
<li v-for='list in lists'>{{ list }}</li>
</ul>
|
更多的v-model特性
v-model.lazy 惰性更新状态v-model.term 将前后空格去掉。
更多的v-model使用
属性绑定v-bind
<div id='app'>
<a v-bind:class='{active: isActive}' v-bind:href='url'>
Home
</a>
<img v-bind:src='img'/>
</div>
|
v-bind可以忽略，用冒号:代替，比如<a :href='url'>Home</a>。
v-on
v-on可以简写成@，比如<button @click='onClick'>Click Me</button>。
控制流指令v-if
<div v-if="role='admin' || role=='super_admin'">
I am a Administrator.
</div>
<div v-else-if="role=='hr'">
...
</div>
<div v-else>
...
</div>
|
计算属性computed
比如计算各科成绩的总分以及平均分：
Math:
<input type='text' v-model.number='math'>
English:
<input type='text' v-model.number='english'>
Physics:
<input type='text' v-model.number='physics'>
Sum: {{ sum }}, Average: {{avg}}.
|
var app = new Vue({
el:'#app',
data:{
math:90,
english:80,
physics:70,
},
computed:{
sum: function(){
return parseFloat(this.math) + this.english + this.physics;
},
avg: function(){
return Math.round(this.sum / 3);
},
}
})
|
组件component
全局组件与局部组件
组件的传参(父子通信)：
组件的传参(子父通信)：
任意及平行组件间通信：
过滤器filter