vue.js一课一得

计算机应用技术1班-卢丽斯

已于 2023-12-25 10:59:36 修改

阅读量1.3k

点赞数 42

文章标签： vue.js 前端 javascript

于 2023-12-25 10:55:52 首次发布

本文链接：https://blog.csdn.net/2201_75723330/article/details/135190823

版权

Vue.js的基本概念

Vue.js诞生于2014年，由尤雨溪开发，是一套基于前后端分离模式、用于构建用户界面的渐进式框架，它只关注视图层的逻辑、采用自底向上、增量式开发的设计。

2.创建Vue实例，绑定DOM元素，定义数据。

3.使用插值表达式{{}}绑定数据。

实例1-1：Vue.js的HelloWorld

vue实例常用到的构造选项

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

ps:v-bind有时候也经常用于绑定动态样式,具体的语法如下：

2.把.crx结尾的文件拖入浏览器的扩展程序中即可使用。

3.创建一个D盘的文件夹

在所创建文件的地址栏内输入cmd

vue cli安装成功之后，使用vue -V命令查看版本号，如果成功出现版本号即代表安装成功。

创建项目

1.vue create 命令创建项目

2.执行 vue create 命令之后，可看到如下所示界面（选择Manually select features）

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

4.选择2.x,Enter回车。

5.输入n。

6.选择Sass/SCSS（with dart-sass)。

7.选择In dedicated config files。

8.这里不想重新命名就输入n，如果想重新命名就输入y。

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

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

Vue.js的基本概念

Vue.js诞生于2014年，由尤雨溪开发，是一套基于前后端分离模式、用于构建用户界面的渐进式框架，它只关注视图层的逻辑、采用自底向上、增量式开发的设计。

优点：

轻量级: Vue简单﹑直接，所以Vue使用起来更加友好。
双向数据绑定: 数据驱动视图，视图也可以驱动数据。
组件化开发：vue.js提供了非常方便且高效的组件管理来进行加载公用的模块。
指令: 指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。
插件: 插件用于对vue框架功能进行扩展。

Vue.js常用开发工具

Vue.js的安装使用

安装使用vue可以采用以下三种方式 :

1. 下载独立版本“直接引入”Vue.js

在HTML页面中使用Vue.js时，通过<script>标签可以“直接引入”Vue.js核心文件，代码如下所示：<script scr="vue.js"></script>

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

2. 不下载.js文件直接使用CDN引入Vue.js

推荐一个由BootStrap中文网运作的免费开源的CDN加速服务，其地址为http://www.bootcdn.cn/，在HTML页面中即可完成Vue.js的引入，代码如下所示：

<script scr="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>

3.使用npm安装Vue.js框架(前期不推荐此方式)

若要使用npm，则需要先安装Node.js，然后使用npm（Node Package Manager）包管理工具安装。执行命令：npm install vue 即可安装Vue.js。

实现第一个vue.js案例

要点：

1.引入Vue.js核心文件。

2.创建Vue实例，绑定DOM元素，定义数据。

3.使用插值表达式{{}}绑定数据。

实例1-1：Vue.js的HelloWorld

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

2、函数（Function）的形式

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

ps:v-bind有时候也经常用于绑定动态样式,具体的语法如下：

绑定单个动态类名时：

绑定多个动态类名时：

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

在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.进行视图之间的切换。

v-if

v-else

8、v-show

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

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

v-if和v-show的区别

v-if和v-show都可以用来动态地控制DOM元素的显示和隐藏，但是，二者是有区别的。v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；v-if 也是“惰性”的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

计算属性与监听属性

computed 和 watch

有一些变量需要根据别的变量计算，才能得到值，或者一个变量变化的时候，我们希望另一个变量跟着变化，这个时候，就需要使用 computed。

而有时候我们希望监听某个值，当然发生了变化，我们进行一些操作，这个时候就使用 watch，我们来看看GPT对他两的对比和总结：

Computed Properties (计算属性):

