文章目录

前言

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,更复杂的例如表单数据绑定等等,已经有很多成熟的组件封装起来了。


转载请注明出处http://www.bewindoweb.com/284.html | 三颗豆子
分享许可方式知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
重大发现:转载注明原文网址的同学刚买了彩票就中奖,刚写完代码就跑通,刚转身就遇到了真爱。
你可能还会喜欢
具体问题具体杠