Vue(day5)
一、监听数据变化的三种形式
假设我们需要提供两个输入框，分别输入姓和名，然后自动拼接为姓名。这样，我们就需要监听输入框的数据变化，让完整的姓名跟随输入的变动而变化。我们可以使用以下三种方式：
1、结合DOM事件使用mothod来监听数据变化
html代码：使用keyup事件来监听数据的改变。
<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代码：
new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
methods: {
getFullname(){
this.fullname = (this.firstname + ' ' + this.lastname).trim();
return this.fullname;
}
}
});
2、使用watch侦听器
类似methods的使用，我们可以在Vue实例中使用watch来监听表达式数据的变化，并执行对应的回调函数。
html代码：
<div id="app">
<input type="text" v-model="firstname">
<input type="text" v-model="lastname">
<input type="text" v-model="fullname">
</div>
js代码：
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监听器以要监听的数据表达式作为键，值为处理数据变化后的函数。
3、使用计算属性computed
直接看效果：
html代码不变，注意js代码：
new Vue({
el: '#app',
data: {
firstname: '',
lastname: ''
},
computed: {
fullname: function(){
return (this.firstname + ' ' + this.lastname).trim();
}
}
});
首先去掉了data中的fullname属性，取而代之的是computed中的fullname属性。计算属性需要返回一个值作为属性值，且能自动监听内部依赖的变化，自动更新属性值，并对值进行存储，以供多次调用。
4、三者的区别
watch侦听器更像是专门用于监听数据变化的处理方法，但容易造成滥用，而methods一般用于处理业务逻辑，即相同的逻辑可以直接调用。计算属性很直接，将需要的属性进行计算处理后再进行调用。
二、webpack的简单使用
1、静态资源的处理
对于Web项目来说，包含各式各样的静态资源页面，且格式种类繁多，如：
- js
- css
- image
- 模块&组件
静态资源多而杂的时候，页面加载效率就低，且难以处理好资源之间的依赖关系。
所以我们需要对资源进行整合压缩，对于小图片来说还可以使用图片精灵图（image sprite）、转码为Base64字节码等。
而依赖关系除了手动处理我们还可以使用一些工具。
而以上问题我们都可以使用webpack工具进行解决，如文件格式转化、压缩整合等。下面我们将结合Vue来使用webpack。
2、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/
3、加载非js文件
webpack默认只能加载js文件，如果是非js文件则需要使用第三方文件加载模块。
比如我们在main.js导入我们写的一个css文件main.css。
1、首要我们任意规定一个css样式：
li{
list-style-type: none;
}
2、然后需要在
main.js中导入（这是webpack提供的特殊loader模式）：import './main.css'
3、现在我们只需要配置需要的第三方文件加载模块即可
加载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']}
]
}
}
注意：这个加载顺序很重要，如果模块之间存在依赖或顺序关系，则需要保证加载顺序从后往前加载。
类似的文件加载是一样的道理。
更多使用细节请参考官方文档
Vue(day5)的更多相关文章
- vue day5 分页控件 更新 PagedList.mvc 仿
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- vue day5 分页控件
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- vue知识点之day5
vuex是解决多层父子关系传值的问题,减少了传值的复杂度 vue+webpack安装图示
- Vue.js - Day5 - Webpack
在网页中会引用哪些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .css .less .sass .scss Images .jpg ...
- Vue入门到精通
Vue.js - Day1 课程介绍 前5天: 都在学习Vue基本的语法和概念:打包工具 Webpack , Gulp 后5天: 以项目驱动教学: 什么是Vue.js Vue.js 是目前最火的一个前 ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
随机推荐
- Autopep8的使用
什么是Autopep8 在python开发中, 大家都知道,python编码规范是PEP8,但是在市级开发中有的公司严格要求PEP8规范开发, 有的公司不会在乎那些,在我的理解中,程序员如果想走的更高 ...
- HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果
首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...
- windows部署SpiderKeeper(爬虫监控)
最近发现了一个spdierkeeper的库,这个库的主要用途是在于配合这scrpyd管理你的爬虫,支持一键式部署,定时采集任务,启动,暂停等一系列的操作.简单来说将scrapyd的api进行封装,最大 ...
- [Linux]Linux 下的 Docker 安装与使用
一.安装与配置 1.设置阿里云镜像源 sudo yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/cen ...
- I/O-----字符输出流
package io.day04; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.FileR ...
- Ordering犀利的比较器
Ordering是Guava类库提供的一个犀利强大的比较器工具,Guava的Ordering和JDK Comparator相比功能更强.它非常容易扩展,可以轻松构造复杂的comparator,然后用在 ...
- Ceilometer + Aodh + Gnocchi 介绍
一. Ceilometer 1. 概述 Openstack ceilometer主要用于监控虚拟机.服务(glance.image.network等)和事件.虚拟机的监控项主要包括CPU.磁盘 ...
- linux yum命令 使用
yum -y install 包名(支持*) :自动选择y,全自动 yum install 包名(支持*) :手动选择y or n yum remove 包名(不支持*) rpm -ivh 包名(支持 ...
- springboot读取自定义配置文件节点
今天和大家分享的是自定义配置信息的读取:近期有写博客这样的计划,分别交叉来写springboot方面和springcloud方面的文章,因为springboot预计的篇章很多,这样cloud的文章就需 ...
- 我的Python之旅第四天
一 名称空间.作用域.取值顺序 1 名称空间 当程序运行时,代码从上至下依次执行,它会将变量与值得关系存储在一个空间中,这个空间就叫做名称空间,也叫命名空间.全局名称空间. 当程序遇到函数时,他会将函 ...