复习

父子组件直接传值

案例代码看 vue-day5 案例

路由基础使用

案例代码看 vue-day5 案例

`watch`属性的使用

考虑一个问题：想要实现 名 和 姓 两个文本框的内容改变，则全名的文本框中的值也跟着改变；（用以前的知识如何实现？？？）

监听data中属性的改变：

<div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>{{fullName}}</span>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen',
        fullName: 'jack - chen'
      },
      methods: {},
      watch: {
        'firstName': function (newVal, oldVal) { // 第一个参数是新数据，第二个参数是旧数据
          this.fullName = newVal + ' - ' + this.lastName;
        },
        'lastName': function (newVal, oldVal) {
          this.fullName = this.firstName + ' - ' + newVal;
        }
      }
    });
  </script>

监听路由对象的改变：

<div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>

    <router-view></router-view>
  </div>

  <script>
    var login = Vue.extend({
      template: '<h1>登录组件</h1>'
    });

    var register = Vue.extend({
      template: '<h1>注册组件</h1>'
    });

    var router = new VueRouter({
      routes: [
        { path: "/login", component: login },
        { path: "/register", component: register }
      ]
    });

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router: router,
      watch: {
        '$route': function (newVal, oldVal) {
          if (newVal.path === '/login') {
            console.log('这是登录组件');
          }
        }
      }
    });
  </script>

`computed`计算属性的使用

默认只有getter的计算属性：

<div id="app">
    <input type="text" v-model="firstName"> +
    <input type="text" v-model="lastName"> =
    <span>{{fullName}}</span>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen'
      },
      methods: {},
      computed: { // 计算属性； 特点：当计算属性中所以来的任何一个 data 属性改变之后，都会重新触发 本计算属性 的重新计算，从而更新 fullName 的值
        fullName() {
          return this.firstName + ' - ' + this.lastName;
        }
      }
    });
  </script>

定义有getter和setter的计算属性：

<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <!-- 点击按钮重新为 计算属性 fullName 赋值 -->
    <input type="button" value="修改fullName" @click="changeName">

    <span>{{fullName}}</span>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'jack',
        lastName: 'chen'
      },
      methods: {
        changeName() {
          this.fullName = 'TOM - chen2';
        }
      },
      computed: {
        fullName: {
          get: function () {
            return this.firstName + ' - ' + this.lastName;
          },
          set: function (newVal) {
            var parts = newVal.split(' - ');
            this.firstName = parts[0];
            this.lastName = parts[1];
          }
        }
      }
    });
  </script>

`watch`、`computed`和`methods`之间的对比

computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
methods方法表示一个具体的操作，主要书写业务逻辑；
watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；

`nrm`的安装使用

作用：提供了一些最常用的 NPM 包镜像地址，能够让我们快速的切换安装包时候的服务器地址；
什么是镜像：原来包刚一开始是只存在于国外的 NPM 服务器，但是由于网络原因，经常访问不到，这时候，我们可以在国内，创建一个和官网完全一样的 NPM 服务器，只不过，数据都是从人家那里拿过来的，除此之外，使用方式完全一样；

运行npm i nrm -g全局安装nrm包；
使用nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址；
使用nrm use npm或nrm use taobao切换不同的镜像源地址；

注意： nrm 只是单纯的提供了几个常用的下载包的 URL 地址，并能够让我们在这几个地址之间，很方便的进行切换，但是，我们每次装包的时候，使用的装包工具，都是 npm

在网页中会引用哪些常见的静态资源？

.js .jsx .coffee .ts（TypeScript 类 C# 语言）

.css .less .sass .scss

Images

.jpg .png .gif .bmp .svg

字体文件（Fonts）

.svg .ttf .eot .woff .woff2

模板文件

.ejs .jade .vue【这是在 webpack 中定义组件的方式，推荐这么用】

网页中引入的静态资源多了以后有什么问题？？？

网页加载速度慢，因为我们要发起很多的二次请求；
要处理错综复杂的依赖关系

如何解决上述两个问题

合并、压缩、精灵图、图片的 Base64 编码
可以使用之前学过的 requireJS、也可以使用 webpack 可以解决各个包之间的复杂依赖关系；

什么是 webpack?

webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；

如何完美实现上述的 2 种解决方案

使用 Gulp，是基于 task 任务的；
使用 Webpack，是基于整个项目进行构建的；

借助于 webpack 这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
根据官网的图片介绍 webpack 打包的过程
webpack 官网

webpack 安装的两种方式

运行npm i webpack -g全局安装 webpack，这样就能在全局使用 webpack 的命令
在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

初步使用 webpack 打包构建列表隔行变色案例

