vue_day05

watch监听:
这个对象中可以监听到data中属性的变化,并触发属性对应的function函数,通过newVal和oldVal把值传递过来.

image.png
watch和keyup事件相比,除了可以监听元素的变化,还可以监听到前端路由的改变.(监听-->this.$route.path)
image.png
computed计算属性:
注意:
1.计算属性实际上是个函数,但是在引用计算属性的时候,要当成普通属性来用.
2.只要计算属性这个函数内引用的任何data中的数据发生变化,就会立即重新计算这个计算属性的值.
3.计算属性的结果,会立即被缓存起来,如果再次引用,并发现计算属性的值没有发生过改变,那么不会触发计算属性的重新求值.
image.png
watch computed methods对比:
computed和watch 两个都是function,但是computed必须要return一个值,watch可以不返回.
computed属性的结果会被缓存,除非依赖的响应式属性发生变化才会重新计算,主要当做属性来使用.
methods方法表示一个具体的操作,主要用来写业务逻辑.
watch一个对象,键是需要观察的表达式,值是对应的回调函数,主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作,可以看成computed和methods的结合体.

nrm工具介绍:
nrm只是单纯的提供了下载包的地址,并能够让我们很方便的在这几个地址间进行切换,但是每次装包的时候 使用的装包工具仍旧是npm
常用命令:
安装nrm:npm install nrm -g
查看当前使用的镜像源地址:nrm ls
切换不同的镜像源地址:nrm use taobao(使用淘宝镜像提供下载)

webpack
webpack是前端的一个项目构建工具,是基于Node.js开发出来的
是基于整个项目进行构建的

import $ from 'jquery'
这句话含义是从当前目录下的node-modules文件夹下找名为jquery的这个模块,并导入,以$变量名接收.
由于import是es6的语法,浏览器不识别,此时需要用webpack进行处理

命令格式:webpack 要打包的文件的路径 打包好的输出文件的路径
建议叫bundle.js

image.png

webpack作用:
1.webpack能够处理js文件的互相依赖关系.
2.webpack能够处理js的兼容问题,把高级的 不识别的语法 转为低级的,浏览器能正常识别的语法.

可以使用一个配置文件,默认webpack打包命令是采用的文件位置和输出位置
默认文件名:webpack.config.js
这个配置文件,其实就是一个js文件,通过Node中的模块操作,向外暴露了一个配置对象
module.exports={...}
entry:代表入口,指定我们要打包哪个文件
output:代表出口,指定我们要输出到哪个目录下,以什么名称来命名.

使用webpack-dev-server来实现自动打包和编译的功能
他会监听webpack.config.js中ertry节点的需要打包的文件变化,然后自动进行打包构建.

1.运行webpack-dev-server -D 把这个项目安装到项目的本地开发依赖
2.安装完毕后,这个工具的用法和webpack命令一样
3.由于 我们是在项目中,本地安装的webpack-dev-server,所以 无法把它当做脚本命令,无法在控制台中直接运行(只有那些安装到全局 -g 的工具,才能在终端中正常执行),可以在package.json文件的scripts这个节点中配置我们需要运行的命令,只要我们输入 npm run dev就代表要执行这个命令了,同样会执行我们的项目构建.

image.png
4.webpack-dev-server依赖于webpack,强制要求项目本地里要安装webpack,需要再次安装cnpm install webpack -D
image.png

在webpack4.X版本之后,需要安装webpack-cli,为了防止模块冲突,可以使用下面的版本安装:
//卸载版本
cnpm uninstall webpack -g
cnpm uninstall -g webpack-dev-server
//安装指定版本
cnpm install webpack@3.8.0 --save-dev
cnpm install webpack-dev-server@2.9.7 --save-dev

webpack-dev-server控制台输出内容:

image.png

1.表示项目运行到localhost:8080,把项目以服务器的形式运行起来
2.webpack的输出文件被托管于根目录,说明页面在引用bundle.js的时候要引入根目录的文件,而不是dist目录下的

webpack-dev-server 帮我们打包生成的bundle.js文件,并没有保存在实际的物理磁盘上,而是 直接托管到了 电脑的内存中,看不到,他与dist node_modules平级,我们在项目根目录中根本找不到打包好的bundle.js

配置命令的第2种方式:
webpack-dev-server命令常用参数介绍:
--open 构建完成后自动打开浏览器
--port 80 指定端口
--contentBase 基于那个目录打开浏览器
--hot 可以实现热加载(构建的时候可以实现部分更新,而不是生成全新的bundle.js文件),页面不会刷新,可以异步更新,对js文件无效.可以用作样式更新.

image.png

配置命令的第2种方式:
可以在webpack.config.js中进行配置
需要在webpack.config.js文件中导入webpack模块

image.png

使用html-webpack-plugin,可以把html放入内存中
安装命令cnpm install html-webpack-plugin -D
在webpack.config.js中导入这个模块,只要是插件,一定要放到plugins这个节点中

这个插件的两个作用:
1.自动的在内存中根据指定页面生成一个内存的页面
2.自动把打包好的bundle.js追加到我们内存中的页面中去.

当使用了html-webpack-plugin之后,我们不在手动处理bundle.js的引用路径了,因为 这个插件 已经帮我们创建了一个合适的script标签,并且 引用了正确的路径.

image.png

在main.js中导入样式表
使用import './css/index.css'来导入CSS样式表
和导入模块的区别是:
jquery模块是标准的js模块,通过module.exports向外暴露了一个成员,通过import $ from 'jquery'来接收一下成员
而样式表没有暴露任何成员,所以使用import通过路径把样式拿过来放在这里(非js模块使用这种方式).

注意:webpack 默认只能打包处理JS类型的文件,无法处理 其他的非 JS类型的文件.
如果要处理 非JS类型的文件,需要手动安装一下 合适的 第三方 loader 加载器.

1.如果想要打包处理css文件,需要安装 cnpm install style-loader css-loader -D
2.打开webpack.config.js 这个配置文件,在里面 新增一个配置节点, module 他是一个对象,在这个module对象身上,有个rules属性 他是个数组,这个数组里 存放了所有的第三方文件的匹配和处理规则.
注意:匹配规则use属性应该为loader,否则还是会报webpack打包失败,需要一个合适的加载器来处理css

image.png

webpack处理第三方文件类型的过程:
1.发现这个 要处理的文件不是JS文件 然后就去 配置文件中,查找有没有对应的第三方 loader规则.
2.如果能够找到对应的规则,就会调用对应的loader处理这种文件类型.
3.在调用loader的时候,是从后往前调用的,也就是先调用css-loader,然后把结果交给style-loader继续处理.
4.当最后的一个loader调用完毕,会把处理的结果,直接交给webpack进行打包合并,最终输出到bundle.js中去.

对于less类型的,需要安装less的加载器
安装cnpm install less-loader -D
他在内部依赖less
cnpm install less -D
注意:如果是处理样式的加载器,那么再配置loader的时候,必须要有['style-loader','css-loader'],说明后面的特殊加载器把对应的格式处理成普通css,再交给css-loader继续处理