vue.js的期末学习总结

什么是vue？

：Vue.js是一款流行的JavaScript框架，用于构建现代化的、交互式的用户界面。它采用MVVM（模型视图视图模型）架构模式，通过数据驱动和组件化开发，使得开发者可以轻松创建单页应用程序或复杂的Web应用。Vue.js具有响应式数据绑定、模板语法、组件系统、路由器等功能，支持现代浏览器以及大部分移动设备。Vue.js是一个轻量级的框架，易于学习、使用和集成到已有项目中。它已经在许多大型公司和项目中得到了广泛的应用。

Vue.js的开发模式是？

答：
Vue.js的开发模式是MVVM(Model-View-ViewModel)模式包括3个核心部分。1·Model(模型):数据层，主要是从数据库取出的经过特定出来之后的数据。2 ·View(视图):视图层，即 HTML文档的DOM元素，也就是我们看到的页面。
3﹑ViewModel(视图模型):用于连接视图与数据的数据模型，负责监听Model或者View的修改。

vue的开发工具有哪些？

答：谷歌浏览器+vscode+命令控制台

用于检查预览效果检查代码

用于编写代码

vue.js的使用方法有哪些？

答：安装使用vue可以采用以下三种方式:
1.下载独立版本“直接引入”Vue.js
在HTML页面中使用Vue.js时，通过<script>标签可以“直接引入”Vue.js核心文件，代码如下
所示:
<script src="vue.js"></script>
上述代码表示引入当前路径下的Vue.js文件, Vue.js相当于JavaScript中的一个库。
2.不下载.js文件直接使用CDN引入 Vue.js
推荐一个由BootStrap中文网运作的免费开源的CDN加速服务，其地址为 http://
www.bootcdn.cn/ ,在HTML页面中即可完成Vue.js 的引入，代码如下所示:<script src="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.is 。

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

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

data概述:
data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。
var app=new Vue({data: {数据}})，Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。

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

开发vue.js常用的指令：

1、v-text
v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字
符串处理，不会解析标签，与插值表达式作用相同。
2、v-html
v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“0}”来输出，会将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等)。

5、v-for
v-for是Vue,js的循环语句，当需要遍历数组或对象时，常用的就是列表渲染指令v-for，它需要结合着in或者of来使用。
6.v-model
v-model指令主要用于实现表单元素和数据的双向绑定，通常用在表单类元素上(如input、select、textarea等)。所谓双向绑定，指的就是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁被改变，另一方也会相应的同步更新为相同的数据。
7、v-if和v-else
v-if是Vue.js的条件语句，v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回true值的时候被渲染。特别注意的是，v-if所关联的是Vue.js的动态变量。
v-if的使用一般有两个场景:
1.通过条件判断展示或者隐藏某个元素或者多个元素;⒉进行视图之间的切换。
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进行切换。

[事件修饰符]
v-on指令提供了一些事件修饰符，即自定义事件行为，不同的事件修怖符会产生不同的功能，通常配:置v-on指令来使用，写在事件之后，用“号连接，如“voncickonce” 表示击事件只触发一次。常用的事件修饰符如下表所示:
1.stop       阻止事件冒泡
2.prevent  阻止默认事件
3.capture  添加事件监听器时使用事件捕获模式
4.self        将事件绑定到该元素本身，只有自身才能触发
5.once      事件只触发一次
键盘事件的修饰符∶在我们的项目中，经常需要监听一些键盘事件来触发程序的执行，例如键盘的按下(keydown)和键盘的松开Kkeyup)事件等等。这些事件我们往往可以给其添加
—些修饰符来进行修饰，比如:
6.enter      监听enter回车键的触发
7.tab         监听tab键的触发
8.up、.down . .left、.right        监听上、下、左、右键的触发
9ctrl          监听ctrl键的触发
 

filter过滤器
概述:在Wuejs中提供了一种过滤器，它可以对数据进行过滤处理，它的作用一般是用于一些常见的文本格式化，即修饰文本，并根据过滤的条件返回需要的结果，过滤器通常由管道符""进行标识。
过滤器一般可以用在两个地方:双花括号{0}或v-bind表达式中。它分为全局过滤器和局部过滤器。
当全局过滤器和局部过滤器重名时，会采用局部过滤器。
过滤器函数必须接收表达式的值(之前的操作链的结果)作为第一个参数。

局部过滤器示例代码：

全局过滤器示例代码：

Vue项目化

vueclli介绍:Vue Cli是一个基于Vue,js进行快速开发的完整系统，是一组用于快速原型设计、简化应用程序搭建和进行高效项目管理的工具，开发者可以专注在撰写应用上,而不必花很多时间处理配置的问题。
Vue CLi由三个主要的工具组成，分别是:
1、CLI
C是一个npm包，通过Vuejs命令提供核心功能。它可以轻松构建一个新项目，同时，如果你希望通过可视化界面来构建（创建)项目的话，你可以运行
vue ui命令行来打开可视化界面。

2、CLl Service
Cll Service是一个开发依赖项，安装在脚手架项目当中，可以帮助开发项目、打包项目和检查项目的一些相关配置。
3、CLI插件
CUI插件也是npm的包，可以为项目提供一些额外的功能，在开发的过程中，可以通过命令行vue add添加CL插件，比如路由插件(ue-router)、vuex插件等
等。
使用VueCli快速构建项目：

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

2、vue create命令创建项目:vue create +项目名

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

在这个步骤中，可以使用键盘的t和↓方向键选择创建项目的方式,default是默认选择项
表示使用默认的方式创建项目;
Manually select features选项表示使用手动配置方式创建项目

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

说明：

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

选择完成后分开输入以下代码即可：

cd+项目名

npm run serve

组件
概述:组件是Vue.js最强大的功能之一，组件可以扩展HTML元素，也可以封装可重用的代码
，组件系统让开发人员可以用独立可复用的小
组件来构建大型应用。
组件的使用步骤
1、在components文件夹新建组件页面

2、在需要此组件的页面调用组件