关于vue.js前端框架技术总结

red_apple53

于 2023-12-21 09:51:55 发布

阅读量105

点赞数 2

文章标签： vue.js 前端框架

本文链接：https://blog.csdn.net/red_apple53/article/details/135122241

版权

天才笔者这学期学完Vue.js的课程也是第一时间来发布一篇博客来共大家学习，有需要的小伙伴拿走不谢

一：为什们要学习Vue.jsVue.js；

流行度和就业机会：Vue.js是一个流行的前端框架，许多公司和组织都在使用它来构建他们的Web应用程序。因此，掌握Vue.js可以增加你作为前端开发人员的就业机会。
易学易用：Vue.js相对于其他前端框架来说，学习曲线较为平缓，它的文档清晰、逻辑简单，非常适合初学者入门。
响应式数据驱动：Vue.js采用了响应式数据驱动的概念，能够帮助你更高效地管理和维护页面状态，减少手动DOM操作。
组件化开发：Vue.js支持组件化开发，能够帮助你将复杂的UI拆分成简单的、独立的组件，提高代码的复用性和可维护性。
生态系统丰富：Vue.js拥有丰富的生态系统，包括大量的第三方库、插件和工具，能够帮助你更快速地构建出功能丰富的Web应用程序。

总之，学习Vue.js能够帮助你更容易地进入前端开发领域，并且能够提高你的工作效率和竞争力。

二：前置知识，掌握ES6基础；

ES6，也称为ECMAScript 2015，是JavaScript的一次重大更新，带来了许多新特性和语法糖，使得JavaScript语言更加现代化和强大。以下是ES6的一些基础内容：

