Vue.js入门知识day5

名称案例：使用keyup事件实现

1、html布局

<div id="app">
        <!--分析-->
        <!--1.我们要监听到 文本框数据的改变，这样才能知道 什么时候去拼接 出一个 fullname-->
        <!--2.如何监听到文本框的数据改变呢-->
        <input type="text" v-model="firstname" @keyup="messageChange">+
        <input type="text" v-model="lastname" @keyup="messageChange">=
        <input type="text" v-model="fullname">
    </div>

2、javaScript代码

<script>

       var vm =new Vue({
           el:'#app',
           data:{
               firstname:'',
               lastname:'',
               fullname:''
           },
           methods: {
               messageChange(){
                   this.fullname = this.firstname+this.lastname
               }
           }
       })
   </script>

名称案例：使用watch监听文本框数据的变化

1、html布局

 <div id="app">
        <input type="text" v-model="firstname" >+
        <input type="text" v-model="lastname" >=
        <input type="text" v-model="fullname">
    </div>

2、javaScript代码

 <script>

       var vm =new Vue({
           el:'#app',
           data:{
               firstname:'',
               lastname:'',
               fullname:''
           },
          watch:{
               // 使用这个属性，可以监视data中指定数据的变化，然后出发这个watch中对应的function处理函数
               'firstname':function(newVal,oldVal){
                   this.fullname = newVal+this.lastname
               },
              'lastname':function(newVal){
                   this.fullname = this.firstname + newVal
              }
          }
       })
   </script>

watch：监听路由地址的改变

1、html布局

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

2、javaScript代码

 <script>
       var login = {
           template:'<h1>登录组件</h1>'
       }
       var register = {
           template:'<h1>注册组件</h1>'
       }
       var router = new VueRouter({
           routes:[
               {path:'/',redirect:'/login'},
               {path:'/login',component:login},
               {path:'/register',component: register}
           ]
       })
       var vm =new Vue({
           el:'#app',
           data:{
               firstname:'',
               lastname:'',
               fullname:''
           },
           router:router,
           watch:{
              // this.$route.path
               '$route.path':function (newVal,oldVal) {
                   if(newVal==='/login'){
                       console.log('欢迎进入登录页面')
                   }else{
                       console.log('欢迎进入注册页面')
                   }
               }
           }
       })

computed计算属性的使用和三个特点

1、html布局

<div id="app">
        <input type="text" v-model="firstname" >+
        <input type="text" v-model="lastname" >=
        <input type="text" v-model="fullname">
</div>

2、javaScript代码

<script>
       var vm =new Vue({
           el:'#app',
           data:{
               firstname:'',
               lastname:''
           },
            computed:{
               // 在computed中可以定义一些属性，这些属性叫做计算属性，计算属性的本质就是一个方法，只不过，我们在使用这些计算属性的时候，是把他们的名称直接当做属性来使用的，并不会把计算属性当做方法去调用
               //  注意1：计算属性，在引用的时候，一定不要加()去调用，直接把他当做普通属性去使用就好了
               //  注意2：只要计算属性，这个function内部，所用到的任何data中的数据发生了变化，就会立即重新计算这个计算属性的值
               //  注意3：计算属性的求值结果，会被缓存起来，方便下次直接使用；如果计算属性方法中，所依赖的任何数据都没有发生过变化，则不会重新对计算属性求值
                'fullname':function(){
                    return this.firstname + this.lastname
                }
            }
       })
   </script>

watch、computed、methods之间的对比

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

nrm的安装使用

作用：提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址
什么是镜像：原来包刚一开始只存在于国外的NPM服务器，但是由于网络原因，经常访问不到，这时候，我们可以在国内，创建一个和官网完全一样的NPM服务器，只不过，数据都是从人家那里拿过来的，除此以外，使用方式完全一样；
1.运行npm i nrm -g全局安装nrm包
2.使用nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址
3.使用nrm use npm或nrm use taobao切换不同的镜像源地址
注意:nrm只是单纯的提供了几个常用的下载包的URL地址，并能够让我们在这几个地址之间很方便的进行切换，但是，我们每次装包的时候，使用的装包工具，都是npm

Webpack

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