运行npm init初始化项目，使用 npm 管理项目中的依赖包
创建项目基本的目录结构
使用cnpm i jquery --save安装 jquery 类库
创建main.js并书写各行变色的代码逻辑：

// 导入jquery类库
   import $ from 'jquery'

   // 设置偶数行背景色，索引从0开始，0是偶数
   $('#list li:even').css('backgroundColor','lightblue');
   // 设置奇数行背景色
   $('#list li:odd').css('backgroundColor','pink');

直接在页面上引用main.js会报错，因为浏览器不认识import这种高级的 JS 语法，需要使用 webpack 进行处理，webpack 默认会把这种高级的语法转换为低级的浏览器能识别的语法；
运行webpack 入口文件路径输出文件路径对main.js进行处理：

1	webpack src/js/main.js dist/bundle.js

使用 webpack 的配置文件简化打包时候的命令

在项目根目录中创建webpack.config.js
由于运行 webpack 命令的时候，webpack 需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径：

// 导入处理路径的模块
var path = require('path');

// 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
module.exports = {
    entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
    output: { // 配置输出选项
        path: path.resolve(__dirname, 'dist'), // 配置输出的路径
        filename: 'bundle.js' // 配置输出的文件名
    }
}

实现 webpack 的实时打包构建

由于每次重新修改代码之后，都需要手动运行 webpack 打包的命令，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。
运行cnpm i webpack-dev-server --save-dev安装到开发依赖
安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错，此时需要借助于package.json文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令，发现可以进行实时打包，但是 dist 目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中

把bundle.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快
这个时候访问 webpack-dev-server 启动的http://localhost:8080/网站，发现是一个文件夹的面板，需要点击到 src 目录下，才能打开我们的 index 首页，此时引用不到 bundle.js 文件，需要修改 index.html 中 script 的 src 属性为:<script src="../bundle.js"></script>
为了能在访问http://localhost:8080/的时候直接访问到 index 首页，可以使用--contentBase src指令来修改 dev 指令，指定启动的根目录：

1	"dev": "webpack-dev-server --contentBase src"

同时修改 index 页面中 script 的 src 属性为<script src="bundle.js"></script>

使用`html-webpack-plugin`插件配置启动页面

由于使用--contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改 index.html 中 script 标签的 src 属性，所以推荐大家使用html-webpack-plugin插件配置启动页面.

运行cnpm i html-webpack-plugin --save-dev安装到开发依赖
修改webpack.config.js配置文件如下：

// 导入处理路径的模块
var path = require('path');
// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
    output: { // 配置输出选项
        path: path.resolve(__dirname, 'dist'), // 配置输出的路径
        filename: 'bundle.js' // 配置输出的文件名
    },
    plugins:[ // 添加plugins节点配置插件
        new htmlWebpackPlugin({
            template:path.resolve(__dirname, 'src/index.html'),//模板路径
            filename:'index.html'//自动生成的HTML文件的名称
        })
    ]
}

修改package.json中script节点中的 dev 指令如下：

1	"dev": "webpack-dev-server"

将 index.html 中 script 标签注释掉，因为html-webpack-plugin插件会自动把 bundle.js 注入到 index.html 页面中！

实现自动打开浏览器、热更新和配置浏览器的默认端口号

注意：热更新在 JS 中表现的不明显，可以从一会儿要讲到的 CSS 身上进行介绍说明！

方式 1：

修改package.json的 script 节点如下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为 4321，--hot表示启用浏览器热更新：

1	"dev": "webpack-dev-server --hot --port 4321 --open"

方式 2：

修改webpack.config.js文件，新增devServer节点如下：

devServer:{
        hot:true,
        open:true,
        port:4321
    }

在头部引入webpack模块：

1	var webpack = require('webpack');

在plugins节点下新增：

1	new webpack.HotModuleReplacementPlugin()

使用 webpack 打包 css 文件

运行cnpm i style-loader css-loader --save-dev
修改webpack.config.js这个配置文件：

module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
        ]
    }

注意：use表示使用哪些模块来处理test所匹配到的文件；use中相关 loader 模块的调用顺序是从后向前调用的；

使用 webpack 打包 less 文件

运行cnpm i less-loader less -D
修改webpack.config.js这个配置文件：

