1、{{message}} 插值表达式 取出Vue中的data(别忘了引入Vue.js)
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
message:'Hello World!'
}
})
</script>
2、v-if 、v-else 一对,用来判断是否进行加载(二者加载其一)
<div v-if="isLogin">欢迎您,Leah!</div>
<div v-else="isLogin">请登录!</div>
v-show 一直都加载 根据内部的判断条件,判断是否要将css样式置为不显示
<div v-show="isLogin">v-show,Leah!</div>
3、v-for 循环 可以使用computed:{} 对其在输出前进行排序
<ul>
<li v-for="item in Items">
{{item}}
</li>
</ul>
4、v-text 直接显示内容
<span v-text="message"></span>
v-html 可以解析html语言(但不建议使用)
<span v-html="message"></span>
5、v-on button功能监听
<button v-on:click="add">add</button>
<!-或-->
<button @click="add">add</button>
原生写法为:
<button onclick="add()">add</button>
6、v-model 绑定数据 (保证同时修改的为同一数据)
v-model.lazy 鼠标离开文本框的时候出现渲染
v-model.number 如果一开始在文本框中输入的是数字,则只能输数字
v-model.trim 去除空格
7、v-bind 处理html中的标签属性(可以为src进行动态赋值)
<img v-bind:src="imgSrc"/>
<!-或可简写为:-->
<img :src="imgSrc"/>
8、v-pre 原样输出,不渲染
v-cloak 渲染完成后才显示
v-once 只第一次渲染