vue 当划过一个控件显示提示消息_Vue介绍和组件化思想

天|地|始|肃|秋|者

【

】

纤云弄巧，飞星传恨，银汉迢迢暗渡。金风玉露一相逢，便胜却人间无数。柔情似水，佳期如梦，忍顾鹊桥归路。

荷

为什么我们选择了Vue

Vue,React,Angular共同点：ES6语法，MVVM模式

介绍一下MVVM：Model-view-viewmodel是一种软件架构模式

组成部分模型，视图，视图模型

Vue.js特点：容易上手，中文文档，社区发达，大公司都在使用

Vue：https://cn.vuejs.org/

山

构建vue的开发环境

Vue Cli : https://cli.vuejs.org/zh/

我们之前已经介绍过安装vue-cli的安装了

如果想再了解安装过程的，大家可以看一下的另一篇文章Vue的最新版本使用

荷

vue的调试

我们这里简单的介绍一下vue的调试

我们先开启项目

然后在浏览器中输入地址

一般有两种方式，一直点击运行-->启动调试-->然后会提示咱们选择调试的浏览器，

另外一种则需要我们在想要调试的地方输入debugger然后编译运行

项目中使用debugger/console报错

error Unexpected ‘debugger’ statement no-debugger

error Unexpected ‘debugger’ statement no-debugger

解决办法：

1. 找到项目中的 package.json 文件

2. 找到 eslintConfig 配置参数

3. 在 eslintConfig 下的 rules 添加 “no-debugger”: “off”, “no-console”: “off”,

需要重新运行项目

这样就可以显示断点调试

山

组件化思想

纤云弄巧，飞星传恨，银汉迢迢暗渡，金风玉露。

纤云弄巧，飞星传恨，银汉迢迢暗渡，金风玉露。

组件化思想是一种设计思想

组件是面向对象的深入应用，将配置参数、方法、事件三者进行分离。

组件是对逻辑的封装，不限于图形元素。即我们可以把if做成组件、把一个倒计时做成组件是把一段动画做成组件、把路由做成组件、把数据架构做成组件，而这些并不能称为控件。

组件具备单个可移植性，即“随加载随用”，不需要为其准备复杂的基础条件(如引入样式、引入框架等)。然而这一点现有那些所谓组件库做得并不好，技术上也不大现实。

组件是声明式定义的，而非命令式。这个不想多说，很大程度上是自己主观的一个想法。

组件化是指将页面的功能模块进行拆分，封装。组件代码包含了组件所有的功能代码与样式。

当多组功能相同的对象,有不同的表现形式，即功能一样，但是不同的表现形式，比如弹窗，功能都是显示弹出层，但是弹出的位置、弹框的宽高不一样，这就是不同的表现形式，像上述这种情况就可以用组件开发，不必为同样功能的不同的状态都去写一套代码，这样可以节省代码。所以组件化开发也是代码复用的一种形式，可以用同一套代码来满足不同的需求。

END