Vue.js （1）

xjdkxnhcoskxbco

于 2024-08-19 15:47:19 发布

阅读量86

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/xjdkxnhcoskxbco/article/details/141327273

版权

1.定义：

Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面和单页应用程序。它的核心理念是通过声明式的数据绑定和组件化的开发方式，使得前端开发变得更加高效和灵活。以下是一些关于 Vue.js 的关键概念和特性：

2.主要特性

响应式数据绑定: Vue.js 使用响应式系统来自动更新 DOM，当数据模型发生变化时，视图会自动更新。
组件化: Vue.js 将界面拆分成可重用的组件，每个组件都有自己的模板、样式和逻辑，使得开发和维护变得更加模块化。
指令系统: Vue 提供了一些内置指令（如 v-if, v-for, v-bind, v-model）来简化模板中的常见操作。
虚拟 DOM: Vue 使用虚拟 DOM 来优化性能，通过最小化实际 DOM 操作来提高渲染效率。
插件生态: Vue 拥有丰富的插件生态系统，可以扩展其功能，如路由管理（Vue Router）和状态管理（Vuex）。

基本用法
创建一个简单的 Vue 实例

<!DOCTYPE html>
<html>
<head>
  <title>Vue Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      },
      methods: {
        changeMessage() {
          this.message = 'Message changed!';
        }
      }
    });
  </script>
</body>
</html>

组件化开发
html
<!DOCTYPE html>
<html>
<head>
<title>Vue Component Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<greeting></greeting>
</div>

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