前言
vue的语法风格和标签版的JSP、springboot的thymeleaf非常类似,如果有这些基础,入门就很快。我们这里只看用得到的,更深的语法及原理还需要后续学习。本小节可以在上一节的基础上去实践,可以根据Vue官网查看更详尽的内容。
一、生命周期和常用元素
该部分的语句都应当在<script></script>标签内。
1、生命周期
生命周期略过,常用的生命周期就一个:mounted,它指的是Vue组件已经准备好了之后,页面渲染之前,应该做什么事情。一般在mounted里面都是调用HTTP请求,初始化页面渲染所需的动态数据。
示例:
mounted () {
hello().then((res) => {
this.msg = res.data
})
}
2、数据存放区
类似声明全局变量,可以是简单类型,可以是Object,可以有初始值,可以是数组,可以有嵌套,例如:
data () {
return {
msg: '',
msg2: 'aaaaaa',
msg3: [],
msg4: {
internalMessage: ''
}
}
}
在方法内调用的时候,要加this,例如:
this.msg = res.data
在<template>标签内调用,则可以直接写变量名,例如:
<div class="test-class">{{msg}}</div>
3、方法
可以自定义方法,可以带参数,可以写jquery在里面。
methods: {
handle (data) {
alert(data)
}
}
在template可以这样调用:
<template>
<button @click="handle(msg.data)">点我</button>
</template>
二、数据和事件
1、动态数据绑定
当绑定的数据变化时,会动态渲染。
老旧写法:v-bind
<template>
<button v-bind:id="id">点我</button>
</template>
<script>
export default {
data () {
return {
id: '1'
}
}
}
</script>
新写法,直接一个英文冒号,例如:
<button :id="id">点我</button>
2、事件绑定
老旧写法:v-on:,例如:
<template>
<button v-on:click="handle(msg.data)">点我</button>
</template>
新写法:@,例如:
<template>
<button @click="handle(msg.data)">点我</button>
</template>
3、监听键盘动作
常见的就是回车提交表单:
<input :keyup.enter="submit">
三、模板语法
1、显示文本
语法:
{{ 变量名 }}
例如:
<div class="test-class">{{msg}}</div>
2、条件渲染
语法:
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
应用场景:比如当某个数据有的时候显示数据,没有的时候则显示“空”,就会用到条件渲染。
3、循环
需要一个key,可以用默认的循环变量index,也可以用数据的ID:
<div v-for="(item, index) in itemList" :key="index">
<!-- 内容 -->
</div>
<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>
基本用这三个就OK,更复杂的例如表单数据绑定等等,已经有很多成熟的组件封装起来了。