Vue.js 实例介绍

Vue.js 是一款流行的前端 JavaScript 框架，它采用 MVVM 架构模式，通过数据绑定和组件化的方式来构建用户界面。Vue.js 可以用于构建单页面应用 (SPA) 和多页面应用，也可以与其他库或框架 (如 React、Angular) 结合使用。

Vue 实例

Vue.js 应用的核心是 Vue 实例，它是 Vue.js 的入口。每个 Vue 应用都是通过创建 Vue 实例来实现的。

创建 Vue 实例

我们可以通过以下代码创建一个简单的 Vue 实例：

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

上面的代码中，el 属性指定了 Vue 实例所控制的根元素，data 属性指定了 Vue 实例的数据对象。

Vue 实例的属性和方法

Vue 实例除了 el 和 data 属性外，还有许多其他的属性和方法，包括但不限于：

• methods：定义 Vue 实例的方法。
• computed：定义计算属性。
• watch：观察实例的数据变化并做出相应的回调。
• props：定义组件的传入属性。
• emit：触发当前组件实例上的自定义事件。
• mounted：Vue 实例挂载到 DOM 后执行的钩子函数。

模板语法

Vue 实例与模板之间通过模板语法来进行绑定。模板语法类似于 HTML，但具有 Vue.js 的一些特殊语法。

文本插值

我们可以使用双花括号来进行文本插值：

<div>{{ message }}</div>

注意：双花括号内可以包含任意 JavaScript 表达式。

指令

Vue.js 提供了多种指令，可以用来绑定元素属性、条件渲染、循环等。

以下是一些常用指令的示例：

v-bind

该指令用于绑定元素属性，例如：

<img v-bind:src="imgSrc">

上面的代码中，v-bind 绑定了 src 属性，使得 img 元素的 src 属性值与 imgSrc 变量的值相同。

我们可以使用简化写法 :src="imgSrc" 来代替 v-bind。

v-if

该指令用于条件渲染，例如：

<p v-if="show">{{ message }}</p>

上面的代码中，如果 show 变量的值为 true，则文本消息会被渲染，否则不会渲染。

v-for

该指令用于循环渲染，例如：

<ul>
  <li v-for="(item, index) in items">
    {{ index }}: {{ item }}
  </li>
</ul>

上面的代码中，v-for 循环遍历 items 数组，对数组中的每个元素都生成一个 <li> 元素。

计算属性

计算属性是一种特殊的属性，它可以根据其他数据属性的变化而变化。计算属性是依赖缓存的，只有当计算属性所依赖的数据发生变化时，计算属性才会重新计算。

以下是一个计算属性的示例：

var vm = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

上面的代码中，fullName 是一个计算属性，它返回 firstName 和 lastName 的拼接结果。

总结

Vue.js 本文简要介绍了 Vue 实例、Vue 模板语法、指令和计算属性等基础概念。掌握这些基础概念对于使用 Vue.js 来构建 Web 应用是非常重要的。