Vue.js学习之旅

最新推荐文章于 2024-08-14 18:44:30 发布

Difcc1

最新推荐文章于 2024-08-14 18:44:30 发布

阅读量1.4k

点赞数 33

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/Difcc1/article/details/135194162

版权

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

一、引言

在当今的Web开发领域，前端技术日新月异，其中Vue.js作为一个轻量级、高效的前端框架，备受开发者的青睐。本文将带您深入了解Vue.js，从基础知识到进阶技巧，让您轻松掌握Vue.js的核心概念和应用。从初创公司到大型企业，Vue.js都在为开发者提供了一种高效、灵活的方式来构建用户界面。本文将深入探讨Vue.js的核心概念、优势以及如何将其应用于实际项目。

二、开发简史

三、Vue.js基础入门

什么是Vue.js?

(1.)
Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架(React除了开发网站，还可以开发手机App，Vue语法也是可以用于进行手机App开发的，需要借助于Weex)

(2.)
Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架!
Vue.js是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。(Nue有配套的第三方类库，可以整合起来做大型项目的开发)
前端的主要工作?主要负责MNC中的V这一层;主要工作就是和界面打交道，来制作前端页面效果;

(3.)
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动
。

2.Vue.ji的核心概念

Vue.js是一个渐进式JavaScript框架，它以数据驱动的方式操作DOM，使得前端开发更加便捷和高效。在Vue中，我们通过组件来构建应用程序，每个组件都是一个独立的可复用的小部分，具有自己的数据、模板和逻辑。

数据驱动：Vue的核心思想是数据驱动，它将数据和DOM紧密结合在一起。当数据发生变化时，Vue会自动更新DOM，使得前端开发更加简单。组件化开发：Vue采用组件化开发方式，将应用程序拆分成一个个独立的组件，每个组件可以独立开发和测试，提高了代码的可维护性和可重用性。指令：Vue提供了一系列指令，如v-for、v-if、v-bind等，开发者可以通过这些指令来操作DOM。

3.Vue.js的特点
轻量级，体积小是一个重要指标。Vue.js压缩后有只有20多kb(Angular压缩后56kb+，React压缩后44kb+)
移动优先。更适合移动端，比如移动端的Touch事件
易上手，学习曲线平稳，文档齐全
吸取了Angular(模块化) 和React(虚拟DOＭ) 的长处，并拥有自己独特的功能，如：计算属性
开源，社区活跃度高

.Vue.js的安装

开发版本：

包含完整的警告和调试模式：https://cn.vuejs.org/js/vue
删除了警告， 30.96KB min+gzip：https://cn.vuejs.org/js/vue.min.js

Vue.js常用开发工具

谷歌浏览器：预览效果、调试代码

VS Code：编写代码

命令行控制台：执行命令行。（前期暂时用不到，后期学到脚手架项目才需要，可以通过Win+R键，输入cmd调出来）

Vue.js的安装使用
（1）下载独立版本“直接引入” Vue.js
在HTML页面中使用Vue.js时，通过<script>标签可以“直接引入”Vue.js核心文件，代码如下所示：

上述代码表示引入当前路径下的Vue.js文件，Vue.js相当于JavaScript中的一个库。

（2）不下载.js文件直接使用CDN引入VUe.js
推荐一个由BootStrap中文网运作的免费开源的CDN加速服务，其地址为

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
https://www.bootcdn.cn/
在HTML页面中即可完成Vue.js的引入，代码如下所示：

四、创建第一个Vue.js应用

1.让我们从创建一个简单的Vue.js应用开始。首先，确保您已经在您的项目中安装了Vue.js。然后，创建一个HTML文件，并引入Vue.js库。接下来，创建一个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>

html
<!DOCTYPE html>
<html>
<head>
<title>Vue.js 入门示例</title>
</head>
<body>
<div id="app">
{{ message }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
});
</script>
</body>
</html>

html<!DOCTYPE html> <html> <head> <title>Vue.js 入门示例</title> </head>
<body>
<div id="app">
{{ message }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
});
</script>
</body>
</html>

在这个例子中，我们创建了一个Vue实例，并在其中定义了一个名为"message"的数据属性。通过双大括号插值表达式（{{ message }}），我们将数据绑定到DOM元素上，从而实现了数据的动态显示。

