Vue入门学习笔记【基本概念、对象、过滤器、指令等】

下面是Vue入门学习笔记的完整攻略：

Vue.js 基本概念

Vue.js 是一个开源的前端 JavaScript 框架，用于构建用户界面，包括单页面应用程序（SPA）和可复用的 UI 组件。

Vue 的特点：

• 响应式数据绑定：Vue 内部维护着一个”响应式系统”，当数据发生变化时，依赖这些数据的视图会自动更新。
• 组件化：Vue 允许开发者将应用程序划分为一个一个的组件来开发和组装，组件可以复用，可以由多个组件共同组成组件树。
• 轻量级：Vue 的体积相比其它框架非常小，只有 24KB。

Vue 对象

一个 Vue 实例就是一个基本的 Vue 对象，它包含了所需的数据、功能和效果。我们可以通过 new Vue({}) 来创建一个 Vue 对象。

下面是创建一个 Vue 实例的示例：

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

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

这个例子中，我们创建了一个 Vue 实例，并通过 el 属性指定把 vue 应用程序挂载在 HTML 元素 #app 上，使用 data 属性定义了一个 message 属性的初始值为 'Hello Vue!'。

Vue 过滤器

Vue 允许我们对 {{表达式}} 中的数据进行过滤。这样在显示数据时就可以将数据进行格式化。Vue 过滤器使用过滤器函数来处理数据。

下面是一个简单的过滤器函数的示例：

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

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  filters: {
    reverse: function (value) {
      return value.split('').reverse().join('')
    }
  }
})
</script>

我们通过 filters 属性定义了一个名为 reverse 的过滤器函数，该函数接受一个参数 value，将 value 转换为数组并使用 reverse() 方法进行反转，最后使用 join() 方法将结果拼接成一个字符串并返回。在模板中我们使用 | 符号将 message 数据传递给名为 reverse 的过滤器函数进行处理。

Vue 指令

Vue 中的指令用于将行内样式、CSS 类、绑定事件等应用到元素中。指令以 v- 开头，后面跟着指令的名称。指令的实际行为是通过监听 DOM 元素上的事件来更新数据。

下面是一个使用 v-bind 指令的示例：

<div id="app">
  <div v-bind:class="{ active: isActive }"></div>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>

在这个示例中，我们使用 v-bind:class 指令将 isActive 数据绑定到 class 属性上，当 isActive 为 true 时该元素的 class 属性值为 'active'。

下面是一个使用 v-on 指令的示例：

<div id="app">
  <button v-on:click="incrementCounter">Click me</button>
  <p>Counter: {{ counter }}</p>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods: {
    incrementCounter: function () {
      this.counter++
    }
  }
})
</script>

在这个示例中，我们使用 v-on:click 指令将 incrementCounter 方法绑定到 click 事件上，每次点击按钮时都会执行 incrementCounter 方法，该方法会将 counter 加 1，最后在模板中显示 counter 的值。

总结：

这篇文章介绍了 Vue 的基本概念、Vue 对象、Vue 过滤器、Vue 指令等。Vue 是一个功能强大的 JavaScript 框架，可以轻松地构建高性能、可维护的前端应用程序。

示例代码中使用的是 CDN 加载 Vue，如果想要在本地搭建 Vue 开发环境，可以使用 Vue CLI 进行创建。