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

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

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

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

  1. <div id="app">
  2. 	<input type="text" v-model="firstname" @keyup="getFullname">
  3. 	<input type="text" v-model="lastname" @keyup="getFullname">
  4. 	<input type="text" v-model="fullname">
  5. </div>

js代码：

  1. new Vue({
  2. 	el: '#app',
  3. 	data: {
  4. 		firstname: '',
  5. 		lastname: '',
  6. 		fullname: ''
  7. 	},
  8. 	methods: {
  9. 		getFullname(){
  10. 			this.fullname = (this.firstname + ' ' + this.lastname).trim();
  11. 			return this.fullname;
  12. 		}
  13. 	}
  14. });

2、使用watch侦听器

类似methods的使用，我们可以在Vue实例中使用watch来监听表达式数据的变化，并执行对应的回调函数。

html代码：

  1. <div id="app">
  2. 	<input type="text" v-model="firstname">
  3. 	<input type="text" v-model="lastname">
  4. 	<input type="text" v-model="fullname">
  5. </div>

js代码：

  1. new Vue({
  2. 	el: '#app',
  3. 	data: {
  4. 		firstname: '',
  5. 		lastname: '',
  6. 		fullname: ''
  7. 	},
  8. 	watch: {
  9. 		firstname: function(){
  10. 			this.fullname = (this.firstname + ' ' + this.lastname).trim();
  11. 		},
  12. 		lastname: function(){
  13. 			this.fullname = (this.firstname + ' ' + this.lastname).trim();
  14. 		}
  15. 	}
  16. });

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

3、使用计算属性computed

直接看效果：

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

  1. new Vue({
  2. 	el: '#app',
  3. 	data: {
  4. 		firstname: '',
  5. 		lastname: ''
  6. 	},
  7. 	computed: {
  8. 		fullname: function(){
  9. 			return (this.firstname + ' ' + this.lastname).trim();
  10. 		}
  11. 	}
  12. });

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

4、三者的区别

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

二、webpack的简单使用

1、静态资源的处理

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

  • js
  • css
  • image
  • 模块&组件

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

所以我们需要对资源进行整合压缩，对于小图片来说还可以使用图片精灵图（image sprite）、转码为Base64字节码等。

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

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

2、webpack的配置

场景

请看以下场景：

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta charset="utf-8">
  5. 	<title></title>
  6. </head>
  7. <body>
  8. <table id="tab"  border="1" rules="all">
  9. 	<thead>
  10. 		<td>header1</td>
  11. 		<td>header2</td>
  12. 		<td>header3</td>
  13. 	</thead>
  14. 	<tbody>
  15. 		<tr>
  16. 			<td>1</td>
  17. 			<td>1</td>
  18. 			<td>1</td>
  19. 		</tr>
  20. 		<tr>
  21. 			<td>2</td>
  22. 			<td>2</td>
  23. 			<td>2</td>
  24. 		</tr>
  25. 		<tr>
  26. 			<td>3</td>
  27. 			<td>3</td>
  28. 			<td>3</td>
  29. 		</tr>
  30. 		<tr>
  31. 			<td>4</td>
  32. 			<td>4</td>
  33. 			<td>4</td>
  34. 		</tr>
  35. 	</tbody>
  36. </table>
  37. <script type="text/javascript" src="./dist/main.js"></script>
  38. </body>
  39. </html>
  1. import $ from 'jquery';//es6语法：等价于const $ = require('jquery');
  3. $(function(){
  4. 	$('#tab > thead').css({
  5. 		backgroundColor: '#bdccc2'
  6. 	});
  7. 	$('#tab > tbody > tr:even').css({
  8. 		backgroundColor: '#c1f1cd'
  9. 	});
  10. 	$('#tab > tbody > tr:odd').css({
  11. 		backgroundColor: '#f3ffab'
  12. 	});
  13. });

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

在使用之前，我们需要先安装webpack。

安装
  1. # 全局安装
  2. npm install webpack -g
  3. # 本地开发环境安装
  4. npm install webpack --save-dev
  5. # 4.0以上版本还需要安装
  6. npm install --save-dev webpack-cli
打包

使用命令行工具执行：

  1. 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的文件。

  1. //webpack是基于node的，所以配置文件其实就是一个js导出的对象
  2. var path = require('path');
  4. module.exports = {
  5. 	//入口
  6. 	entry: path.join(__dirname, '/src/main.js'),
  7. 	//出口
  8. 	output: {
  9. 		path: path.join(__dirname, '/dist'),
  10. 		filename: 'bundle.js'
  11. 	}
  12. }

这样，我们就可以直接使用webpack命令进行打包了。可能我们还不满足于手动加载的方式，就像nodemon一样，我们希望当我们作出变动时就能及时打包响应，这样我们需要另外安装一个模块：webpack-dev-server。

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

  • 安装

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

  • 使用

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

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

  • 细节问题

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

  • 更多的配置

    我们可以修改命令或者在webpack.config.js中增加配置来修改一些默认选项。

    • 使用命令：

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

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

      1. const path = require('path');
      2. const webpack = require('webpack');
      4. module.exports = {
      5. 	//入口
      6. 	entry: path.join(__dirname, '/src/main.js'),
      7. 	//出口
      8. 	output: {
      9. 		path: path.join(__dirname, '/dist'),
      10. 		filename: 'bundle.js'
      11. 	},
      12. 	devServer: {
      13. 		open: true,
      14. 		contentBase: path.join(__dirname, '/src'),
      15. 		hot: true //注意，这样配置还不够，因为热更新需要使用到webpack自带的一个插件：模块热替换插件
      16. 	},
      17. 	plugins: [
      18. 		new webpack.HotModuleReplacementPlugin()//启用模块热替换插件
      19. 	]
      20. }

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

