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 ...
随机推荐
- tkinter简介（一）
Tkinter(也叫 Tk 接口)是 Tk 图形用户界面工具包标准 的 Python 接口.Tk 是一个轻量级的跨平台图形用户界面 (GUI)开发工具. Tk 和 Tkinter 可以运行在大多数 的 ...
- angularJS--apply() 、digest()和watch()方法
外文网址:http://www.sitepoint.com/understanding-angulars-apply-digest/ $apply()和$digest()在AngularJS中是两个核 ...
- selenium获取元素后用click()点击没有作用，用Keys.ENTER就可以成功
selenium获取元素后用click()点击没有作用,用键盘输入enter(Keys.ENTER)就可以成功 #coding = utf-8 from selenium import webdriv ...
- 原生JS和JQuery的区别
1.原生js和jQuery的入口函数加载模式不同 原生js等页面dom加载完成并且图片等资源也加载完成之后才会执行: jQuery则是等页面dom加载完成执行,不会等图片等资源也加载完成: (也就是说 ...
- classpath和filepath
******************************** java中的相对路径和绝对路径 ******************************** 相对路径(其实就是编译后的路径) - ...
- Apache SkyWalking 为.NET Core带来开箱即用的分布式追踪和应用性能监控
在大型网站系统设计中,随着分布式架构,特别是微服务架构的流行,我们将系统解耦成更小的单元,通过不断的添加新的.小的模块或者重用已经有的模块来构建复杂的系统.随着模块的不断增多,一次请求可能会涉及到十几 ...
- SSH(Spring4+Struts2+Hibernate4)框架整合
1.加入Spring4 ①. 加入 jar 包
- ASP.NET中的Cookie对象
1.Cookie对象 Cookie对象一般用于在客户端保存一些针对某个用户的信息. Cookie本质上只是一小段文本字符串,改字符串一般保存在用户计算机特定文件夹下的某个文件中,每个Cookie都保存 ...
- 自学java难吗？一个JAVA学习者应该具备的素质
无论是在校的学生也好,还是转行的也好,如今学JAVA开发的人越来越多,造成了如今新手越来越多,有人说前端饱和了,JAVA饱和了,JAVA才刚开始以一种好的势头发展就饱和了.我也是无语,一般说饱和的人, ...
- Python爬虫实践 -- 记录我的第二只爬虫
1.爬虫基本原理 我们爬取中国电影最受欢迎的影片<红海行动>的相关信息.其实,爬虫获取网页信息和人工获取信息,原理基本是一致的. 人工操作步骤: 1. 获取电影信息的页面 2. 定位(找到 ...