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 ...
随机推荐
- jmeter使用csv进行参数化（一）
先录制一个脚本,具体录制可以参考笔者的随笔:http://www.cnblogs.com/wuyazi/p/8889770.html 1.准备参数化文本内容:mac没有自带的txt文本编辑器,笔者是在 ...
- BZOJ_4554_[Tjoi2016&Heoi2016]游戏_二分图匹配
BZOJ_4554_[Tjoi2016&Heoi2016]游戏_二分图匹配 Description 在2016年,佳缘姐姐喜欢上了一款游戏,叫做泡泡堂.简单的说,这个游戏就是在一张地图上放上若 ...
- Nginx隐藏index.php和配置vhost
nginx启动命令 启动:nginx停止:nginx -s stop退出:nginx -s quit重启:nginx -s reopen重新加载:nginx -s reload平滑启动:kill -H ...
- 蚂蚁通讯框架SOFABolt之私有通讯协议设计
前言 SOFABolt 是蚂蚁金融服务集团开发的一套基于 Netty 实现的网络通信框架. 为了让 Java 程序员能将更多的精力放在基于网络通信的业务逻辑实现上,而不是过多的纠结于网络底层 NIO ...
- 死磕 java集合之ConcurrentSkipListSet源码分析——Set大汇总
问题 (1)ConcurrentSkipListSet的底层是ConcurrentSkipListMap吗? (2)ConcurrentSkipListSet是线程安全的吗? (3)Concurren ...
- Google 的 QUIC 华丽转身成为下一代网络协议： HTTP/3.0
HTTP/2.0 还没有普及,HTTP/3.0 标准就要被制定了. 据 IETF 透露,HTTP-over-QUIC 实验协议将被重命名为 HTTP/3,并成为 HTTP 协议的第三个正式版本. IE ...
- 一段简单的显示当前页面FPS的代码
写前端代码,尤其是做一个前端框架的时候,经常需要及时知道代码的大致性能,这时候如果能有个好的办法能一直看到当前页面的fps就好了. 整体思路是一秒有一千毫秒,先记录当前时间作为最后一次记录fps的时间 ...
- Java并发编程面试题 Top 50 整理版
本文在 Java线程面试题 Top 50的基础上,对部分答案进行进行了整理和补充,问题答案主要来自<Java编程思想(第四版)>,<Java并发编程实战>和一些优秀的博客,当然 ...
- java基础(八)-----深入解析java四种访问权限
Java中的访问权限理解起来不难,但完全掌握却不容易,特别是4种访问权限并不是任何时候都可以使用.下面整理一下,在什么情况下,有哪些访问权限可以允许选择. 一.访问权限简介 访问权限控制: 指的是本类 ...
- SQL 横转竖 、竖专横（转载） 列转行 行转列
普通行列转换 问题:假设有张学生成绩表(tb)如下: 姓名 课程 分数 张三 语文 张三 数学 张三 物理 李四 语文 李四 数学 李四 物理 想变成(得到如下结果): 姓名 语文 数学 物理 --- ...