前言
本文纯属自己学习vue的笔记，如果有任何错误欢迎大神指出！
文本渲染
通过span标签我们可以渲染文本，可以直接写<span>文本</span>，也可以通过<span>{{变量名}}</span>进行数据绑定
<template>
<span>{{message}}</span>
</template>
<script>
export default {
name: 'test',
data () {
return {
message: 'hello vue'
}
}
}
</script>
span
监听点击事件
通过v-on添加一个点击的监听器
<template>
<div class="container">
<span>{{message}}</span>
<button v-on:click="changeText">点击改变文字</button>
</div>
</template>
<script>
export default {
name: 'test',
data () {
return {
message: 'hello vue!'
}
},
methods: {
changeText () {
this.message = 'lxt'
}
}
}
</script>
click
if判断
通过v-if="布尔值"来决定是否显示
<template>
<div class="container">
<span v-if="flag">通过if判断是否显示</span>
<button class="btn" v-on:click="changeFlag">点击我改变flag</button>
</div>
</template>
<script>
export default {
name: 'test',
data () {
return {
flag: true
}
},
methods: {
changeFlag () {
this.flag = !this.flag
}
}
}
</script>
if判断.gif
for循环
我们可以通过v-for来渲染列表
<template>
<div class="container">
<ol>
<li class="li" v-for="item in items">
{{item.text}}
</li>
</ol>
</div>
</template>
<script>
export default {
name: 'test',
data () {
return {
items: [
{text: 'hello vue'},
{text: '来吧，学习for循环吧'},
{text: '渲染完毕'},
]
}
}
}
</script>
<style>
.container {
flex-direction: column;
display: flex;
align-items: center;
}
.li {
text-align: start;
}
</style>
for
input双向绑定
通过v-model可以轻松实现表单输入和应用状态之间的双向绑定
<template>
<div class="container">
<span>{{message}}</span>
<input v-model="message"/>
<button v-on:click="changeText">点击改变文字</button>
</div>
</template>
<script>
export default {
name: 'test',
data () {
return {
message: 'hello vue!'
}
},
methods: {
changeText () {
this.message = 'lxt'
}
}
}
</script>
v-model