3、加载非js文件

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

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

  • 1、首要我们任意规定一个css样式：

    1. li{
    2. 	list-style-type: none;
    3. }

  • 2、然后需要在main.js中导入（这是webpack提供的特殊loader模式）：

    1. import './main.css'

  • 3、现在我们只需要配置需要的第三方文件加载模块即可

    加载css文件需要两个模块：style-loader和css-loader.

    1. npm install style-loader css-loader --dev

    修改配置文件，增加配置选项：

    1. module.exports = {
    2. 	module: {//第三方模块的引用
    3. 		rules: [//匹配规则 test使用正则表达式来匹配loader的文件类型 use是使用的模块：从后往前加载
    4. 			{test: /\.css$/, use: ['style-loader', 'css-loader']}
    5. 		]
    6. 	}
    7. }

    注意：这个加载顺序很重要，如果模块之间存在依赖或顺序关系，则需要保证加载顺序从后往前加载。

    类似的文件加载是一样的道理。

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

Vue(day5)的更多相关文章

  1. vue day5 分页控件 更新 PagedList.mvc 仿

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. vue day5 分页控件

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. vue知识点之day5

    vuex是解决多层父子关系传值的问题,减少了传值的复杂度 vue+webpack安装图示

  4. Vue.js - Day5 - Webpack

    在网页中会引用哪些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .css .less .sass .scss Images .jpg ...

  5. Vue入门到精通

    Vue.js - Day1 课程介绍 前5天: 都在学习Vue基本的语法和概念:打包工具 Webpack , Gulp 后5天: 以项目驱动教学: 什么是Vue.js Vue.js 是目前最火的一个前 ...

  6. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  7. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  8. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  9. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

随机推荐

  1. AbstractRoutingDataSource实现动态数据源切换 专题

    需求:系统中要实现切换数据库(业务数据库和his数据库) 网上很多资料上有提到AbstractRoutingDataSource,大致是这么说的 在Spring 2.0.1中引入了AbstractRo ...

  2. web页面中http返回的状态码解释

    状态码类别:   1xx: 信息类,表示客户发送的请求服务端正在处理   2xx:成功类,服务器 成功接收请求   3xx:重定向类,服务器中找到了多个请求内容,则需要用户再次操作选择   4xx:客 ...

  3. HTTPS加密原理

    http(超文本传输协议) 一种属于应用层的协议 缺点: 通信使用明文(不加密),内容可能会被窃听 不验证通信方的身份,因此有可能遭遇伪装 无法证明报文的完整性,所以有可能已遭篡改 优点: 传输速度快 ...

  4. selenium+java破解极验滑动验证码的示例代码

    转自: https://www.jianshu.com/p/1466f1ba3275 selenium+java破解极验滑动验证码 卧颜沉默 关注 2017.08.15 20:07* 字数 3085  ...

  5. BZOJ_1858_[Scoi2010]序列操作_线段树

    BZOJ_1858_[Scoi2010]序列操作_线段树 Description lxhgww最近收到了一个01序列,序列里面包含了n个数,这些数要么是0,要么是1,现在对于这个序列有五种变换操作和询 ...

  6. bootstrap 选项卡的使用

    1.页面中的tab 在做项目的时候用到了切换选项卡显示不同图表页面的 需求,如下图 就直接使用了bootstrapd的选项卡 学习源头: http://www.runoob.com/bootstrap ...

  7. 面试阿里前端P6血和泪换来的收获

      我的一个朋友在前端耕耘一段时间,也在网上进行了高度培训学习,最近一段时间他打算跳槽去阿里面试前端P6开发岗位,结果被痛虐了一回,估计从此以后会给他留下不可磨灭的阴影啊 真是十年生死两茫茫,一鲁代码 ...

  8. 从壹开始 [Admin] 之四 || NetCore + SignalR 实现日志消息推送

    缘起 哈喽大家周一好呀,感觉好久没有写文章了,上周出差了一次,感觉还是比坐办公室好的多,平时在读一本书<时生>,感兴趣的可以看看

  9. Mock接口平台Moco学习

    Mock就是模拟接口的.本文学习Mock的 Moco开源框架. Moco源码和jar下载地址: git  jar  下载moco-runner-xxxx-standalone.jar moco的启动及 ...

  10. Python-爬取妹子图(单线程和多线程版本)

    一.参考文章 Python爬虫之——爬取妹子图片 上述文章中的代码讲述的非常清楚,我的基本能思路也是这样,本篇文章中的代码仅仅做了一些异常处理和一些日志显示优化工作,写此文章主要是当做笔记,方便以后查 ...