2.创建 Vue 实例：在 Vue 应用程序中，需要创建一个 Vue 实例，并在其中定义数据、方法和生命周期钩子函数。以下是一个简单的 Vue 实例示例：

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  methods: {
    sayHello: function() {
      alert(this.message);
    }
  }
});

在这个例子中，我们定义了一个名为 message 的数据属性，并在 methods 中定义了一个 sayHello 方法。这个方法将在点击按钮时触发。
3. 模板和指令：Vue.js 使用模板语法来定义用户界面的结构。它提供了许多指令（例如 v-if、v-for、v-bind 等），用于处理条件渲染、列表渲染和数据绑定等操作。以下是一个使用模板和指令的示例：

在这个例子中，我们使用了双花括号插值表达式 {{ message }} 来显示 message 的值，并使用了 v-on:click 指令来绑定 sayHello 方法到按钮的点击事件上。

4. 组件化开发：Vue.js 支持组件化开发，允许将应用程序分解为可重用的组件。每个组件都可以有自己的数据、方法、生命周期钩子函数和模板。以下是一个简单的组件示例：

Vue.component('my-component', {
template: '<div>My custom component</div>',
mounted: function() {
console.log('Component mounted');
}
});

在这个例子中，我们定义了一个名为 my-component 的全局组件，并为其指定了模板和生命周期钩子函数 mounted。要使用该组件，只需在父组件的模板中引入即可：<my-component></my-component>。

五、vue实例常用到的构造选项

常用的构造选项：

选项	说明
el	唯一根标签，决定Vue实例会管理哪一个DOM节点
data	Vue实例对应的数据对象
methods	定义Vue实例的方法，可以在其他地方调用，也可以在指令中使用
computed	定义Vue实例的计算属性，可以在其他地方调用，也可以在指令中使用，本质是一个属性而不是一个函数，在调用时不用加小括号
components	定义Vue实例的子组件
filters	定义Vue实例的过滤器
watch	监听数据变化，观察和响应 Vue 实例上的数据变动

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

使用el 绑定DOM元素：

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）的形式

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

methods方法

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

在methods方法中访问 data 的数据，可以直接通过 this.属性名的形式来访问，this表示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>

    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>

常用指令：

概述：