1	{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

使用 webpack 打包 sass 文件

运行cnpm i sass-loader node-sass --save-dev
在webpack.config.js中添加处理 sass 文件的 loader 模块：

1	{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

使用 webpack 处理 css 中的路径

运行cnpm i url-loader file-loader --save-dev
在webpack.config.js中添加处理 url 路径的 loader 模块：

1	{ test: /\.(png\|jpg\|gif)$/, use: 'url-loader' }

可以通过limit指定进行 base64 编码的图片大小；只有小于指定字节（byte）的图片才会进行 base64 编码：

1	{ test: /\.(png\|jpg\|gif)$/, use: 'url-loader?limit=43960&name=[hash:8]-[name].[ext]' },

使用 babel 处理高级 JS 语法

在 webpack 中，默认只能处理一部分 ES6 的新语法，一些更高级的ES6语法或者 ES7 语法，webpack 是处理不了的；这时候，就需要借助于第三方的 loader，来帮助webpack 处理这些高级的语法，当第三方loader 把高级语法转为低级的语法之后，会把结果交给 webpack 去打包到 bundle.js 中
通过 Babel ，可以帮我们将高级的语法转换为低级的语法

在 webpack 中，可以运行如下两套命令，安装两套包，去安装 Babel 相关的loader功能：
1.1 第一套包： cnpm i babel-core babel-loader@7 babel-plugin-transform-runtime -D
1.2 第二套包： cnpm i babel-preset-env babel-preset-stage-0 -D
打开 webpack 的配置文件，在 module 节点下的 rules 数组中，添加一个新的匹配规则：
2.1
1
{ test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }

2.2 注意：在配置 babel 的 loader规则的时候，必须把 node_modules 目录，通过 exclude 选项排除掉：原因有俩：
2.2.1 如果不排除 node_modules，则Babel 会把 node_modules 中所有的第三方 JS 文件，都打包编译，这样，会非常消耗CPU，同时，打包速度非常慢；
2.2.2 哪怕，最终，Babel 把所有 node_modules 中的JS转换完毕了，但是，项目也无法正常运行！

在项目的根目录中，新建一个叫做 .babelrc 的Babel 配置文件，这个配置文件，属于JSON格式，所以，在写 .babelrc 配置的时候，必须符合JSON语法规范：不能写注释，字符串必须用双引号
3.1 在 .babelrc 写如下的配置：大家可以把 preset 翻译成【语法】的意思
1
2
3
4
{
"presets": ["env", "stage-0"],
"plugins": ["transform-runtime"]
}
了解：目前，我们安装的 babel-preset-env, 是比较新的ES语法，之前，我们安装的是 babel-preset-es2015, 现在，出了一个更新的语法插件，叫做 babel-preset-env ，它包含了所有的和 es***相关的语法

注意：语法插件babel-preset-es2015可以更新为babel-preset-env，它包含了所有的 ES 相关的语法；

babel-preset-env：你需要的唯一 Babel 插件
 Runtime transform 运行时编译 es6
URL 中的 hash（井号）

不忘初心，方得始终

Vue day5

复习

`watch`属性的使用

`computed`计算属性的使用

`watch`、`computed`和`methods`之间的对比

`nrm`的安装使用

在网页中会引用哪些常见的静态资源？

网页中引入的静态资源多了以后有什么问题？？？

如何解决上述两个问题

什么是 webpack?

如何完美实现上述的 2 种解决方案

webpack 安装的两种方式

初步使用 webpack 打包构建列表隔行变色案例

使用 webpack 的配置文件简化打包时候的命令

实现 webpack 的实时打包构建

使用`html-webpack-plugin`插件配置启动页面

实现自动打开浏览器、热更新和配置浏览器的默认端口号

方式 1：

方式 2：

使用 webpack 打包 css 文件

使用 webpack 打包 less 文件

使用 webpack 打包 sass 文件

使用 webpack 处理 css 中的路径

使用 babel 处理高级 JS 语法

相关文章

复习

watch属性的使用

computed计算属性的使用

watch、computed和methods之间的对比

nrm的安装使用

在网页中会引用哪些常见的静态资源？

网页中引入的静态资源多了以后有什么问题？？？

如何解决上述两个问题

什么是 webpack?

如何完美实现上述的 2 种解决方案

webpack 安装的两种方式

初步使用 webpack 打包构建列表隔行变色案例

使用 webpack 的配置文件简化打包时候的命令

实现 webpack 的实时打包构建

使用html-webpack-plugin插件配置启动页面

实现自动打开浏览器、热更新和配置浏览器的默认端口号

方式 1：

方式 2：

使用 webpack 打包 css 文件

使用 webpack 打包 less 文件

使用 webpack 打包 sass 文件

使用 webpack 处理 css 中的路径

使用 babel 处理高级 JS 语法

相关文章

`watch`属性的使用

`computed`计算属性的使用

`watch`、`computed`和`methods`之间的对比

`nrm`的安装使用

使用`html-webpack-plugin`插件配置启动页面