Vue基础语法知识梳理上篇

2023年6月11日上午3:13 • JavaScript

Vue基础语法知识梳理上篇是一篇介绍Vue.js框架基础语法的文章，本文将对该篇文章进行详细讲解。

一、Vue的基本使用方法

Vue.js框架可以通过以下标准方法进行使用：

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

其中，el是指Vue挂载到哪个元素上，data是指Vue中的数据对象，message是Vue实例中的一个属性，作为数据响应式的基础。

二、Vue指令

Vue指令是Vue.js的语法糖，用来对数据和DOM进行绑定和控制。常见的Vue指令包括v-model、v-if、v-for等。

1. v-model

v-model是Vue中用于实现表单数据双向绑定的指令。例如：

<input v-model="message">
<p>{{ message }}</p>

当用户在input框中输入内容时，{{ message }}也会实时更新。

2. v-if

v-if是Vue中用于实现条件渲染的指令。例如：

<div v-if="seen">Hello, Vue!</div>

当seen为true时，div元素会被渲染；当seen为false时，div元素不会被渲染。

3. v-for

v-for是Vue中用于循环渲染列表的指令。例如：

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

其中，items是一个数组，item是数组中的每一个元素。当items中有多个元素时，会生成多个li元素，每个li元素的值等于数组中的元素。

三、Vue事件处理

在Vue中，可以使用v-on指令来绑定DOM事件和Vue实例中的方法。例如：

<button v-on:click="greet">Greet</button>

new Vue({
  el: '#app',
  methods: {
    greet: function () {
      alert('Hello Vue!')
    }
  }
})

当按钮被点击时，greet方法会被触发，弹出alert框。

四、Vue计算属性和侦听属性

Vue中提供了计算属性和侦听属性两种方法，用于在Vue中对数据进行处理。

1. 计算属性

计算属性是Vue中用于对数据进行处理的方法。例如：

<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

在上述代码中，reversedMessage是通过对message进行处理而获得的计算属性。

2. 侦听属性

侦听属性是Vue中用于监听数据变化的方法。例如：

<p>{{ fullName }}</p>

new Vue({
  el: '#app',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

在上述代码中，当firstName或lastName的值发生变化时，fullName的值也会发生相应的变化。

五、Vue组件化

Vue中的组件化是指将一个页面拆分成多个组件，每个组件都有自己独立的模板、逻辑和样式。Vue中的组件可以通过以下方式进行定义和使用：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data () {
    return {
      title: 'Hello Vue!',
      content: 'This is my first Vue component.'
    }
  }
}
</script>

在上述代码中，定义了一个名为MyComponent的Vue组件，包含了title和content两个数据，以及对应的模板。

在使用组件时，可以通过以下方式进行调用：