vue.js学习心得

JS和Vue有什么区别呢

JavaScript（JS）是一种脚本语言，常用于在网页中创建交互式效果。而Vue.js是一种基于JavaScript的前端框架，用于开发Web界面和应用程序。

以下是JS和Vue的区别：

1、JS是一种编程语言，而Vue是一个JavaScript框架。

2、JS可以用于开发各种类型的应用程序，而Vue主要用于开发Web应用程序。

3、JS的语法较为灵活，可以通过多种方式实现同一功能，而Vue提供了一种更为结构化的方式来开发Web应用程序。

4、Vue具有诸如单文件组件、路由和状态管理等功能，这些功能可以帮助开发者更好地组织和管理代码，提高开发效率。

       总之，JS是一种编程语言，而Vue是一种基于JS的前端框架。Vue提供了一种更为结构化的方式来开发Web应用程序，使开发者能够更好地组织和管理代码，提高开发效率。

Vue的核心是什么？

Vue官网介绍：通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。由此可以反映出来Vue的两个核心关键词：数据绑定 和视图组件。

Vue的数据驱动：数据改变驱动了视图的自动更新，传统的做法你得手动改变DOM来改变视图，vuejs只需要改变数据，就会自动改变视图.

视图组件化：把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。

Vue.js 的特点

1.门槛低、上手快

Vue 上手简单的原因是无需复杂配置，只需要一个 HTML 与相关文件就能跑起来。从设计的角度上来看，Vue 考虑的也是如何降低门槛，让只掌握了 Web 基础知识 (HTML, CSS, JS) 的情况下，能够最快理解和上手，从而实现和完成一个应用。

和 React、Angular 相比，Vue 的中文文档是写的最好的，再加上国内有非常丰富的视频、图文教程、各种开源的插件，哪怕是一个新手前端开发，学习一周左右就可以搞一个项目出来。就如我们开头所说，配合第三方前端表格控件 SpreadJS，自学一周就能做出一个企业级的表格协同文档。所以，它对于非专业前端，或者前端入门人士来说是非常适合的。

其次，Vue 设定多，所以需要思考的就少。属性指令定义了一大堆，API 文档整理好的就在那里，需要什么一查，最佳实践的 demo 写好了放在那边，照着写就 OK 了。

2.人性化，符合用户习惯

React 的设计理念是提供强大而复杂的机制，让开发者来适应我；而 Vue 则是为了更适应开发者的使用习惯，在很多设定上都是让开发者怎么爽怎么来。

比如 Vue 的 API 跟传统 Web 开发者熟悉的模板契合度非常高。Vue 的单文件组件是以模板+JavaScript+CSS 的组合模式呈现，它跟 Web 现有的 HTML、JavaScript、CSS 能够更好地配合；Vue 提供反应式的数据，当数据改动时，界面就会自动更新，而 React 里面则还需要调用方法 SetState。

3. 轻量级的框架

Vue.js 能够自动追踪依赖的模板表达式和计算属性，提供 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API，使读者更加容易理解，能够更快上手。

4.双向数据绑定

声明式渲染是数据双向绑定的主要体现，同样也是 Vue.js 的核心，它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。

5.指令

Vue.js 与页面进行交互，主要就是通过内置指令来完成的，指令的作用是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

6. 组件化

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

在 Vue 中，父子组件通过 props 传递通信，从父向子单向传递。子组件与父组件通信，通过触发事件通知父组件改变数据。这样就形成了一个基本的父子通信模式。

在开发中组件和 HTML、JavaScript 等有非常紧密的关系时，可以根据实际的需要自定义组件，使开发变得更加便利，可大量减少代码编写量。

7. 客户端路由

Vue-router 是 Vue.js 官方的路由插件，与 Vue.js 深度集成，用于构建单页面应用。Vue 单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，传统的页面是通过超链接实现页面的切换和跳转的。

8. 状态管理

状态管理实际就是一个单向的数据流，State 驱动 View 的渲染，而用户对 View 进行操作产生 Action，使 State 产生变化，从而使 View 重新渲染，形成一个单独的组件。

     下面是一个比较笨的图片切换方法,我们要实现的是通过按钮实现图片的切换.

如图,简单的说就是在button里面设置点击事件,并把button里面插入图片,在script里面返回一个数组imgArr里面放入图片.

最后在methods里面分别设置不同的点击事件就可以实现切换不同的图片.