1,vue.js 研究
1.1 vue.js 介绍
1. vue.js 是什么?
vue是一套用于构建用户界面的渐进式框架。vue 被设计为可以自底向上逐层应用。0
渐进式框架:Progressive,说明vue.js轻量,是指一个前端项目可以使用vue.js一两个特性也可以整个项目都用vue.js
自底向上逐层应用:作为渐进式框架要实现的目标就是方便项目增量开发。
2,Vue.js 与 ECMAScript
Vue 不支持IE8 及一下版本,因为Vue使用了IE8无法模拟的ECMAScript 5特性。
什么是ECMAScript.
3. Vue.js 的使用
1,在html 页面使用script 引入vue.js的库即可使用。
2,使用Npm管理依赖,使用webpack 打包工具对vue.js 应用打包。大型应用推荐此方案
3,Vue-CLl脚手架 使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形。
4,vue.js 有哪些功能
1)声明式渲染
Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统。比如:使用vue.js的插值表达式放在Dom的任意地方,差值表达式的值将被渲染在Dom中。
2)条件与循环
dom中可以使用vue.js提供的v-if、v-for等标签,方便对数据进行判断、循环。
3)双向数据绑定
Vue提供v-model指令,它可以轻松实现Dom元素和数据对象之间双向绑定,即修改Dom元素中的值自动修改绑定的数据对象,修改数据对象的值自动修改Dom元素中的值。
4)处理用户输入为了让用户和你的应用进行交互,我们可以用v-on指令添加一个事件监听器,通过它调用在Vue实例中定义的方法
5)组件化应用构建
vue.js可以定义一个一个的组件,在vue页面中引用组件,这个功能非常适合构建大型应用。
1.2 vue.js 基础
1.2.1 MVVM模式
vue.js是一个MVVM的框架,理解MVVM有利于学习vue.js。
1,MVVM拆分解释为:
1,Model:负责数据存储
2,View:负责页面展示
3,ViewModel:负责业务逻辑处理(比如Ajax请求等),对数据进行加工后交给视图展示
2, MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离,使各自的职责更加清晰,后期代码维护更加简单
3,用图解的形式分析Ajax请求回来数据后直接操作Dom来达到视图的更新的缺点,以及使用MVVM模式是如何来解决这个缺点的
4,Vue中的MVVM
从上图看出,VM(ViewModel)可以把view视图和Model模型解耦合,VM的要做的工作就是vue.js所承担的。
1.2.2 入门程序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue 入门程序</title>
<script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>
</head>
<body>
<div id="app">
{{name}}
</div>
</body>
<script>
//实例化Vue对象
//VM 叫做MVVM中的View Model
var VM = new Vue({
el:'#app',//表示当前vue对象接管app的div区域
data:{
name:"郑继坤自律" //相当于MVVM中的model
}
});
</script>
</html>
入门程序代码编写步骤:
1,定义html,引入vue.js
2,定义app div, 此区域作为vue的接管区域
3,定义vue实例,接管app区域。
4,定义model(数据对象)
5,VM完成在app中的展示
1.2.3 1+1=2
实现效果;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue 1+1=2</title>
<script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>
</head>
<body>
<div id="app">
{{name}}
<input type="text" v-model="num1"/>
<input type="text" v-model="num2"/>
<!-- 转换成int 才可以正常计算 -->
{{Number.parseInt(num1)+Number.parseInt(num2)}}
</div>
</body>
<script>
//实例化Vue对象
//VM 叫做MVVM中的View Model
var VM = new Vue({
el:'#app',//表示当前vue对象接管app的div区域
data:{
name:"郑继坤自律", //相当于MVVM中的model
num1:1, // 定义model
num2:1
}
});
</script>
</html>
1+1=2 例子中运用了v-model
何为双向绑定:
a,由模型数据绑定到Dom对象,模型数据的值改变,Dom对象的值自动改变。
b,由Dom对象绑定到模型数据,Dom对象的值改变,模型数据就改变。
一,v-model
1,在表单控件或者组件上创建双向绑定
2,v-model 仅能在如下元素中使用:
input
select
textarea
components(vue中的组件)
二,但是如果是v-model 在网络慢时,会先展现出表达式model,然后再显示view,v-text 可以解决这个问题。
2,解决插值表达式闪烁问题,使用v-text,将表达式放到v-text 中,注意将{{}} 去掉,它可以解决表达式闪烁的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue v-text</title>
</head>
<body>
<div id="app">
<span v-text="name"></span>
<input type="text" v-model="num1"/>
<input type="text" v-model="num2"/>
<!-- 转换成int 才可以正常计算 -->
<span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>
</div>
</body>
<script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>
<script>
//实例化Vue对象
//VM 叫做MVVM中的View Model
var VM = new Vue({
el:'#app',//表示当前vue对象接管app的div区域
data:{
name:"郑继坤自律", //相当于MVVM中的model
num1:1, // 定义model
num2:1
}
});
</script>
</html>
首先一个前提,如果要引用 定义的model 变量,需要在前面加上this,比如this.num
v-on 监听用户事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue v-on</title>
</head>
<body>
<div id="app">
<span v-text="name"></span>
<input type="text" v-model="num1"/>+
<input type="text" v-model="num2"/>=
<!-- 转换成int 才可以正常计算 -->
<span v-text="result"></span>
<button v-on:click="change">计算</button>
</div>
</body>
<script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>
<script>
//实例化Vue对象
//VM 叫做MVVM中的View Model
var VM = new Vue({
el:'#app',//表示当前vue对象接管app的div区域
data:{
name:"郑继坤自律", //相当于MVVM中的model
num1:1, // 定义model
num2:1,
result:0 //定义计算结果model
},
methods:{
change: function(){
this.result= Number.parseInt(this.num1)+Number.parseInt(this.num2)
}
}
});
</script>
</html>
4, v-bind
作用:
v-bind 可以将数据对象绑定在dom的任意属性中。(将model 绑定到view 中,但不是双向绑定,)
v-bind 可以给dom 对象绑定一个或多个特性,例如动态绑定style和class
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue v-bind</title>
</head>
<body>
<div id="app">
<!-- v-bind 可以给dom对象绑定一个或多个特性,例如动态绑定style和class -->
<a v-bind:href="url" v-bind:style="{fontSize:size+'px'}">传智播客</a>
<div v-bind:style="{fontSize:size+'px'}">JAVAEE培训</div>
<span v-text="name"></span>
<input type="text" v-model="num1"/>+
<input type="text" v-model="num2"/>=
<!-- 转换成int 才可以正常计算 -->
<span v-text="result"></span>
<button v-on:click="change">计算</button>
</div>
</body>
<script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>
<script>
//实例化Vue对象
//VM 叫做MVVM中的View Model
var VM = new Vue({
el:'#app',//表示当前vue对象接管app的div区域
data:{
name:"郑继坤自律", //相当于MVVM中的model
num1:1, // 定义model
num2:1,
result:0, //定义计算结果model
url:"http://www.itcast.cn/",
size:21
},
methods:{
change: function(){
this.result= Number.parseInt(this.num1)+Number.parseInt(this.num2)
}
}
});
</script>
</html>
3,缩写形式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue v-bind</title>
</head>
<body>
<div id="app">
<!-- v-bind 可以给dom对象绑定一个或多个特性,例如动态绑定style和class -->
<a v-bind:href="url" v-bind:style="{fontSize:size+'px'}">传智播客</a>
<div v-bind:style="{fontSize:size+'px'}">JAVAEE培训</div>
<!-- 缩写后 -->
<a :href="url" :style="{fontSize:size+'px'}">传智播客</a>
<div :style="{fontSize:size+'px'}">JAVAEE培训</div>
</div>
</body>
<script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>
<script>
//实例化Vue对象
//VM 叫做MVVM中的View Model
var VM = new Vue({
el:'#app',//表示当前vue对象接管app的div区域
data:{
name:"郑继坤自律", //相当于MVVM中的model
num1:1, // 定义model
num2:1,
result:0, //定义计算结果model
url:"http://www.itcast.cn/",
size:21
},
methods:{
change: function(){
this.result= Number.parseInt(this.num1)+Number.parseInt(this.num2)
}
}
});
</script>
</html>
1.2.4 v-if 和v-for
v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue v-for v-if</title>
</head>
<body>
<div id="app">
<ul>
<!-- 简单数组 -->
<li v-for="(item,index) in list" :key="index" v-if="item % 2 == 0">{{item}}--{{index}}</li>
<!-- map对象 采用key,value-->
<li v-for="(value,key) in user" :key="key">{{key}}--{{value}}</li>
<!-- 数组对象-->
<li v-for="(item,index) in userList" :key="item.user.usrename">{{index}}--{{item}}--{{item.user.usrename}}</li>
</ul>
</div>
</body>
<script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>
<script>
//实例化Vue对象
//VM 叫做MVVM中的View Model
var VM = new Vue({
el:'#app',//表示当前vue对象接管app的div区域
data:{
list:[1,2,3,4,5],
user:{usrename:"张三",age:"12"},
userList:[
{user:{usrename:"张三",age:"12"}},
{user:{usrename:"李四",age:"13"}},
{user:{usrename:"王五",age:"14"}}
]
},
methods:{
}
});
</script>
</html>
v-if v-else
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue v-for v-if</title>
</head>
<body>
<div id="app">
<ul>
<!--
用法:
1,v-for: (x,y) in list , x 指实体,y 指索引值,这个可以随便定义,
2, :key , 是指唯一值,这个时候一般用索引值,但是在遇到复杂类型时,就不能用索引值,需要手动找到每条数据唯一值
-->
<!-- 简单数组 -->
<li v-for="(item,index) in list" :key="index" v-if="item % 2 == 0">{{item}}--{{index}}</li>
<!-- map对象 采用key,value-->
<li v-for="(value,key) in user" :key="key">{{key}}--{{value}}</li>
<!-- 数组对象 :key重新定义了唯一值-->
<li v-for="(item,index) in userList" :key="item.user.usrename">
<div v-if="item.user.usrename == '张三'" style="background-color: brown;">
{{index}}--{{item}}--{{item.user.usrename}}
</div>
<div v-else="item.user.usernanme != '张三'">
{{index}}--{{item}}--{{item.user.usrename}}
</div>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>
<script>
//实例化Vue对象
//VM 叫做MVVM中的View Model
var VM = new Vue({
el:'#app',//表示当前vue对象接管app的div区域
data:{
list:[1,2,3,4,5],
user:{usrename:"张三",age:"12"},
userList:[
{user:{usrename:"张三",age:"12"}},
{user:{usrename:"李四",age:"13"}},
{user:{usrename:"王五",age:"14"}}
]
},
methods:{
}
});
</script>
</html>
1.3 webpack 入门
使用vue.js开发大型应用需要使用webpack打包工具,本节研究webpack的使用方法。
1.3.1 webpack介绍
webpack 是一个前端资源的打包工具,它可以将js.image,css等资源当成一个模块进行打包。
webpack 的缺点
1,配置有些繁琐
2,文档不丰富
1.3.2 安装webpack
1.3.2.1 安装Node.js
webpack 基于node.js运行,首先需要安装node.js
1,下载对应你的系统的Node.js版本,推荐下载LTS版本。
安装好后,在cmd,直接 node -v 出现版本号即可。
1.3.2.2 安装NPM
1,npm 安装
node.js安装完成后,其实npm已经安装完成了,在黑窗口打印npm-v ,即可看到版本。
2,设置包路径
包路径就是npm从远程下载的js包所存放的路径
使用npm config ls 查询NPM管理包路径(NPM下载的依赖包所存放的路径)
NPM 默认的管理包路径 C:/用户/[用户名]/AppData/Roming/npm/node_meodules,为了方便对依赖包管理,我们可以将管理包的路径设置在单独的地方,本教程将安装目录设置在node.js的目录下,在node.js 安装路径下创建npm_modules 和 npm_cache, 执行下边的命令:
本教程安装node.js在D:\Software\NodeJs 下所以执行命令如下:
npm config set prefix "D:\Software\NodeJs\npm_modules"
npm config set cache "D:\Software\NodeJs\npm_cache"
此时再次使用 npm config ls 查询NPM 管理包路径发现路径已更改
3,安装cnpm
npm 默认会去国外的镜像去下载js 包,在开发中通常我们使用国内镜像,这里我们使用淘宝镜像下边我们来安装cnpm:
有时我们使用npm下载资源会很慢或者没网,所以我们可以安装一个cnmp(淘宝镜像) 来加快下载速度,
输入命令,进行全局安装淘宝镜像。
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果没网的话,就使用准备的教程资料,将npm_models.zip
解压后,放到npm 的包下。
安装后,我们可以使用一下命令来查看cnpm的版本。
cnpm -v 查看版本
此时,如果cpnm -v 不可以的话,执行下列方法
https://blog.csdn.net/weixin_41999084/article/details/98036282
用cpnm -v 可以看到
执行 nrm ls 查看镜像,
此时遇到这个问题,执行nrm ls 命令 遇到问题
解决办法:https://www.cnblogs.com/Snowfun/p/14817559.html
上面的办法可能不能解决nrm ls 的问题,可以使用这个包,解压在Nodejs 下面
node_modeules 包下面的文件如图,
这里怎么使用npm install -g cnpm --registry=https://registry.npm.taobao.org 这个命令都报错,无奈,只能使用老师给的资料
链接: https://pan.baidu.com/s/1kA1doI5v8EEHvqHWxlSJvQ 提取码: vu82 复制这段内容后打开百度网盘手机App,操作更方便哦
将这个链接解压到nodeJS 的安装路径中,即可。
小※代表了当前镜像,如何切换镜像。
使用 nrm use XXX切换镜像
如果nrm 没有安装则需要进行全局安装:cnpm install -g nrm
1.3.2.3 安装webpack
1,联网安装
webpack 安装分为全局安装和本地安装
本地安装:仅将webpack安装到当前项目的node_modules 目录下,仅对当前项目有效
全局安装:将webpack安装在本机,对所有项目有效,全局安装会锁定一个webpack版本,该版本可能不适用某个项目,全局安装命令需要添加 -g 参数。
不详细讲解了,解压上面的资料会自动安装完成,如果以后安装,直接搜教程。
1.3.3 入门程序
通过入门程序体会webpack打包的过程及模块化开发的思想
1.3.3.1 需求分析
上面我们通过vue 实现的计算代码,可以通过webpack 进心模块化管理
1.3.3.2 定义模块
在前端项目里随便创建一个文件夹webpacktest01 ,将vue.min.js 及vue_02.html 拷贝到目录下
1. 定义model01.js (里面写的js方法)
在webpacktest01 文件夹里创建model01.js,
将 加法这个程序运算的VM方法抽取到这个model01.js里面,此文件就是一个模块。
model01.js 下内容:
// 定义add函数
function add(x, y) {
return x + y
}
// function add2(x, y) {
// return x + y+1
// }
// 导出add方法
module.exports.add = add;
// module.exports ={add,add2};//如果有多个方法这样导出
// module.exports.add2 = add2//如果有多个方法也可以这样导出
后面的导出add方法,就是这个add方法可以进行导出了,然后启动类里有导入方法,可以将这个文件导入进去
2, 定义main.js (webpack 下该模块的js主文件)
这个文件要做的事情,步骤
1,在此文件中会引用model1.js 文件(被我们抽取出来的VM代码的那个文件)
2,引用vue.min.js(它也是一个模块),vue 的官方 文件。
3,将html页面中构建vue实例的代码放到main.js中
//1,导入js 文件
var {add} = require("./model01");
// 2,导入vue.min.js 官网文件
var Vue = require("./vue.min");
//3, 第三步
var VM = new Vue({
el:'#app',//表示当前vue对象接管app的div区域
data:{
name:"郑继坤自律", //相当于MVVM中的model
num1:1, // 定义model
num2:1,
result:0 //定义计算结果model
},
methods:{
change: function(){
this.result= add(Number.parseInt(this.num1),Number.parseInt(this.num2));
}
}
});
1.3.3.3 打包测试
上边将mode01.js 模块及main.js主文件编写完成,下边使用webpack对这些js文件进行打包
1,进入程序目录,执行 webpack main.js build.js,这段指令表示将main.js打包输出为build.js文件
执行完成,观察程序目录是否出现build.js。
2,在html中引用build.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue v-on</title>
</head>
<body>
<div id="app">
<span v-text="name"></span>
<input type="text" v-model="num1"/>+
<input type="text" v-model="num2"/>=
<!-- 转换成int 才可以正常计算 -->
<span v-text="result"></span>
<button v-on:click="change">计算</button>
</div>
</body>
<script type="text/javascript" src="./build.js" charset="UTF-8"></script>
</html>
3,测试总结
总结:webpack 可以将js分模块开发,开发完成对各个模块代码打包成一个统一的文件。
前端模块开发的思想和服务端模块开发的思想是一致的,有利于多人协作开发。
1.3.4 webpack-dev- server
webpack-dev-server 开发服务器,他的功能可以实现热加载,自动刷新浏览器。
创建一个编写webpack -dev-server 的环境:
创建一个新的程序目录,这里我们创建webpackDevServer目录,将webpack 入门程序的代码拷贝进来(html 页面(静态页面),main.js文件(入口文件),vue.main.js(vue 官方文件), js 文件(写js 方法的),build.js(webpack 生成的)),并在目录下创建src 目录,dist目录。
将main.js 和model01.js拷贝到src目录。
1.3.4.1 安装配置
1,安装webpack-dev-server
使用webpack-dev-server 需要安装webpack,webpack-dev-server 和html-webpack-plugin三个包。
在命令行输入下面命令:
cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev
安装完成,会发现程序目录下出现了一个package.json文件,此文件中记录了程序的依赖。
没有联网的话,执行上面的命令是无效的,可以使用下面的资源包,拷贝node_modules.zip到webpackDevServer 目录下,解压到node_modules目录下。
将资源解压到webpackDevServer 下,是这样的
2,配置webpack-dev-server
在package.json 中配置script(将下列代码复制到package.json)
"scripts": {
"dev": "webpack‐dev‐server ‐‐inline ‐‐hot ‐‐open ‐‐port 5008"
},
--inline: 自动刷新
--hot: 热加载
--port:指定端口
--open:自动在默认浏览器打开
--host:可以指定服务器ip,不指定则为127.0.0.1,如果对外发布则填写公网iP地址。
此时package.json的文件内容如下:
{
"scripts": {
"dev": "webpack-dev-server --inline --hot --open --port 5008"
},
"devDependencies": {
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
devDependencies: 开发任意在开发过程中所需要的依赖。
scripts:可执行的命令。
1.3.4.2 配置webpack.config.js
在webpackDevServer 文件夹下创建webpack.config.js,webpack.config.js是webpack的配置文件。在此文件中可以配置应用的入口文件,输出配置,插件等,其中要实现热加载自动刷新功能需要配置html-webpack-plugin 插件。
html-webpack-plugin 的作用是根据html 模板在内齿生成html 文件,他的工作原理是根据模板文件在内存中生成一个index.html文件。
1,配置模板文件
将原来的vue_04.html作为模板文件,为了和内存中的index.html文件名区别,注意将vue_04.html中的script标签去掉(<script type="text/javascript" src="./build.js" charset="UTF-8"></script>),内容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue v-on</title>
</head>
<body>
<div id="app">
<span v-text="name"></span>
<input type="text" v-model="num1"/>+
<input type="text" v-model="num2"/>=
<!-- 转换成int 才可以正常计算 -->
<span v-text="result"></span>
<button v-on:click="change">计算</button>
</div>
</body>
</html>
2,配置 html-webpack-plugin
在webpack.config.js 配置html-webpack-plugin 插件
var htmlwp = require('html-webpack-plugin');
module.exports={
entry:'./src/main.js',//指定打包的入口文件
output:{
path : __dirname+'/dist',
filename:'build.js'
},
plugins:[
new htmlwp({
title:'首页',//生成的页面标题<head><title>首页</title></head>
filename: 'index.html',//webpack‐dev‐server在内存中生成的文件名称,自动将build注入到这个页面底部,才能实现自动刷新功能
template: 'vue_04.html'
})
]
}
现在webpackDevServer 下已经有了webpack.config.js
1.3.4.3 启动
启动文件两种办法:
1,进入webpackDevServer 目录,在命令行中执行npm run dev
2,使用webstorm,右键package.json 文件,选择 “Show npm Scripts”,
此时启动有个问题,在命令行中执行npm run dev,出现找不到 Error: Cannot find module 'html-webpack-plugin',这次的原因是因为我复制的命令是pdf 里直接粘贴的,所以格式可能有误,将html-webpack-plugin 用手敲出来即可改正错误。
因为 webpack-dev-server 会热加载,自动刷新浏览器,所以,修改src 中的任意文件内容,会自动加载并刷新浏览器。
1.3.4.4 debug 调试
使用了webpack之后就不能采用传统js的调试方法在chrome中打断点。
webpack将多个源文件打包成一个文件,并且文件的内容产生了很大的变化,webpack提供devtool进行调试,
devtool是基于sourcemap的方式,在调试时会生成一个map文件,其内容记录生成文件和源文件的内容映射,即
生成文件中的哪个位置对应源文件中的哪个位置,有了sourcemap就可以在调试时看到源代码。
配置如下:
1、在webpack.config.js中配置:
devtool:'eval‐source‐map',
var htmlwp = require('html-webpack-plugin');
module.exports={
entry:'./src/main.js',//指定打包的入口文件
output:{
path : __dirname+'/dist',
filename:'build.js'
},
devtool:'eval‐source‐map',
plugins:[
new htmlwp({
title:'首页',//生成的页面标题<head><title>首页</title></head>
filename: 'index.html',//webpack‐dev‐server在内存中生成的文件名称,自动将build注入到这个页面底部,才能实现自动刷新功能
template: 'vue_04.html'
})
]
}
2,在js中跟踪代码的位置上添加debugger
一个例子:
在add方法中添加debugger
function add(x,y){
return x+y;
}
function add1(x,y){
debugger
return x+y+1;
}
//导出add方法
//module.exports.add=add;
//多个方法可以这么写
module.exports={add,add1};