Vue.js

Vue.js 是一个渐进式的 JavaScript 框架，用于构建单页面应用（SPA）和用户界面（UI）。

特点

• 简单易学：Vue.js 使用简单的模板语法，易于理解和学习。
• 数据驱动：Vue.js 将数据绑定到 HTML 上，数据的改变会自动更新视图。
• 组件化开发：Vue.js 的组件化开发方式使得代码复用更加容易，结构更加清晰。
• 快速渲染：Vue.js 将数据和 UI 分离，通过虚拟 DOM 技术和异步渲染实现快速渲染。
• 轻量级：Vue.js 框架本身很轻量，不需要依赖过多的外部库。

安装

可以通过 npm 或者 CDN 安装 Vue.js。

使用 npm 安装：

npm install vue

使用 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

使用

模板语法

Vue.js 使用简单的模板语法，可以将数据渲染到 HTML 模板中。

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

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

组件化开发

Vue.js 的组件化开发方式使得代码复用更加容易，结构更加清晰。

<div id="app">
  <my-component></my-component>
</div>

<script>
  Vue.component('my-component', {
    template: '<div>My Component</div>'
  })

  new Vue({
    el: '#app'
  })
</script>

计算属性和侦听器

Vue.js 支持计算属性和侦听器，用于处理数据的计算和监听。

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

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

生命周期钩子

Vue.js 的生命周期钩子用于在组件生命周期的不同阶段执行一些操作。

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

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello, Vue!'
    },
    beforeCreate: function () {
      console.log('beforeCreate')
    },
    created: function () {
      console.log('created')
    },
    beforeMount: function () {
      console.log('beforeMount')
    },
    mounted: function () {
      console.log('mounted')
    },
    beforeUpdate: function () {
      console.log('beforeUpdate')
    },
    updated: function () {
      console.log('updated')
    },
    beforeDestroy: function () {
      console.log('beforeDestroy')
    },
    destroyed: function () {
      console.log('destroyed')
    }
  })
</script>

总结

Vue.js 是一个简单易学，数据驱动，组件化开发，快速渲染，轻量级的 JavaScript 框架，适合构建单页面应用和用户界面。