定义: 计算属性是基于它们的依赖进行计算的响应式属性。当依赖项发生变化时，计算属性会重新计算。用途: 主要用于数据的转换和组合。例如，从原始数据派生出新的数据。缓存: 计算属性是基于它们的响应式依赖进行缓存的。只有当依赖项发生变化时，计算属性才会重新计算。这意味着只要依赖项保持不变，多次访问计算属性会立即返回之前的计算结果，而不会重新执行函数。示例场景: 如根据用户的名和姓计算出一个完整的姓名。 Watchers (侦听器):

定义: 侦听器用于观察和响应 Vue 实例上数据的变化。当侦听的数据变化时，会执行一个回调函数。用途: 主要用于执行数据变化时的副作用（side effects），如异步操作或较长的运算。方式: 侦听器不会返回一个值，而是在数据变化时执行代码。示例场景: 如在用户更改数据后发送 AJAX 请求。总结：

用途区别: computed 用于计算值的派生和转换，而 watch 用于响应数据的变化执行异步操作或昂贵的操作。性能考虑: computed 属性由于其缓存特性，对于性能要求较高的场景更合适。应用场景: 选择 computed 还是 watch 取决于具体的应用场景和需求。对于任何可以用计算属性实现的功能，优先考虑使用计算属性，只有在需要执行异步操作或复杂逻辑时才使用侦听器。

filter过滤器

概述：在Vue.js中提供了一种过滤器，它可以对数据进行过滤处理，它的作用一般是用于一些常见的文本格式化，即修饰文本，并根据过滤的条件返回需要的结果，过滤器通常由管道符"|"进行标识。

过滤器一般可以用在两个地方：双花括号{{}}或v-bind表达式中。它分为全局过滤器和局部过滤器。

当全局过滤器和局部过滤器重名时，会采用局部过滤器。

过滤器函数必须接收表达式的值 (之前的操作链的结果) 作为第一个参数。

Vue CLI

Vue Cli是一个基于Vue.js进行快速开发的完整系统，是一组用于快速原型设计、简化应用程序搭建和进行高效项目管理的工具，开发者可以专注在撰写应用上，而不必花很多时间处理配置的问题。

使用Vue Cli快速构建一个Vue.js项目，这个项目本质就是一套文件结构，里面包含基础的依赖库，只需要npm install 一下就可以安装。

1、CLI

CLI是一个npm包，通过Vue.js命令提供核心功能。它可以轻松构建一个新项目，同时，如果你希望通过可视化界面来构建（创建）项目的话，你可以运行vue ui命令行来打开可视化界面。

2、CLI Service

CLI Service是一个开发依赖项，安装在脚手架项目当中，可以帮助开发项目、打包项目和检查项目的一些相关配置。

3、CLI插件

CLI插件也是npm的包，可以为项目提供一些额外的功能，在开发的过程中，可以通过命令行vue add添加CLI插件，比如路由插件(vue-router)、vuex插件等等。

vue脚手架项目环境配置

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

https://download.csdn.net/download/2201_75723330/88660024?spm=1001.2014.3001.5503https://download.csdn.net/download/2201_75723330/88660024?spm=1001.2014.3001.5503

也可以直接去node官网下载：下载 | Node.js 中文网 (nodejs.cn)https://nodejs.cn/download/PS：检查node是否安装成功，并查看版本号:按住电脑的win+R键盘，调出终端控制台，输入命令行：node -v或node --version,如果能出现以下界面，即代码node安装成功。（安装node的时候会默认安装npm）

2.把.crx结尾的文件拖入浏览器的扩展程序中即可使用。

https://download.csdn.net/download/2201_75723330/88660023?spm=1001.2014.3001.5503https://download.csdn.net/download/2201_75723330/88660023?spm=1001.2014.3001.5503

3.创建一个D盘的文件夹

在所创建文件的地址栏内输入cmd

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

npm install -g @vue/cli

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

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

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

② 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