let 和 const：引入了块级作用域的变量声明方式，使用let和const可以避免变量提升和全局污染的问题。
箭头函数：简化了函数的声明方式，减少了代码量，并且自动绑定了this关键字，解决了传统函数中this指向的问题。
模板字符串：引入了模板字符串的语法，使用反引号(`)来包裹字符串，并支持在其中嵌入变量和表达式。
解构赋值：可以方便地从数组或对象中提取值并赋给变量，使得代码更加简洁易读。
默认参数：允许在函数声明时为参数设置默认值，简化了函数的调用和定义。
类和继承：引入了class关键字，使得JavaScript可以更加方便地实现面向对象编程，支持了类、继承、构造函数等概念。
Promise：引入了Promise对象，使得异步操作更加直观和易于管理，解决了回调地狱的问题。
模块化：引入了import和export关键字，使得JavaScript可以更加方便地进行模块化开发，提高了代码的可维护性和复用性。

这些只是ES6的一部分特性，ES6还引入了许多其他的语法糖和新特性，为JavaScript的发展带来了巨大的推动力，使得JavaScript成为了一门更加现代化和强大的编程语言。

三：关于Web前端开发概述；

vue.js官网：Vue.js

Web前端开发是指通过使用HTML、CSS和JavaScript等技术，构建用户在Web浏览器中直接交互的用户界面和用户体验。以下是关于Web前端开发的概述：

HTML（超文本标记语言）：HTML是Web页面的基本构建块，用于描述页面结构和内容。开发者使用HTML标签来创建标题、段落、链接、图像等元素，并通过属性为这些元素添加样式和功能。
CSS（层叠样式表）：CSS用于控制网页的外观和布局。开发者使用CSS选择器和属性，定义元素的样式，如颜色、字体、大小、边距、定位等。CSS可以帮助开发者实现页面的美观和一致性。
JavaScript：JavaScript是一种脚本语言，用于给网页添加交互和动态功能。开发者可以使用JavaScript处理用户的操作，例如响应点击、验证表单、执行动画效果等。JavaScript还可以通过与后端服务器进行通信，实现数据的获取和更新。
前端框架和库：前端框架和库是开发者用来简化和加速开发过程的工具。常见的前端框架包括React、Vue.js和Angular，它们提供了组件化开发、状态管理和路由导航等功能。此外，还有许多常用的JavaScript库，如jQuery和Bootstrap，用于简化DOM操作和提供可重用的UI组件。
响应式设计：随着移动设备的普及，开发响应式网页成为了一种重要趋势。响应式设计可以使网页在不同设备上自适应，并提供良好的用户体验。开发者使用CSS媒体查询和弹性布局来实现响应式设计。
浏览器兼容性：不同的浏览器对于HTML、CSS和JavaScript的支持程度各不相同，因此开发者需要在开发过程中考虑浏览器兼容性。通常会进行测试和使用特定的技术来处理不同浏览器之间的差异。

总之，Web前端开发是一个涵盖HTML、CSS和JavaScript等技术的领域，通过这些技术可以构建交互性强、用户界面美观的Web应用程序。随着技术的不断演进和新的标准的出现，前端开发也在不断发展和变化。

四：第一个vue实例；

以下就是一个关于Vue.js的实例：

<!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>

为了防止新手宝贝看不懂，笔者来浅浅解释以下：

这段代码是一个简单的Vue.js应用程序。让我逐行解释给你看：

<!DOCTYPE html>：HTML文档声明，指定文档类型为HTML。
<html lang="en">：HTML根元素，设置页面语言为英文。
<head>：头部标签，用来包含文档的元数据。
<meta charset="UTF-8">：设置文档的字符编码为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>：设置文档的标题为"Document"。
<script src="../js/vue.js"></script>：引入Vue.js库文件。
<body>：主体标签，用来包含文档的可见内容。
<div id="app">：创建一个具有id属性为"app"的div元素，作为Vue应用程序的根节点。
<script>：JavaScript脚本标签，用于编写程序逻辑。
var app = new Vue({：创建一个Vue实例，并将其赋值给变量app。
el: "#app",：el属性指定Vue实例要控制的根元素，这里指定为id为"app"的div。
data: {：data属性用于定义Vue实例的数据。
msg: "第一个vue实例!",：定义了一个名为msg的数据属性，初始值为"第一个vue实例!"。
}：关闭data对象。
})：关闭Vue实例的定义。

通过这段代码，你创建了一个简单的Vue实例，并将其绑定到id为"app"的div元素上。在Vue实例中定义了一个数据属性msg，它的初始值是"第一个vue实例!"。你可以在页面上显示该数据属性的值或者进行其他操作。

五：vue实例常用到的构造选项（或者叫做常用指令）；

el：指定Vue实例控制的根元素，可以是CSS选择器字符串或DOM元素。
data：定义Vue实例的数据对象，用于存储应用程序中需要响应式更新的数据。
methods：定义Vue实例可用的方法，用于处理事件或执行逻辑操作。
computed：定义基于Vue实例数据的计算属性，当数据变化时自动重新计算。
watch：定义Vue实例数据的监听器，用于监听数据变化并执行响应的操作。
template：定义Vue实例的模板，用于渲染视图。
render：手动渲染一个函数，返回虚拟DOM节点。
components：定义Vue实例可用的组件，可以是全局或局部组件。
props：定义Vue实例传递给子组件的属性。
mixins：定义Vue实例可用的混入对象，用于组合多个组件的逻辑。

这些构造选项可以灵活组合使用，以实现不同的功能和需求，

下面将列举部分代码：

（1）使用el 绑定DOM元素：

（2）.data概述：

data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。

var app= new Vue({data: {数据}})，Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。

data定义的数据通过插值语法(“{{}}”)绑定到DOM节点，data数据对象有以下两种写法：

1，对象形式

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

    <script>

        var app = new Vue({

            el: "#app",

            data: {

                content: "Mustache表达式通过data为对象获取content的值"

            }

        })

    </script>

2，对象形式

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

    <script>

        var app = new Vue({

            el: "#app",

            // 这是下面function的简写形式

            data(){

                       return {

                            name:'张三',

                            age:18

                    }

              },

             // 另一种写法

            // data:function() {

            //     return {

            //         name: '张三',

            //         age: 18,

            //         sex: '男'

            //     }

            // },

        })

    </script>

（3）关于methods：

methods是Vue实例的一个选项，用于定义可在Vue实例中使用的方法。这些方法可以用于处理事件、执行逻辑操作，以及与数据进行交互。

在methods选项中，可以定义多个方法，每个方法都是一个函数。例如：

var app = new Vue({
  el: "#app",
  data: {
    count: 0
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  }
});

在上述例子中，我们定义了两个方法：increment和decrement。increment方法使count属性增加1，decrement方法使count属性减少1。这些方法可以通过Vue实例来调用，如下所示：

<div id="app">
  <p>Count: {{ count }}</p>
  <button @click="increment">Increment</button>
  <button @click="decrement">Decrement</button>
</div>

通过在模板中使用@click指令，我们将increment和decrement方法绑定到两个按钮的点击事件上。当按钮被点击时，对应的方法将被触发。

在methods中定义的方法可以访问Vue实例中的数据属性，如上例中的count属性。通过this关键字可以访问Vue实例的数据和方法。

总之，methods选项为Vue实例提供了一种定义和组织方法的机制，使得你能够在Vue实例中执行各种操作和逻辑。

（四）关于事件修饰符

在Vue.js中，事件修饰符是用来修改普通DOM事件的行为的特殊指令。通过事件修饰符，你可以在处理事件时添加一些额外的逻辑或修改事件的默认行为。以下是一些常用的事件修饰符：

1.stop：阻止事件冒泡。

htmlCopy Code

<a @click.stop="doSomething">阻止事件冒泡</a>

2.prevent：阻止事件的默认行为。

htmlCopy Code<form @submit.prevent="onSubmit">阻止表单提交的默认行为</form>

3.capture：使用事件捕获模式。

htmlCopy Code

<div @click.capture="doSomething">捕获模式下触发事件</div>

4.self：只当事件是从事件绑定的元素本身触发时才触发回调。

htmlCopy Code

<div @click.self="doSomething">只有点击自身时才触发事件</div>

5.once：事件将只会触发一次。

htmlCopy Code

<button @click.once="doThis">点击后只触发一次</button>

6.passive：指示对应的处理函数不会调用 event.preventDefault()。

htmlCopy Code

<div @touchstart.passive="onTouchStart">passive修饰符</div>

`六：`关于Vue.js的项目化；

Vue.js 项目化的具体步骤可以总结如下：

项目结构规划：首先，你需要规划项目的文件目录结构。通常情况下，可以按照功能或模块来组织目录结构，例如将组件、路由、状态管理、API 请求等内容分别放在不同的目录下。
使用 Vue CLI 创建项目：Vue CLI 是一个官方提供的标准化的脚手架工具，可以帮助你快速搭建 Vue.js 项目。通过 Vue CLI 创建项目，可以自动生成一套标准的项目结构和配置文件，遵循最佳实践。
组件化开发：将页面拆分成多个可复用的组件。每个组件应该只关注自己的业务逻辑和 UI 展示，保持单一职责原则。
模块化开发：使用模块化工具（如Webpack）来管理应用的资源和依赖。这样可以帮助你更好地组织和引入代码，同时也支持代码分割和懒加载等优化。
路由管理：使用 Vue Router 来管理页面之间的导航和跳转。通过配置路由，你可以定义页面的访问路径，并且支持嵌套路由和路由懒加载等功能。
状态管理：使用 Vuex 来管理应用的状态。通过集中管理应用的状态，可以更好地进行状态共享和响应式更新，保持应用数据的一致性。
代码规范：在项目中遵循一致的代码规范，可以提高团队协作效率和代码质量。可以使用 ESLint 等工具来检查和约束代码规范。
文档编写：编写清晰的文档和注释，记录项目的结构、功能和 API 接口等信息，以便团队成员理解和维护代码。
测试：编写单元测试和端到端测试，确保项目的稳定性和可靠性。
构建和部署：使用构建工具（如Webpack）对项目进行打包和优化，然后将构建后的代码部署到生产环境。