一篇vue的博文-优快云博客

本文链接：https://blog.youkuaiyun.com/lm742340919/article/details/144558943

文章目录

前言
一、Vue 是什么？
二、vue的特点
三、Vue的入门
四、基础特征
五、内设指令
六、总结

前言

Vue.js 自 2014 年诞生，由尤雨溪受 Angular.js 启发而创建。初期以响应式数据绑定与简洁组件语法崭露头角。2016 年 2.0 版引入虚拟 DOM 提升性能，之后生态逐步完善，vue-router、vuex 等工具及大量 UI 组件库涌现。发展至今，Vue.js 已相当成熟，兼容性佳，Vue 3.0 更是优化诸多特性，在前端领域占据重要地位并持续演进

一、Vue.js 是什么？

Vue 是一个渐进式 JavaScript 框架，用于构建用户界面。它采用自底向上增量开发的设计，核心库只关注视图层，易于上手，同时也可以与其他库或现有项目进行整合。

二、Vue.js 的特点

数据驱动视图
- Vue.js 通过数据绑定实现了数据与视图的自动同步。当数据发生变化时，视图会自动更新，无需手动操作 DOM。
- 例如，在一个购物车应用中，当用户添加商品到购物车时，购物车的数量会自动更新，无需开发者手动更新页面。
组件化开发
- Vue.js 鼓励使用组件化开发，将页面拆分成多个独立的、可复用的组件。
- 每个组件都有自己的 HTML、CSS 和 JavaScript，可以独立开发、测试和维护。
- 比如，一个电商网站可以将商品列表、商品详情、购物车等部分拆分成不同的组件，提高开发效率和代码的可维护性。
指令系统
- Vue.js 提供了丰富的指令，如 v-if、v-for、v-bind 等，用于简化 DOM 操作。
- 例如，v-if 指令可以根据条件动态地显示或隐藏元素，v-for 指令可以方便地遍历数组或对象。
虚拟 DOM
- Vue.js 使用虚拟 DOM 技术，提高了页面的渲染性能。
- 虚拟 DOM 是一个轻量级的 JavaScript 对象，它描述了真实 DOM 的结构。当数据发生变化时，Vue.js 会先比较新旧虚拟 DOM，找出最小的变化集，然后只更新必要的部分，减少了对真实 DOM 的操作次数。
响应式系统
- Vue.js 的响应式系统可以自动追踪数据的变化，并通知依赖这些数据的组件进行更新。
- 开发者无需手动管理数据的变化，大大提高了开发效率。

三、Vue 的入门

1、第一个vue实例

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    // 第一步：引入vue.js

    <script src="../js/vue.js"></script>

  </head>

  <body>

    // 第二步：创建根节点

    <div id="app">

    </div>

    <script>

       // 第三步：初始化vue实例，绑定根节点

      var app= new Vue({

        el: "#app",

        data: {

          msg: "第一个vue实例!",

        },

      })

    </script>

  </body>

</html>

四、基础特征

1、data数据对象

在创建Vue实例时，必不可少的一个选项就是el。el表示唯一根标签，用于指定一个页面中已存在的DOM元素来挂载Vue实例，即通过class或id选择器将页面DOM元素与Vue实例进行绑定。el的类型可以是string，也可以是HTMLElement。

使用el 绑定DOM元素

2、filters过滤器

局部过滤器示例代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="../js/vue.js"></script>

</head>

<body>

    <div id="app">

        <p>电脑的价格:{{price|addPriceIcon}}</p>

    </div>

    <script>

        new Vue({

            el:'#app',

            data:{

                price:200

            },

            // 通过过滤器的方式在价格前面加上价格的符号

            filters:{

                // value就是传入的200的值

                addPriceIcon(value){

                    return '￥'+value

                }

            }

        })

    </script>

</body>

</html>

三、methods方法

示例代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    1、第一步   引入vue.js

    <script src="../js/vue.js"></script>

</head>



<body>

   2、第二步

   <div id="app">

        <div>

            {{msg}}

            <p>tip:点击按钮把“旧文本”字样修改为“新文本”</p>

            <!-- v-on  可以简写为  @ -->

            <button v-on:click="btnClick">点击</button>



            <!-- 简写形式 -->

            <!-- <button @click="btnClick">点击</button> -->

        </div>

    </div>



    <script>

       3、第三步

        var app = new Vue({

            el: "#app",

            data: {

                msg: "旧文本"

            },

           // 页面的点击事件都需要放到  methods 里面

            methods:{

                btnClick(){

                    this.msg="新文本"

                }

            }

        })

    </script>

</body>

</html>

五、内设指令

vue
<template>
  <div>
    <p v-if="isShow">This paragraph is visible.</p>
    <p v-else>This paragraph is hidden.</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isShow: true
    };
  }
};
</script>

六、总结

Vue 作为一个强大的前端框架，具有数据驱动视图、组件化开发、指令系统、虚拟 DOM 和响应式系统等特点，以及易学易用、高效开发、良好的生态系统和支持服务器端渲染等优势。在实际项目中，Vue 可以应用于单页应用、移动端应用和企业级应用等领域。无论是新手还是经验丰富的开发者，都可以从 Vue 中受益，提高前端开发的效率和质量。

如果你还没有尝试过 Vue，不妨现在就开始学习，体验它带来的强大功能和便捷开发。相信在不久的将来，Vue 会在前端开发领域继续发光发热。