• JS
  • .js .jsx .coffee .ts(TypeScript 类C# 语言)
• CSS
  • .css .less .sass .scss
• Images
  • .jpg .png .gif .bmp .svg
• 字体文件(Fonts)
  • .svg .ttf .eot .woff .woff2
• 模板文件
  • .egs .jade .vue【这是在webpack中定义组件的方式，推荐这么用】

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

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

如何解决上述两个问题

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

什么是webpack

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

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

1.使用Gulp，是基于task任务的；
2.使用Webpack，是基于整个项目进行构建的；
+借助于webpack 这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。

• 根据官网的图片接受webpack的打包过程
• webpack官网

webpack安装的两种方式

1.运行npm i webpack -g安装全局webpack，这样就能在全局使用webpack的命令
2.在项目根目录运行npm i webpack --save-dev安装到项目依赖中
下面是我写的安装教程，可以参阅。
https://mp.youkuaiyun.com/mdeditor/87859629#

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

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

webpack基本的使用方式

webpack 打包的JS路径 -o 要打包到的JS路径（给它命名）

webpack ./src/main.js -o ./dist/bundle.js

然后引用打包好的文件即可

以下是要被打包的代码
1、javaScript代码

// 这个main.js是我们项目的JS入口文件

//1.导入Jquery
// import *** from *** 是ES6中导入模块的方式
// 由于 ES6的代码太高级了，浏览器解析不了，所以，这一行执行会报错
import $ from 'jquery'
// const $ = require('jquery')

$(function () {
    $('li:odd').css('backgroundColor','lightblue')
    $('li:even').css('backgroundColor',function () {
        return '#'+'D97634'
    })
})


// 经过刚才的演示,webpack可以做什么事情？？？
// 1.webpack 能够处理JS文件的互相依赖关系；
// 2.webpack 能够处理JS的兼容问题，把高级的浏览器不识别的语法转为低级的，浏览器能正常识别的语法

//刚才运行的命令格式: webpack 要打包的文件的路径 打包好的输出文件的路径

webpack-直接用webpack命令打包文件

（注意，必须在根目录下执行webpack指令才能不指定入口和出口）

1、javaScript代码

const path = require('path')
//这个配置文件其实就是一个JS文件，通过node中的模块操作，向外暴露了一个配置对象
module.exports = {
    //在配置文件中需要手动指定 入口和出口
    entry:path.join(__dirname,'./src/main.js'),//入口，表示要使用webpack打包哪个文件
    output:{//输出文件
        path:path.join(__dirname,'./dist'),//指定打包好的文件，输出到哪个目录去
        filename:'bundle.js'//这是指定输出的文件的名称
    }
}

这样，当我们修改完代码之后，在命令行执行webpack

再刷新页面，页面就会变成修改后的样子了。

当我们在控制台，直接输入webpack命令执行的时候，webpack做了以下几步

1.首先，webpack发现，我们并没有通过命令的形式，给它指定入口和出口

2.webpack就会去项目的根目录中，查找一个叫做webpack.config.js的配置文件

3.当找到配置文件后，webpack会去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中导出的配置对象

4.当webpack拿到配置对象后，就拿到了配置对象中指定的入口和出口，然后进行打包构建;

webpack-dev-server的安装和基本使用（自动执行打包操作）

1. 本地安装webpack-dev-server

	cnpm i webpack-dev-server -D

警告，安装本地webpack

	cnpm i webpack -D

2. 打开package.json
   
3. 运行

刚才运行的命令格式: webpack 要打包的文件的路径 -o 打包好的输出文件的路径

现在运行的命令 npm run dev

我们可以看到，项目已经在端口号为8080的服务器上运行了，同时，项目的运行结果，会输出在根目录上。而我们项目的运行结果是bundle.js，所以我们自动更新保存的bundle.js其实不是保存在我们之前创建的…/dist/bundle.js内存，而是保存在内存中。

使用webpack-dev-server这个工具，来实现自动打包编译的功能

1.运行npm i webpack-dev-server -D把这个工具安装到项目的本地开发依赖

2.安装完毕后，这个工具的用法和webpack命令的用法完全一样

3.由于我们是在项目中本地安装的 webpack-dev-server，所以，无法把它当做脚本命令在终端中直接运行;(只有那些 安装到全局 -g的工具，才能在中断中正常执行)

4.注意:webpack-dev-server这个工具，如果想要正常运行,要求，在本地项目中，必须安装webpack

5.webpack-dev-server 帮我们打包生成的 bundle.js文件，并没有存放到实际的物理磁盘上，而是直接托管到了电脑的内存中，所以我们在项目根目录中根本找不到这个打包好的 bundle.js

6.我们可以认为,webpack-dev-server把打包好的文件以一种虚拟的形式托管到了咱们项目的根目录中，虽然我们看不到他，但是可以认为，和dist src node_modules平级，有一个看不见的文件叫做bundle.js

webpack-dev-server的常用命令参数

• 打开根目录下的package.json
  

• 停止服务器(ctrl+c连按两次)

• 开始加参数

  修改后自动打开浏览器

npm run dev（重新运行服务器）

指定端口 为3000:注意，我们改端口之后，要把输出文件的引用路径也改了

	npm run dev（重新运行服务器）

设置内容的根路径

	npm run dev（重新运行服务器）

热重载

局部更新代码，相当于做了补丁，减少不必要的代码更新，可以实现浏览器的无刷新重载

webpack-dev-server配置的第二种方式（不推荐，要了解）

const path = require('path')
//启用热更新的第二步
const webpack = require('webpack')
//这个配置文件其实就是一个JS文件，通过node中的模块操作，向外暴露了一个配置对象
module.exports = {
    //大家已经学会了举一反三，大家觉得，在配置文件中需要手动指定 入口和出口
    entry:path.join(__dirname,'./src/main.js'),//入口，表示要使用webpack打包哪个文件
    output:{//输出文件
        path:path.join(__dirname,'./dist'),//指定打包好的文件，输出到哪个目录去
        filename:'bundle.js'//这是指定输出的文件的名称
    },
    devServer:{//这是配置dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些
        //  --open --port 3000 --contentBase src --hot
        open:true,//自动打开浏览器
        port:3000,//设置启动时候的运行端口
        contentBase:'src',//指定托管的根目录
        hot:true//启用热更新的第一步
    },
    plugins:[//配置插件的结点
        new webpack.HotModuleReplacementPlugin()//new 一个了更新的模块对象，这是启用热更新的第三步
    ]
}

// 当我们在控制台，直接输入webpack命令执行的时候，webpack做了以下几步
//  1.首先，webpack发现，我们并没有通过命令的形式，给它指定入口和出口
//  2.webpack就会去项目的根目录中，查找一个叫做`webpack.config.js`的配置文件// 3.当找到配置文件后，webpack会去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中导出的配置对象
// 4.当webpack拿到配置对象后，就拿到了配置对象中指定的入口和出口，然后进行打包构建;

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

由于使用--contentBase指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index中src中标签的src属性，所以推荐大家使用html-webpack-plugin插件配置启动页面。
1.运行cnpm i html-webpack-plugin --save-dev安装到开发依赖
2.修改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文件的名称
		})
	]
}

