前端学习--Vue.js Day5

1、名称案例：
方法1：使用keyup（监听键盘抬起事件）事件实现
但是keyup不能监听看不见，摸不着的数据变化（例如：路由变化）

<template>
  <div>
    <input type="text" v-model="firstname" @keyup="getfullname">&nbsp;+
    <input type="text" v-model="lastname" @keyup="getfullname">&nbsp;=
    <input type="text" v-model="fullname">
  </div>
</template>

<script>
  export default {
    name: 'day_five',
    data(){
      return{
        firstname:'',
        lastname:'',
        fullname:''
      }
    },
    methods:{
      getfullname(){
        this.fullname = this.firstname + "-" + this.lastname
      }
    }
  }
</script>

方法2：使用watch监听文本框数据的变化

<template>
  <div>
    <input type="text" v-model="firstname" >&nbsp;+
    <input type="text" v-model="lastname" >&nbsp;=
    <input type="text" v-model="fullname">
  </div>
</template>

<script>
  export default {
    name: 'day_five',
    data(){
      return{
        firstname:'',
        lastname:'',
        fullname:''
      }
    },
    watch:{
    //  使用这个属性，可以监视data中制定数据的变化，然后触发watch
    //  对应的处理函数
      'firstname':function () {
        this.fullname = this.firstname + "-" + this.lastname
      },
      'lastname':function () {
        this.fullname = this.firstname + "-" + this.lastname
      }
    }
  }
</script>

watch-监视路由地址的改变，watch：可以监听到非DOM元素

方法3：computed-计算属性的使用和3个特点

<template>
  <div>
    <!--<input type="text" v-model="firstname" @keyup="getfullname">&nbsp;+-->
    <!--<input type="text" v-model="lastname" @keyup="getfullname">&nbsp;=-->
    <input type="text" v-model="firstname" >&nbsp;+
    <input type="text" v-model="lastname" >&nbsp;=
    <input type="text" v-model="fullname">
    <router-link to="/case1">case1</router-link>
  </div>
</template>

<script>
  export default {
    name: 'day_five',
    data(){
      return{
        firstname:'',
        lastname:'',
      }
    },
    computed:{
      //在computed中，可以定义一些属性，这些属性叫做[计算属性]，计算属性的本质就是一个方法，
      //只不过我们在使用这些属性的时候，是把它们的名称直接当作属性来使用，并不会把计算属性当作方法调用
      fullname:function () {
        //注意：1.计算属性这个function内部，所用到的任何data中的数据发送了变化
        // 就会立即重新计算这个计算属性的值
        //注意：2.计算属性在引用的时候，一定不要加（）去调用，直接把它当作普通属性去使用就好
        //优点：计算属性的求值结果会被缓存起来，方便下次直接使用；
        //如在div中有多次输出fullname结果的，那么这个函数只会执行一次，之后的输出都是直接用缓存数据
        return this.firstname + "-" + this.lastname
      }
    }
  }
</script>

watch、computed、methods的对比：

2、nrm的使用


3、webpack-概念引入



由于webpack是基于Node进行构建的额，所有webpack的配置文件中，任何合法的Node代码都是支持的
4、webpack-最基本的使用方式
npm init -y：是一个管理工具；在创建使用项目的开始时候运行
当创建的项目名称为中文时，使用npm init 且回车后需要手写一遍项目名称

当代码太高级浏览器无法解析时，可以通过webpack去处理，

遇到问题：
（1）WARNING in configuration The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.
（2）The CLI moved into a separate package: webpack-cli.
Please install ‘webpack-cli’ in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
原因：webpack 4.0版本将webpack-cli分离，需要额外安装webpack-cli
解决方法：
https://www.cnblogs.com/cythia/p/8495341.html
（1）检查webpack和webpack-cli是否全局安装

（2）安装完成后执行代码

5、webpack-最基本的配置文件的使用

6、webpack-dev-server的基本使用
安装：npm install webpack-dev-server -D

<script src="/bundle.js"></script>

把打包生成的bundle.js文件放在内存：使用速度较快；ctr + c（手动退出服务器）
此时html文件是物理磁盘中的数据，根目录下的bundle.js文件是电脑内存中

7、webpack-dev-server的常用命令参数
方式1：（推荐）

方式2：在webpack.config.js中设置
webpack中带‘s’的名称都是数组

8、html-webpack-plugin的i两个基本作用
将html文件也放到电脑内存中；安装 npm install html-webpack-plugin -D

9、loader-配置处理css样式表的第三方loader
webpack默认只能打包JS类型的文件
安装：cnpm i style-loader css-loader -D


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

10、loader-配置处理less文件的loader
安装：cnpm i less-loader -D

11、loader-配置处理scss文件的loader
安装：cnpm i sess-loader -D、cnpm i node-sass -D