Vue.js简要介绍

最新推荐文章于 2024-05-15 09:15:00 发布

jingzhouikun

最新推荐文章于 2024-05-15 09:15:00 发布

阅读量2.3k

点赞数 29

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/jingzhouikun/article/details/135334595

版权

一、Vue.js的基础介绍

Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面。它是一个轻量级、灵活且易于上手的框架，被广泛应用于开发单页应用程序和动态网页。

Vue.js 的主要特点之一是其响应式数据绑定系统。这意味着当应用程序中的数据发生变化时，页面上相关的部分会自动更新。这种机制使得开发者可以轻松地管理和维护复杂的应用程序状态。

另一个重要的特性是组件化开发。Vue.js 允许开发者将页面拆分为独立的组件，每个组件具有自己的数据和逻辑。这种模块化的开发方式使得代码复用和维护更加容易，并且能够提高开发效率。

Vue.js 也提供了一套强大的指令系统，用于处理 DOM 操作和页面交互。通过使用这些指令，开发者可以轻松地实现诸如条件渲染、循环渲染、事件处理等功能。

此外，Vue.js 还具有丰富的插件生态系统。开发者可以使用各种插件来扩展 Vue.js 的功能，例如路由、状态管理、表单验证等。这使得开发者可以根据自己的需求选择合适的插件，从而更好地满足项目的要求。

总之，Vue.js 是一个功能强大且易于学习的 JavaScript 框架，它提供了响应式数据绑定、组件化开发、指令系统和插件生态系统等特性，使得开发者能够更高效地构建现代化的用户界面。无论是新手还是有经验的开发者，都可以通过学习和使用 Vue.js 来开发出优秀的 Web 应用程序。

二、Vue.js开发环境配置

vue.js官网：Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://v2.cn.vuejs.org/

三、第一个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>

四、Vue实例常用到的构造选项

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

1.使用el 绑定DOM元素

2.data数据对象

data概述：

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

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

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

1、对象（Object）的形式：

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

    <script>

        var app = new Vue({

            el: "#app",

            data: {

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

            }

        })

    </script>

2、函数（Function）的形式：

3.methods方法

概述：methods用来定义Vue实例中的方法，可以通过Vue实例直接访问这些方法。在定义的方法中，this对象指向Vue实例本身。通过methods定义的方法还可以作为页面中的事件处理方法使用，一旦事件被触发，即执行相应的方法进行处理。

在methods方法中访问 data 的数据，可以直接通过 this.属性名的形式来访问，this表示Vue实例

示例代码：

五、Vue.js常用指令

概述：指令(Directives)是Vue.js模板中最常用的一项功能，HTML元素仅仅是界面的呈现，若还需要和Vue实例进行交互，就需要用到Vue.js的指令。在Vue.js中，指令必须写在HTML元素中，以前缀v-开头，后缀用来区分指令的功能，前缀和后缀通过短横线连接，它是Vue实例数据与用户界面之间的纽带。

Vue.js内置了很多指令，帮助开发者快速完成常见的DOM操作，譬如显示与隐藏、循环渲染等等，需要先了解一些常用的指令，如v-text、v-html、v-cloak、v-bind、v-on等。

1、v-text

v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。

2、v-html

v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的 innerHTML ，内容按照HTML格式进行解析，并且显示对应的内容。

3、v-bind

v-bind指令用于实现单向动态数据绑定。

前面学习的v-text和v-html指令主要作用是将值插入到模板标签的内容当中。但是，除了标签内容需要动态来渲染外，某些标签的属性也希望动态来绑定，这时就可以使用v-bind动态绑定属性。

4、v-on

v-on指令用来绑定事件监听器。在普通元素上，v-on指令可以监听原生的DOM事件(如click、dblclick、keyup、mouseover等)。

小结：

Vue.js为v-bind和v-on这两个最常用的指令提供了语法糖(语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果，以便于程序开发，也称为糖衣语法，通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会)，也可以说是缩写或简写。

5、v-for

v-for是Vue.js的循环语句，当需要遍历数组或对象时，常用的就是列表渲染指令v-for，它需要结合着in或者of来使用。

for循环普通数组：

for循环对象数组：

for循环对象：

for循环整数:

6、v-model

v-model指令主要用于实现表单元素和数据的双向绑定，通常用在表单类元素上(如input、select、textarea等)。所谓双向绑定，指的就是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁被改变，另一方也会相应的同步更新为相同的数据。

v-model修饰符:

v-model有3个修饰符，分别是lazy、number、trim

1、lazy

v-model默认是在input事件中同步输入框中的内容，也就是一旦数据发生改变，对应的data中的数据也会发生改变。如果使用lazy修饰符，可以让数据在失去焦点或者回车时才会更新。

2、number

默认情况下，在输入框输入数字的时候，默认会把输入的内容当作字符串类型处理，如果加上number修饰符，就可以让你在输入数字的时候将内容转为number类型。

3、trim

trim修饰符可以去除输入内容左右两边的空格。

7、v-if和v-else

v-if是Vue.js的条件语句，v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true 值的时候被渲染。特别注意的是，v-if所关联的是Vue.js的动态变量。

v-if的使用一般有两个场景：

1.通过条件判断展示或者隐藏某个元素或者多个元素；

2.进行视图之间的切换。

8、v-show

v-show是另一个条件渲染语句，用于根据条件展示元素，用法与v-if大致一样。

带有v-show的元素始终会被渲染并保留在DOM中，v-show指令使用css样式来控制元素的显示/隐藏。值得注意的是，注意，v-show不支持<template>元素，也不支持v-else。

在这篇博客中，我们对Vue.js进行了简要介绍。Vue.js是一个轻量级的前端框架，它采用MVVM模式，提供了数据双向绑定和组件化的开发方式。

Vue.js具有以下特点：

简单易学：Vue.js的语法简单易懂，上手难度低，适合初学者使用。
组件化开发：Vue.js将页面拆分成多个组件，实现组件的复用和维护。
数据双向绑定：Vue.js可以实现视图与数据的自动同步更新，提高开发效率。
生态丰富：Vue.js生态系统提供了大量的插件和扩展库，方便开发者快速构建应用程序。

Vue.js不仅适合小型应用程序的开发，也能够胜任大型企业级项目。同时，Vue.js还具有良好的兼容性和性能表现。

总之，Vue.js是一个强大而灵活的前端框架，适合各种应用场景。如果你想提升自己的前端开发能力，Vue.js是一个必须掌握的技术。希望这篇博客能够为你提供有价值的信息和帮助。

jingzhouikun

关注

29
点赞
踩
24

收藏

觉得还不错? 一键收藏
4
评论
Vue.js简要介绍

Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面。它是一个轻量级、灵活且易于上手的框架，被广泛应用于开发单页应用程序和动态网页。Vue.js 的主要特点之一是其响应式数据绑定系统。这意味着当应用程序中的数据发生变化时，页面上相关的部分会自动更新。这种机制使得开发者可以轻松地管理和维护复杂的应用程序状态。另一个重要的特性是组件化开发。Vue.js 允许开发者将页面拆分为独立的组件，每个组件具有自己的数据和逻辑。这种模块化的开发方式使得代码复用和维护更加容易，并且能够提高开发效率。
复制链接

扫一扫