这个插件的两个作用:

1.自动在内存中根据指定页面生成一个内存的页面
2.自动把打包好的bundle.js追加到页面中去

loader-配置处理css样式表的第三方loader

1. 使用 import语法，导入css样式表

	import './css/index.css'

注意：webpack默认只能打包处理js类型的文件，无法处理其他的非js类型的文件
如果要处理非JS类型的文件，我们需要手动安装一些合适的第三方loader加载器;

2. 安装第三方loader加载器

	cnpm i style-loader css-loader -D

3. 打开 webpack.config.js这个配置文件，在里面新增一个配置节点，叫做module，它是一个对象，在这个module对象上，有一个rules属性，这个rules属性是个数组;这个数组中存放了所有第三方文件的匹配和处理规则

module.exports = {
    entry:path.join(__dirname,'./src/main.js'),
    output:{
    },
    devServer:{//这是配置dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些
    },
    plugins:[
    ],
    module:{
        //这个节点，用于配置所有第三方模块加载器
        rules:[
            //所有第三方模块的匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则
        ]
    }
}

loader-分析webpack调用第三方loader的过程

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

loader-配置处理less文件的loader

1. 使用 import语法，导入less样式表

	import './less/index.less'

2. 安装第三方loader加载器

	cnpm i less-loader -D

报错，说明需要less-loader依赖less

	cnpm i less -D

3. 打开 webpack.config.js这个配置文件

module.exports = {
    entry:path.join(__dirname,'./src/main.js'),
    output:{
    },
    devServer:{//这是配置dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些
    },
    plugins:[
    ],
    module:{
        //这个节点，用于配置所有第三方模块加载器
        rules:[
            //所有第三方模块的匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则,
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']}//配置处理.less文件的第三方loader规则
        ]
    }
}

loader-配置处理scss文件的loader

1. 使用 import语法，导入scss样式表

	import './less/index.scss'

2. 安装第三方loader加载器，注意，是sass，不是scss

	cnpm i sass-loader -D

报错，说明需要sass-loader依赖，注意，这里用cnpm，npm装不了

	cnpm i node-sass

3. 打开 webpack.config.js这个配置文件

module.exports = {
    entry:path.join(__dirname,'./src/main.js'),
    output:{
    },
    devServer:{//这是配置dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些
    },
    plugins:[
    ],
    module:{
        //这个节点，用于配置所有第三方模块加载器
        rules:[
            //所有第三方模块的匹配规则
            {test:/\.css$/,use:['style-loader','css-loader']},//配置处理.css文件的第三方loader规则,
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']}//配置处理.less文件的第三方loader规则
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}//配置处理.scss文件的第三方loader规则
        ]
    }
}