VUE超详细入门

2.Vue.js 优点

Vue中的第一个hello world

在vue官方中用这在线地址找到内容并保存。（这相当于一个vue的jar包）

在左侧的js中将vue.js导入进去然后src引用官方中的第一hello world就实现了

接下来我们对这个hello world解析

{
{}}插值表达式在vue中用来获取data中的值，el和标签绑定通过id获取

Vue指令

如图我们用插值表达式{
{}} v-text v-html也都可以实现，那么它们有什么区别呢？

答：插值表达式会将msg1中的你好赋值给插值表达式{
{}}后面的vue不产生影响

        而v-text和v-html会将标签<p>vue<p>中的vue覆盖掉，(就是把你好放在了这个p标签里)

v-text和{
{}}都是拿到msg1文本然后赋值，而v-html还可以对这个msg1文本进行解析里面的标签

 v-model

v-bind

对图片的属性进行双向数据绑定

如图中所示显示一张图片仅仅用src”地址”这样会把src图片写死了，用v-bind可以绑定data中的img，通过改变data中的img从而改变图片.（这里v-bind：可以简写成 ：src默认使用（v-bind））

我们在改变前端一些样式的时候也会用到

我们定义了一个.imgcss，然后可以用v-bind：class={imgcss:isActive},将isActive写在data里设为true，则在使用时默认绑定的就是这个样式，当不想用这个样式时可以用按钮添加事件将isActive改变为false

v-on

这里强调一点:在methods方法中调用data中的数据必须要用this

v-if

v-show

这里强调一下：v-if和v-show的区别是前者在dom中如果为false直接移除，而后者则是display将其隐藏，总的来说频繁的切换用v-show，反之使用 v-if，前者的切换消耗小。

v-for

v-for的使用更像是java中的增强for循环，每一个值用插值表达式输出出来

对于一个表格来说前面的值可以为两个一个为对象，一个为索引。

Vue 实例生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数

据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时

在这个过程中也会运行一些叫做
生命周期钩子
的函数，这给了用户在不同阶段添

加自己的代码的机会。
（new 了一个vue的对象之后，在这个运行过程中的一些函数例如java中的创建一个构造函数在创建时就初始化了一些东西）

钩子函数和methods、data是平级的

运行后就可看到输出到控制器中，所以我们在每一个时间段想要执行什么就在哪个函数里面写。

从传统架构转向单文件架构(通过组件拼接)

什么是node?

1. 服务器端 JavaScript：Node.js 让 JavaScript 可以在服务器端运行，这样开发者可以使用同一种语言（JavaScript）来编写前端和后端代码，实现全栈开发。
2. 事件驱动和非阻塞I/O模型：Node.js 是基于事件驱动和非阻塞I/O 的模型，这使得它能够处理大量并发连接，非常适合构建高性能、可伸缩的网络应用。
3. 模块化：Node.js 支持 CommonJS 规范的模块系统，使得代码可以以模块的形式组织、管理和重用。
4. 包管理器 npm：Node.js 自带 npm（Node Package Manager），是世界上最大的开源库生态系统，开发者可以通过 npm 轻松地安装、分享和管理 JavaScript 包和依赖项。
5. 文件操作：Node.js 提供了丰富的文件操作 API，使得开发者可以轻松地对文件进行读取、写入和操作。
6. 跨平台：Node.js 可以运行在多种操作系统上，包括 Windows、Mac OS 和各种 Linux 发行版，具有较高的可移植性。
7. 构建工具和任务自动化：由于 Node.js 生态系统丰富，开发者可以使用各种构建工具和任务自动化工具（如 Gulp、Webpack 等）来简化开发流程、优化代码和资源管理。

  类似与java中的maven

组件路由

vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建

单页面应用变得易如反掌。(
我们在没有组件路由之前网站上访问不了vue组件
)

安装

vue-router 是一个插件包，所以我们还是需要用 npm 来进行安装的。
打开命令行工具，进入你的项目目录，输入下面命令。

npm i vue-router@3.5.3

安装成功之后，我们创建一个router包里面放一个js文件，先必须导入再包中导入router和Vue,之后再导入我们需要的组件，
Vue.use(router) 的作用是在 Vue.js 应用中安装并注册 Vue Router，使得我们可以在应用中使用 Vue Router 提供的各种路由功能和组件。path就是我们配置的网站可以访问到的路径，最后导出这个rout对象(虽然默认访问的是App组件但是通过路由配置路径’/’即可在什么也没有时访问到index组件)

最后我们需要再main.js中配置到Vue对象中去.这短main.js代码解析：
先导入库Vue再导入了app组件，再导入了我们组建的路由配置，创建了一个vue对象初始化了router路由，并对App组件作为入口访问.在App.vue中创建一个router-view就可显示所有的vue组件

在index页面中访问其他组件就不是使用超链接了而是使用如图中所示<router-link to=”/login”>的方式。

安装element-ui使用

在命令行中下载即可npm i element-ui -S

并在main.js中配置即可，在element-ui官网就可使用它的组件