指令(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动态绑定属性。

绑定单个动态类名时：

绑定多个动态类名时：

同时绑定静态+动态类名时：

在v-bind指令中使用逻辑判断时：

4、v-on

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

6、v-model

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

事件修饰符

v-on指令提供了一些事件修饰符，即自定义事件行为，不同的事件修饰符会产生不同的功能，通常配置v-on指令来使用，写在事件之后，用“.”号连接，如“v-on:click.once”表示点击事件只触发一次。常用的事件修饰符如下表所示：

事件修饰符	说明
.stop	阻止事件冒泡
.prevent	阻止默认事件
.capture	添加事件监听器时使用事件捕获模式
.self	将事件绑定到该元素本身，只有自身才能触发
.once	事件只触发一次

键盘事件的修饰符：在我们的项目中，经常需要监听一些键盘事件来触发程序的执行，例如键盘的按下（keydown）和键盘的松开(keyup)事件等等。这些事件我们往往可以给其添加一些修饰符来进行修饰，比如：


.enter	监听enter回车键的触发
.tab	监听tab键的触发
.up、.down 、.left、 .right	监听上、下、左、右键的触发
ctrl	监听ctrl键的触发
。。。。。。

六、vue脚手架项目环境配置

1、下载安装node,下载之后一步步默认安装即可

PS：检查node是否安装成功，并查看版本号:按住电脑的win+R键盘，调出终端控制台，输入命令行：node -v或node --version,如果能出现以下界面，即代码node安装成功。

2、下载安装VScode代码编辑工具

3、vue2项目调试插件，下载vue.js_devtools，本课程使用此插件

下载，解压，把.crx结尾的文件拖入浏览器的扩展程序中即可使用。

使用VueCli快速构建项目

参照教材的版本，本课程采用Vue CLI 3.10版本，Vue CLI从3版本开始，包的名称由vue-cli 改成了vue/cli,如果您已经安装了vue-cli(1.x或者2.x),需要先卸载，再重新全局安装vue/cli。

卸载命令如下：

// 注意，第一次使用vue脚手架的同学可直接忽略此步骤

npm uninstall vue-cli -g

实例：监听回车键事件

1、vue cli 脚手架的安装

// 通过npm全局安装@vue/cli脚手架 @3.10表示下载某个指定版本，如果不写，则下载最新版本

          npm install -g @vue/cli



PS:如果使用npm方式安装脚手架速度太慢，或者是卡死的话，可以选择淘宝镜像cnpm的方式安装

//安装淘宝镜像的命令行

          ① npm install -g cnpm --registry=https://registry.npmmirror.com

  // 如果安装了cnpm淘宝镜像的话，可使用下面的命令行安装@vue/cli脚手架，网速会相对来说快一些

          ② cnpm install -g @vue/cli



//PS：如需要卸载vue/cli包，可执行以下命令行

         npm uninstall -g @vue/cli

注意：最近发现很多同学使用npm命令经常容易出现卡死不懂是情况，如出现这种情况，清执行此命令，即可解决：

npm config set registry https://registry.npm.taobao.org

或者，哪个方式快，用哪个

npm config set registry https://registry.npmmirror.com

vue cli安装成功之后，使用vue -V命令查看版本号，如果成功出现版本号即代表安装成功，我们就可以通过Vue Cli脚手架来创建项目了。

成功安装界面：

2、vue create 命令创建项目

// helloworld 是项目名，可自行定义

vue create helloworld

执行 vue create 命令之后，可看到如下所示界面

在这个步骤中，可以使用键盘的↑和↓方向键选择创建项目的方式，default是默认选择项，表示使用默认的方式创建项目；Manually select features选项表示使用手动配置方式创建项目，在这里，我们选择手动的方式创建，手动配置界面如下图所示：

此界面中，可以使用键盘的↑和↓方向键选择创建项目的方式，按住空格键选择某一项，再次按住空格键，取消选择，每个配置项的作用如下表所示：

配置项	说明
Babel	JavaScript语法编译器
TypeScript	TypeScript是JavaScript的超集，其包含了并扩展了JavaScript的语法，需要被编译输出为JavaScript才能在浏览器运行
Progressive Web App (PWA) Support	渐进式Web应用程序
Router	vue-router（vue路由）
Vuex	vue的状态管理模式
CSS Pre-processors	CSS预处理器，如less或sass
Linter/Formatter	代码风格检查和格式化（如：ESlint）
Unit Testing	单元测试（unit tests）
E2E Testing	端对端测试

大家根据需求选择相应的配置项，一步步往后创建项目即可。项目创建成功之后，根据界面提示，可以执行如下两个命令行，进入项目目录，启动项目：

cd helloword

npm run serve

接下来，在浏览器输入：http://localhost:8080/ 地址，即可看到如下页面

1、项目创建成功之后，可以看到项目的目录结构如图所示：

目录结构说明如下：

`七、Vue.js的实际应用`

单页应用程序：Vue.js适用于构建单页应用程序（SPA），通过路由和组件的组合，可以轻松实现页面的切换和数据的动态展示。动态网页：使用Vue.js可以快速构建动态网页，通过数据绑定和指令操作DOM，实现网页的动态效果和交互性。移动端应用：Vue.js也可以用于构建移动端应用，通过跨平台解决方案如uni-app等，可以编写一次代码，发布到多个平台。

`八、总结`

Vue.js以其简洁的API、高效灵活的特性和庞大的社区支持，成为了前端开发的未来之路。无论你是初学者还是资深开发者，都可以通过学习Vue.js来提高自己的开发效率和应用程序的性能。在未来，随着技术的不断进步和社区的不断发展，Vue.js将会在前端开发领域发挥更加重要的作用。让我们一起迎接Vue.js带来的美好未来！

Difcc1

关注

33
点赞
踩
31

收藏

觉得还不错? 一键收藏
1
评论
Vue.js学习之旅

在当今的Web开发领域，前端技术日新月异，其中Vue.js作为一个轻量级、高效的前端框架，备受开发者的青睐。本文将带您深入了解Vue.js，从基础知识到进阶技巧，让您轻松掌握Vue.js的核心概念和应用。什么是Vue.js?(1.)Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架(React除了开发网站，还可以开发手机App，Vue语法也是可以用于进行手机App开发的，需要借助于Weex)(2.)Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成
复制链接

扫一扫