1、{{msg}}
将表达式执行的结果 输出当前调用元素的innerhtml中;还可以将数据绑定到视图
<template>
<div class="hello">
<span>
{{message}}
</span>
</div>
</template>
<script>
export default{
data(){
return {
message: '页面加载于 ' + new Date().toLocaleString()
}
}
}
</script>
2、v-bind绑定属性,支持简写:
<template>
<div class="hello">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
</template>
<script>
export default{
data(){
return {
message: '页面加载于 ' + new Date().toLocaleString()
}
}
}
</script>
3、v-if (项目不显示是整个项目都没有)和v-show(项目有,但是加了display:none)类似
v-bind绑定属性
<template>
<div class="hello">
<p v-if="see">你可以看到我了</p>
</div>
</template>
<script>
export default{
data(){
return {
see:true
}
}
}
</script>
4、v-for 循环
<template>
<div class="hello">
<p v-for="(item,index) in items" :key="index">{{item.text}}-{{index}}</p>
</div>
</template>
<script>
export default{
data(){
return {
items:[
{text:'hi'},
{text:'hello'},
{text:'hehe'}
]
}
}
}
</script>
5、v-on事件绑定,缩写@
<template>
<div class="hello">
<p>{{message}}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
</template>
<script>
export default{
data(){
return {
message:'你好'
}
},
methods:{
reverseMessage:function(){
this.message=this.message.split('').reverse().join('')
}
}
}
</script>
6、v-model双向绑定 一般用于表单之间
<template>
<div class="hello">
<p>{{message}}</p>
<input v-model="message">
</div>
</template>
<script>
export default{
data(){
return {
message:'你好'
}
}
}
</script>
7、v-once只执行一次
8、v-html会输出文本
9、计算属性computed,只需计算一次,而调用方法会计算多次
<template>
<div class="hello">
<p>{{message}}</p>
<p>{{reverseMessage}}</p>
</div>
</template>
<script>
export default{
data(){
return {
message:'hi'
}
},
computed:{
reverseMessage:function(){
return this.message.split('').reverse().join('')
}
}
}
</script>
10、v-show
不同的是带有 v-show
的元素始终会被渲染并保留在 DOM 中。v-show
只是简单地切换元素的 CSS 属性 display
。
<template>
<div class="hello">
<div v-show="see">
A
</div>
</div>
</template>
<script>
export default{
data(){
return {
see:true
}
}
}
</script>