Vue(day5)

时间 2019-12-13

标签 vue day5 day 繁體版

原文原文链接

1、监听数据变化的三种形式

假设咱们须要提供两个输入框，分别输入姓和名，而后自动拼接为姓名。这样，咱们就须要监听输入框的数据变化，让完整的姓名跟随输入的变更而变化。咱们可使用如下三种方式：javascript

一、结合DOM事件使用`mothod`来监听数据变化

html代码：使用keyup事件来监听数据的改变。css

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

js代码：html

new Vue({
    el: '#app',
    data: {
        firstname: '',
        lastname: '',
        fullname: ''
    },
    methods: {
        getFullname(){
            this.fullname = (this.firstname + ' ' + this.lastname).trim();
            return this.fullname;
        }
    }
});

二、使用`watch`侦听器

相似methods的使用，咱们能够在Vue实例中使用watch来监听表达式数据的变化，并执行对应的回调函数。java

html代码：node

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

js代码：jquery

new Vue({
    el: '#app',
    data: {
        firstname: '',
        lastname: '',
        fullname: ''
    },
    watch: {
        firstname: function(){
            this.fullname = (this.firstname + ' ' + this.lastname).trim();
        },
        lastname: function(){
            this.fullname = (this.firstname + ' ' + this.lastname).trim();
        }
    }
});

能够发现，watch监听器以要监听的数据表达式做为键，值为处理数据变化后的函数。webpack

三、使用计算属性`computed`

直接看效果：es6

html代码不变，注意js代码：web

new Vue({
    el: '#app',
    data: {
        firstname: '',
        lastname: ''
    },
    computed: {
        fullname: function(){
            return (this.firstname + ' ' + this.lastname).trim();
        }
    }
});

首先去掉了data中的fullname属性，取而代之的是computed中的fullname属性。计算属性须要返回一个值做为属性值，且能自动监听内部依赖的变化，自动更新属性值，并对值进行存储，以供屡次调用。正则表达式

四、三者的区别

watch侦听器更像是专门用于监听数据变化的处理方法，但容易形成滥用，而methods通常用于处理业务逻辑，即相同的逻辑能够直接调用。计算属性很直接，将须要的属性进行计算处理后再进行调用。

2、webpack的简单使用

一、静态资源的处理

对于Web项目来讲，包含各式各样的静态资源页面，且格式种类繁多，如：

js
css
image
模块&组件

静态资源多而杂的时候，页面加载效率就低，且难以处理好资源之间的依赖关系。

因此咱们须要对资源进行整合压缩，对于小图片来讲还可使用图片精灵图（image sprite）、转码为Base64字节码等。

而依赖关系除了手动处理咱们还可使用一些工具。

而以上问题咱们均可以使用webpack工具进行解决，如文件格式转化、压缩整合等。下面咱们将结合Vue来使用webpack。

二、webpack的配置

场景

请看如下场景：

咱们在Node中使用jquery来改变表格的样式，其中，咱们还使用了大多浏览器不支持的es6语法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<table id="tab"  border="1" rules="all">
    <thead>
        <td>header1</td>
        <td>header2</td>
        <td>header3</td>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>4</td>
            <td>4</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript" src="./dist/main.js"></script>
</body>
</html>

import $ from 'jquery';//es6语法：等价于const $ = require('jquery');

$(function(){
    $('#tab > thead').css({
        backgroundColor: '#bdccc2'
    });
    $('#tab > tbody > tr:even').css({
        backgroundColor: '#c1f1cd'
    });
    $('#tab > tbody > tr:odd').css({
        backgroundColor: '#f3ffab'
    });
});

这样，当咱们直接访问这个页面时就会报错。如今咱们使用webpack对mian.js进行打包处理，并保存到新的目录文件中，如: \dist\bundle.js

在使用以前，咱们须要先安装webpack。

　安装

# 全局安装
npm install webpack -g
# 本地开发环境安装
npm install webpack --save-dev
# 4.0以上版本还须要安装
npm install --save-dev webpack-cli

打包

使用命令行工具执行：

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

而后main.js就会被打包成新的bundle.js文件，咱们在页面中引用这个js，就能够看到jquery作出的样式效果：

咱们发现，webpack为咱们作了如下几点：

打包压缩js文件（main.js）
自动处理包之间的依赖（jqurey）

改进：配置文件

咱们发现每次都须要在命令行填写输入输出文件路径实在是太麻烦了，且容易出错。因此webpack提供了一个读取默认名为webpack.config.js配置文件的功能。在该配置文件中咱们能够配置诸多信息，其中就包括文件的入口和出口。

如今，咱们在项目的更目录下新建一个名为webpack.config.js的文件。

//webpack是基于node的，因此配置文件其实就是一个js导出的对象
var path = require('path');

module.exports = {
    //入口
    entry: path.join(__dirname, '/src/main.js'),
    //出口
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    }
}

这样，咱们就能够直接使用webpack命令进行打包了。可能咱们还不知足于手动加载的方式，就像nodemon同样，咱们但愿当咱们做出变更时就能及时打包响应，这样咱们须要另外安装一个模块：webpack-dev-server。

再改进：使用`webpack-dev-server`热加载

安装

# 安装(注意，依赖本地webpack)
npm install web-dev-server --save-dev

使用

在package.json的scripts中配置一下就能使用了：

# 配置到package.json
"dev": "webpack-dev-server"
# 命令行启动
npm run dev

细节问题

如今咱们须要经过http://localhost:8080来访问页面。此时若是咱们修改并保存main.js，会自动执行打包动做，但咱们页面却没有发生变化，这是由于自动编译的出口目录并非原来那个文件，且不在物理磁盘，而在内存中。默认的路径为根路径，因此/bundle.js才能访问到自动打包的文件。

更多的配置

咱们能够修改命令或者在webpack.config.js中增长配置来修改一些默认选项。

使用命令：

# --open 自动打开浏览器访问根目录
# --contentBase ./src 设置访问的根目录为src目录
# --hot 启用热加载
webpack-dev-server --open --contentBase ./src --hot

使用配置文件也能达到同样的效果

const path = require('path');
const webpack = require('webpack');

module.exports = {
    //入口
    entry: path.join(__dirname, '/src/main.js'),
    //出口
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    devServer: {
        open: true,
        contentBase: path.join(__dirname, '/src'),
        hot: true //注意，这样配置还不够，由于热更新须要使用到webpack自带的一个插件：模块热替换插件
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()//启用模块热替换插件
    ]
}

更多关于webpack-dev-server请参考https://www.webpackjs.com/configuration/dev-server/

三、加载非js文件

webpack默认只能加载js文件，若是是非js文件则须要使用第三方文件加载模块。

好比咱们在main.js导入咱们写的一个css文件main.css。

一、首要咱们任意规定一个css样式：
```
li{
  list-style-type: none;
}
```
二、而后须要在main.js中导入（这是webpack提供的特殊loader模式）：
```
import './main.css'
```
三、如今咱们只须要配置须要的第三方文件加载模块便可

加载css文件须要两个模块：style-loader和css-loader.
```
npm install style-loader css-loader --dev
```
修改配置文件，增长配置选项：
```
module.exports = {
  module: {//第三方模块的引用
      rules: [//匹配规则 test使用正则表达式来匹配loader的文件类型 use是使用的模块：从后往前加载
          {test: /\.css$/, use: ['style-loader', 'css-loader']}
      ]
  }
}
```
注意：这个加载顺序很重要，若是模块之间存在依赖或顺序关系，则须要保证加载顺序从后往前加载。

相似的文件加载是同样的道理。

更多使用细节请参考官方文档

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。