vue 文档 (1) - 芒果文档

📌 相关文章

📜 vue 文档 (1)

📅 最后修改于: 2023-12-03 15:21:04.821000 🧑 作者: Mango

Vue 文档

Vue 是一款渐进式 JavaScript 框架，它提供了一种结构化的方式来构建 Web 应用程序。Vue 只关注视图层，但是与现代化的工具和支持库结合使用时,也完全能够扩展为广泛的、全面的框架。

安装

下载

你可以从官方网站下载 Vue 的最新版本。

CDN

如果你只想试试 Vue，而不想安装它,可以直接将 Vue 引入页面，使用 unpkg CDN 引入最新的 Vue 版本。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello Vue</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>

使用 Vue

模板语法

Vue 使用 模板语法 来将 DOM 作为基础的 HTML 模板进行渲染。

从技术上讲, Vue 模板是有效的 HTML,并且完全符合规范。在底层，所有的 Vue 模板都将转化为纯 JavaScript 渲染函数,因此 Vue 在性能上非常高效。

插值

最常用的语法是 “Mustache” 语法，即两个大括号中的表达式。

<span>Message: {{ message }}</span>

条件渲染

Vue 使用 v-if 指令来渲染一个元素，该元素只有在条件表达式返回 true 时才会渲染。

<span v-if="seen">Now you see me</span>

如果你想在 v-if 条件不满足时显示一些备用内容,可以使用 v-else 指令。

<div v-if="condition">
  <p>if block</p>
</div>
<div v-else>
  <p>else block</p>
</div>

循环

使用 v-for 指令可以根据一组数组的选项列表进行渲染。

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

计算属性

随着 JavaScript 表达式的复杂度增加，模板变得难以维护。因此,计算属性用于声明可复用的代码块，并将结果缓存以保持响应式。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

Class 与 Style 绑定

绑定 HTML class:

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

绑定内联样式：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

表单输入绑定

你可以使用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

<!-- text -->
<input v-model="message" placeholder="edit me">

<!-- textarea -->
<textarea v-model="message" placeholder="add multiple lines"></textarea>

<!-- select -->
<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

组件化应用构建

Vue 是一款允许你将应用拆分成组件的框架。

创建一个组件是通过调用 Vue.extend(componentDefinition) 创建一个 Vue 构造器:

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times!</button>'
})

然后将它作为一个自定义元素来使用：

<div id="components-demo">
  <button-counter></button-counter>
</div>

总结

本文提供了一些关于 Vue 的基础知识，包括安装、模板语法、计算属性、绑定、表单输入绑定和组件化应用构建等。

Vue 学习曲线比较平缓，在不断的使用和实践中可以让开发人员更好地掌握它。通过 Vue 渐进式的特性，你可以根据实际需要使用 Vue 的特性并逐步深入。