VUE
一.ES6语法
VUE基于是ES6的,所以在使用Vue之前我们需要先了解一下ES6的语法。
1.什么是ECMAScript
ECMAScript是浏览器脚本语言的规范,可以狭义理解是javascript的规范。为什么会出现这个规范呢?
1.1.JS发展史
-
1995年,网景工程师Brendan Eich 花了10天时间设计了JavaScript语言。
-
1996年,微软发布了JScript,其实是JavaScript的逆向工程实现。
-
1997年,为了统一各种不同script脚本语言,ECMA(欧洲计算机制造商协会)以JavaScript为基础,制定了ECMAscript标准规范。
1.2.ECMAScript发展历史
-
97年而后,ECMAScript就进入了快速发展期。1998年6月,ECMAScript 2.0 发布。
-
1999年12月,ECMAScript 3.0 发布。这时,ECMAScript 规范本身也相对比较完善和稳定了,但是接下来的事情,就比较悲剧了
-
2007年10月,ECMAScript 4.0 草案发布。这次的新规范,历时颇久,规范的新内容也有了很多争议。在制定ES4的时候,是分成了两个工作组同时工作的。
一边是以 Adobe, Mozilla, Opera 和 Google为主的 ECMAScript 4 工作组。
一边是以 Microsoft 和 Yahoo 为主的 ECMAScript 3.1 工作组。
ECMAScript 4 的很多主张比较激进,改动较大。而 ECMAScript 3.1 则主张小幅更新。最终经过 TC39 的会议,决定将一部分不那么激进的改动保留发布为 ECMAScript 3.1,而ES4的内容,则延续到了后来的ECMAScript5和6版本
-
2009年12月,ECMAScript 5 发布。
-
2011年6月,ECMAScript 5.1 发布。
-
2015年6月,ECMAScript 6,也就是 ECMAScript 2015 发布了。 并且从 ECMAScript 6 开始,开始采用年号来做版本。即 ECMAScript 2015,就是ECMAScript6。
ES6就是javascript用的最多语言规范.被各大浏览器厂商实现了.
2.ES6语法规范
2.1.let & var
都是用来声明变量, let相较于var,他是块级的(局部)。
for(var i == 0 ; i < 10 ; ++){
console.debug(i);
}
console.debug("i="+i); //正常打印
------------------------------------
for(let i == 0 ; i < 10 ; ++){
console.debug(i);
}
console.debug("i="+i); //这里会报错,i会找不到
2.2.const
const声明常量不能修改 , 如同Java的final修饰符
const c = 4;
c = 5; //编译报错,不能修改
2.3.结构表达式
数组赋值
let arr = ["好","大"];
------------------------------------
console.debug(arr[0],arr[1]); //以前的取值
------------------------------------
let [a,b] = arr; //结构表达式数组赋值,定义了变量a,b并按照索引赋值。
console.debug(a,b);
对象赋值
var user = {
id: 1,
username:"zs",
age: 11
}
--------------------------------------
console.debug(user.id,user.username,user.age); //以前的取值
--------------------------------------
var {id,username,age} = user; //结构表达式,对象赋值,按照属性名赋值。
console.debug(id,username,age);
方法参数赋值
var user = {
id: 1,
username:"zs",
age: 11
}
--------------------------------------
function showUser({id,username,age}){ //结构表达式,方法参数赋值,按参数名赋值。
console.debug(id,username,age);
}
showUser(user); //把user对象作为参数传给showUser方法
注意:数组用 [ ] 赋值,对象用 { } 赋值
2.4.箭头函数
var user = {
username:"zs",
age:22,
showUser:function(){ //以前定义方法的方式
console.debug(this.username+" "+this.age);
},
//--------------------------------------
showUser2:()=>{ //es6定义方法的方式
//注意:这里的this指的是window对象了。不能用this.usename
console.debug(user.username+" "+user.age);
},
showUser3(){ //简写
console.debug(user.username+" "+user.age);
}
}
user.showUser();
user.showUser2();
user.showUser3();
2.5.Promise对象
Promise是异步编程的一种解决方案,比传统的解决方案(回调函数+事件)更加合理和强大。 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。过Promise的构造函数来创建Promise对象,并在内部封装一个异步执行的结果。
/**=======================================
Promise 异步请求
=======================================**/
//1.执行异步请求
const p = new Promise((resolve, reject) =>{
//成功,调用 resolve
//失败,调用 reject
// 这里我们用定时任务模拟异步
setTimeout(() => {
const num = Math.random();
// 随机返回成功或失败
if (num < 0.5) {
//2.调用成功的结果回调
resolve("成功!num:" + num)
} else {
//3.调用失败的结果回调
reject("出错了!num:" + num)
}
}, 300)
})
// 调用promise
p.then(function (msg) {
//2.调用成功的结果回调
console.log(msg);
}).catch(function (msg) {
//3.调用失败的结果回调
console.log(msg);
})
2.6.模块化
main.html
main.js
util.js
util.js
export const util = {
sum(a , b){
return a + b;
}
}
-----------------------------或者
const util = {
sum(a , b){
return a + b;
}
}
export const;
-----------------------------批量导出
lef a = 1 ,let b = 2;
export {a,b};
main.js
import {util} from './util.js';
main.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
</head>
<script src="./main.js" type="model"></script>
<script>
alert(util.sum(1,1)); //运行会报错,浏览器不支持,要使用webpack之后才能运行
</script>
<body>
</body>
</html>
运行会报错,浏览器不支持,要使用webpack之后才能运行
2.7.总结
- let
- const
- 结构表达式
- 箭头函数
- Promise
- 模块化
二.前端技术了解
1.前段历史
1.1.静态网页
1990 html
1.2.异步刷新-操作dom
1995 javascprint
1.3.动态网站
Asp/jsp(java),php等,后台臃肿
1.4.Ajax成为主流
异步请求
1.5.Html5
被认为是互联网的核心技术之一。HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。HTML5是Web中核心语言HTML的规范。
2.Nodejs介绍
2.1.介绍
Node.js 的出现吸引了很多前端开发人员开始用 JavaScript 开发服务器代码,其异步编程风格也深受开发人员的喜爱。Node.js 的伟大不仅在于拓展了 JavaScript 在服务器端的无限可能,更重要的是它构建了一个庞大的生态系统。
2010年,NPM作为node.js的包管理系统首次发布,开发人员可以遵循Common.js规范来编写Node.js模块,然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统。
Java | Nodejs |
---|---|
后端服务器开发 | 前段服务器开发 |
Maven管理jar包 | NPM管理JS库 |
SSM架构开发项目 | VUE前段框架 |
随后,在node的基础上,涌现出了一大批的前端框架:Angular(MVC->MVVM),Vue(MVVM)等等
2.2.主流前端框架
前端框架三巨头:
-
Vue.js:vue.js以轻量易用著称
-
React.js:vue.js和React.js发展速度最快, 集web前端与app于一身技术
-
AngularJS:AngularJS还是曾今老大。
三.Nodejs和VUE的安装
vue的安装方式有两种,
- 手动下载VUE的js库,然后在html中导入JS库进行开发
- 通过Npm安装VUE的JS库,然后在html中导入使用
第一种方式我们玩其他JS库的时候一直都在用,我们主要使用Npm来安装VUE
1.Nodejs的安装
NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括Jquery、AngularJS、VueJs都有。为了后面学习方便,我们先安装node及NPM工具.
1.1.安装Nodejs
Nodejs自带npm,安装好Nodejs就安装好了npm
-
NodeJs下载:https://nodejs.org/en/download/
-
安装:双击安装
-
升级:
npm install npm@latest -g
-
测试Node:cmd ->
node -v
-
测试Npm: cmd ->
npm -v
-
淘宝镜像:
npm config set registry https://registry.npm.taobao.org
1.2.cnpm的使用(可用可不用)
淘宝团队做的国内镜像,因为npm的服务器位于国外可能会影响安装。淘宝镜像与官方同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
- 安装:命令提示符执行
npm install cnpm -g --registry=https://registry.npm.taobao.org
- 测试cnpm :
cnpm -v
2.VUE的安装
我们在IDEA中创建一个静态项目,通过Terminal来安装VUE
2.1.IDEA准备
IDEA安装Nodejs插件
IDEA配置Terminal
2.2.Vue安装和使用
VUE官网地址:https://cn.vuejs.org/v2/guide/
使用CDN方式
Vue有两种使用方式,1是使用cdn方式直接引入JS库 ,2.使用Npn安装VUE库,第一种方式如下:
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
当然也可以手动下载该JS库到本地项目,然后引入JS库
使用NPM安装VUE
-
使用Terminal初始化 :
npm init -y
改名了是初始化NPM,会在项目中产生一个package.json文件。
-
安装vue:
全局安装(不推荐):
npm install -g vue
局部安装(推荐) :
npm install vue
安装成功后VUE的JS库:node_modules/vue/dist/vue.js
注意:项目的名称不能使用“vue”,不然会报错
NPM相关命令
查看模块:npm list vue
卸载模块:npm uninstall vue
更新模块:npm update vue
运行工程:npm run dev/test/online
编译工程:npm run build
四.VUE的基本使用
1.VUE介绍
1.1.Vue是什么
Vue (读音 /vjuː/,类似于 ***view*) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
VUE+ElementUI
1.2.Vue的特点
- 轻量
Vue.js库的体积非常小的,并且不依赖其他基础库。
- 数据绑定
对于一些富交互、状态机类似的前端UI界面,数据绑定非常简单、方便。
- 指令
内置指令统一为(v—*),也可以自定义指令,通过对应表达值的变化就可以修改对应的DOM。
- 插件化
Vue.js核心不包含Router、AJAX、表单验证等功能,但是可以非常方便地根据需要加载对应插件。
- 组件化,他支持自定义标签
组件可以扩展 HTML 元素,封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用
1.3.MVVM思想
Vue是一款开源的JavaScript MV*(MVVM、MVC)框架。
Vue 引入了MVVM (Model-View-ViewModel)模式,他不同于MVC架构.
-
M :即Model,模型,包括数据和一些基本操作
-
V :即View,视图,页面渲染结果
-
VM:即View-Model,模型与视图间的双向操作(无需开发人员干涉)
在MVVM之前,开发人员从后端获取需要的数据模型,然后要通过DOM操作Model渲染到View中。而后当用户操作视图,我们还需要通过DOM获取View中的数据,然后同步到Model中。而MVVM中的VM要做的事情就是把DOM操作完全封装起来,开发人员不用再关心Model和View之间是如何互相影响的:
-
只要我们Model发生了改变,View上自然就会表现出来。
-
当用户修改了View,Model中的数据也会跟着改变。
把开发人员从繁琐的DOM操作中解放出来,把关注点放在如何操作Model上.
总结一下:MVVM的思想就是数据模型和视图的双向绑定,只要数据变化,视图会跟着变化,只要视图被修改,数据也会跟者变化。
2.VUE入门
2.1.Hello World程序
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:
创建vue-demo.html,目录结构如下:
vue-demo
node_modules
package.json
package-lock.json
pages
vue-demo.html
vue-demo.html
<script type="application/javascript" src="../node_modules/vue/dist/vue.js"></script>
---------------------------------------------------
<body>
<div id="app">
<!-- 取data中的数据-->
{{ message }}
</div>
</body>
---------------------------------------------------
<script type="application/javascript">
var app = new Vue({
//使用ID绑定vue到页面的元素
el: '#app',
//vue的数据
data: {
message: 'Hello Vue!'
}
})
</script>
Hello Vue!
2.2.VUE的el挂载
每个Vue实例通过el配置挂载的标签,该标签可以通过id或者是class挂载。 实例上的属性和方法只能够在当前实例挂载的标签中使用。
2.3.VUE的数据“data”
<body>
<div id="app">
<!-- 取data中的数据-->
{{ message }}
<hr/>
{{ user }}
<hr/>
{{ user.username }} //取对象中的数据
</div>
</body>
<script type="application/javascript">
var app = new Vue({
//使用ID绑定vue到页面的元素
el: '#app',
//vue的数据
data: {
message: 'Hello Vue!', //普通数据
user:{ //对象数据
username:"zs",
age:11
}
}
})
</script>
注意:{{}}取值不能脱离VUE绑定的元素。
2.4.VUE的方法
所有的方法都在methods属性中定义,方法的调用可以通过在VUE绑定的页面元素中使用{{方法名()}}
的方式,也可以在js中通过VUE对象调用.
<body>
<div id="app">
<!-- 取data中的数据-->
取普通值:{{ message }}
<hr/>
取对象值:{{ user }}
<hr/>
取对象中的属性:{{ user.username }}
<hr/>
调用方法:{{showUser('参数')}}
</div>
</body>
<script type="application/javascript">
var app = new Vue({
//使用ID绑定vue到页面的元素
el: '#app',
//vue的数据 ,所有的数据都在这里绑定
data: {
message: 'Hello Vue!',
user:{
username:"zs",
age:11
}
},
//vue的方法,所有的方法都在这里定义
methods:{
showUser(args){
//这里的 this 代表 Vue对象
console.log(this.user.username);
console.log(this.user.age);
console.log(args);
}
}
})
//调用vue方法
app.showUser('我也是参数');
</script>
3.VUE的表达式
3.1.表达式语法
-
VueJS表达式写在双大括号内:{{ expression }}。
-
VueJS表达式把数据绑定到 HTML。
-
VueJS将在表达式书写的位置"输出"数据。
-
VueJS表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}。
3.2.简单表达式
在{{ }}中可以进行简单的运算.
<div id="app">
<!--简单表达式 -->
<h1>{{num1+num2}}</h1>
<!-- +:运算,字符串连接 -->
<h1>{{5+"v5"}}</h1>
<h1>{{5+"5"}}</h1>
<!-- -:减法 -->
<h1>{{"5"-"5"}}</h1>
<h1>{{5*5}}</h1>
<!-- *:乘 -->
<h1>{{"5"*"5"}}</h1>
<!-- / 除-->
<h1>{{5/5}}</h1>
<h1>{{5/5}}</h1>
</div>
---------------------------------------------------------------------------------------------------
var app = new Vue({
//挂载到id=app元素上
el:"#app",
num1: 10,
num2: 20
});
3.3.三目运算符
在{{}}中的表达式可以使用data中数据 , 可以使用三元运算符,但是不能够使用其他语句
<div id="app">
<!--三目运算 -->
{{ show1?"真":"假"}}
</div>
var app = new Vue({
el : "#app",
data : {
show1 : true
}
});
3.4.字符串操作
-
直接使用字符串字面值作为字符串对象
-
使用data中的字符串对象
<div id="app">
{{"这是字面值"}}<br/>
{{"这是字面值".length}}<br/>
{{message.length}}<br/>
{{message.substring(1,5)}}<br/>
{{message.substring(2,6).toUpperCase()}}<br/>
</div>
var app = new Vue({
el: "#app",
data: {
message: "这是data中的数据"
}
});
3.5.对象操作
在表达式中可以使用data中定义的对象的各种用法.像使用js对象中的方法和属性一样
<div id="app">
{{user}}<br/>
{{JSON.stringify(user)}}<br/>
{{user.toString()}}<br/>
{{user.name}}<br/>
{{user.age}}<br/>
{{user.getAge()}}<br/>
</div>
var user = {
name: "张三",
age: 29,
getAge: function () {
return this.age
},
toString:function(){
return "姓名:"+this.name+",年龄:"+this.age;
}
};
var app = new Vue({
el: "#app",
data: {
user: user
}
});
3.6.数组操作
在表达式中可以使用JavaScript数组中的任何语法来操作数组.
<div id="app">
{{hobbys}}<br/>
{{hobbys[0]}}<br/>
{{hobbys.length}}<br/>
{{hobbys.toString()}}<br/>
{{hobbys.join("------")}}<br/>
</div>
var app = new Vue({
el: "#app",
data: {
hobbys:["打游戏","踢足球",'泡MM',"泡GG"]
}
});
4.VUE的指令
指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.
Ø 作用: 当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
Ø 一个标签元素上可以出现多个指令属性
Ø 指令只能够出现在Vue对象所挂载的标签范围内的标签中
常用指令如下:
v-model=“表达式” 数据双向绑定
v-text=“表达式” 设置标签中的文本
v-html=“表达式” 设置标签中的html
v-if(else else if)=“表达式” 判断条件
v-for=“表达式” 循环
v-on=“表达式” 注册事件
4.1.v-text
- 语法
<标签 v-text="textValue"></标签>
<div id="app">
<span v-text="message"></span><br/>
<span v-text="user.username"></span><br/>
</div>
var app = new Vue({
el: "#app",
data: {
message: "<h1>这是一个Span!</h1>",
user: {
username: "lw"
},
}
});
给元素填充纯文本内容
4.2.v-html
通过data中的数据更新标签标签中的innerHTML属性的值.(标签中的HTML内容)
- 语法
<标签 v-html="htmlValue"></标签>
<div id="app">
<div v-html="message"></div>
</div>
var app = new Vue({
el: "#app",
data: {
message: "<h1>这是HTMl代码</h1>"
}
});
和v-text的区别是v-html会把内容的html符号进行渲染
4.3.v-for
v-for可以作用于:数字,字符串,数组,对象
- 语法一:普通用法
<标签 v-for="每一个元素 in 数据源">{{每一个元素}}</标签>
- 语法二:带索引
<标签 v-for="(元素,索引|键) in 数据源">{{元素}}=={{索引}}</标签>
- 语法三:键,值,索引
<标签 v-for="(元素,键,索引) in 对象"></标签>
<div id="app">
<h1>循环数组</h1>
<ul>
<li v-for="hobby in hobbys">{{hobby}}</li>
</ul>
<h1>遍历对象</h1>
<ul>
<li v-for="value in student">{{value}}</li>
</ul>
<h1>带索引循环数组</h1>
<ul>
<li v-for="(hobby,index) in hobbys">{{index}}--{{hobby}}</li>
</ul>
<h1>带键遍历对象</h1>
<ul>
<li v-for="(value,key,index) in student">{{index+1}}---{{key}}--{{value}}</li>
</ul>
</div>
var app = new Vue({
el: "#app",
data: {
hobbys : ["爬山","游泳","打豆豆","睡觉"],
student : {
name: "小毛",
age: 29,
sex: "男",
},
num : 10,
str : "itsource",
}
});
学生列表案例
<div id="app">
<table >
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr v-for="student in students">
<td>{{student.id}}</td>
<td>{{student.name}}</td>
<td>{{student.age}}</td>
<td>{{student.sex}}</td>
</tr>
</table>
</div>
var app = new Vue({
el: "#app",
data: {
students: [
{id:1,name: "刘备", age: 29, sex: "男"},
{id:2,name: "貂蝉", age: 30, sex: "女"},
{id:3,name: "吕布", age: 31, sex: "男"}
]
}
});
4.4.v-bind
将data中的数据绑定到标签上,作为标签的属性.
- 语法一
<标签 v-bind:标签属性名字="表达式"></标签>
- 语法二:简写
<标签 :标签属性名字="表达式"></标签>
- 语法三:为一个标签绑定一个对象作为该标签的多个属性
<标签 v-bind="对象"></标签>
<div id="app">
<img src="xxx.jpg" />
<img v-bind:src="imgsrc" v-bind:title = "title"/>
<img :src="imgsrc" :title = "title"/>
<input v-bind="props"/>
</div>
var app = new Vue({
el: "#app",
data: {
imgsrc: "./img/1.jpg",
title: "二哈!",
props :{
type: "text",
name: "username",
}
}
});
4.5.v-model 指令(重点)
在表单控件上创建双向绑定,表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中,
当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定
v-model只作用于以下表单: input select textarea
<标签 v-model="表达式"></标签>
<div id="app">
<h1>绑定到type=text的input表单元素</h1>
姓名:<input type="text" v-model="inputValue"><br/>
data中的值:{{inputValue}}
<h1>绑定到type=checkbox的input表单元素</h1>
打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>
踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>
data中的值:{{checkboxValue}}
<h1>绑定到type=radio的input表单元素</h1>
打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>
踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>
data中的值:{{radioValue}}
<h1>绑定到textarea的元素</h1>
个人简介:<textarea v-model="textareaValue"></textarea><br/>
data中的值:{{textareaValue}}
<h1>绑定到单选的select的元素</h1>
技能:<select v-model="skills">
<option value="java">java</option>
<option value="php">php</option>
<option value=".net">.net</option>
</select><br/>
data中的值:{{skills}}
</div>
var app = new Vue({
el: "#app",
data: {
inputValue: "初始化的值",
checkboxValue: ["踢足球"],
radioValue: "打篮球",
textareaValue: "你是一个优秀的软件工程师!",
skills: "java",
}
});
4.6.v-show
根据表达式之真假值,切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。当v-show的值为假时, 会在标签的css中添加 display: none
<标签名 v-show="表达式"></标签名>
4.7.v-if
- 语法一
<标签名 v-if="表达式"> ... </标签名>
<div id="app">
<div v-if="show">你看到我了!</div>
<div v-if="hidden">你看不到我了!</div>
<div v-if="score>=90">优秀</div>
</div>
var app = new Vue({
el: "#app",
data: {
"show":true,
"hidden":true,
"score":90,
}
});
- 语法二
<标签名 v-if="表达式"></标签名>
<标签名 v-else></标签名>
<div id="app">
<div v-if="isVip">欢迎欢迎!!</div>
<div v-else>滚动!!</div>
</div>
var app = new Vue({
el: "#app",
data: {
isVip: true
}
});
- 语法三
<标签名 v-if="表达式"></标签名>
<标签名 v-else-if="表达式"></标签名>
<标签名 v-else-if="表达式"></标签名>
<标签名 v-else></标签名>
<div id="app">
<div v-if="score>=90">优秀!!</div>
<div v-else-if="score>=70">良好!!</div>
<div v-else-if="score>=60">及格!!</div>
<div v-else="score<60">不及格!!</div>
</div>
var app = new Vue({
el: "#app",
data: {
score: 80
}
});
4.8.v-on
使用v-on指令注册事件
<标签 v-on:事件句柄="表达式或者事件处理函数"></标签>
简写方式
<标签 @事件句柄="表达式或者事件处理函数"></标签>
<div id="app">
<h1>结果</h1>
{{num}}
<h1>表达式的写法</h1>
<button v-on:click="num++">按钮</button><br/>
<button @click="num++">按钮</button><br/>
<h1>事件处理函数</h1>
<button v-on:click="myclick">按钮</button><br/>
<button @click="myclick">按钮</button><br/>
</div>
var app = new Vue({
el: "#app",
data: {
num:0
},
methods:{
myclick:function(){
app.num++;
console.log(this);
}
}
});
5.计算属性和watch
5.1.computed
有的时候我们需要在页面进行复杂的计算,复杂的计算导致页面很乱,Vue中提供了计算属性,来替代复杂的表达式:
<div id="app">
<h1>您的生日是:{{birth}} </h1>
</div>
-----------------------------------------------------------------
var vm = new Vue({
el:"#app",
data:{
birthday:1429032123201 // 毫秒值
},
computed:{
birth(){// 计算属性本质是一个方法,但是必须返回结果
const d = new Date(this.birthday);
return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
}
}
})
5.2.watch
watch可以让我们监控一个值的变化。从而做出相应的反应。
<div id="app">
<input type="text" v-model="message">
</div>
-------------------------------------------------------------
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
message:"xxxx"
},
watch:{
message(newVal, oldVal){ //监听 message 的变化,调用该函数。
console.log(newVal, oldVal);
}
}
})
</script>
6.组件component
6.1.什么是组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素标签,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 vue.js 特性进行了扩展的原生 HTML 元素。
简而言之, 组件是用来完成特定功能的一个自定义的HTML标签,组件是对特定功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码. 封装重复利用
6.2.组件的分类
组件分为全局组件和局部组件
-
全局组件:在所有vue实例中(.在它所挂载元素下面有效)有效
-
局部组件:在自己vue实例中(.在它所挂载元素下面有效)有效
6.3.全局组件
全局组件可以在任何被挂着的标签中使用 , 全局组件的配置对象中必须包含template属性
- 定义全局组件语法
Vue.component("自定义标签的名字",{配置对象})
<div id="app">
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>
</div>
<div id="app1">
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>
</div>
-------------------------------------------------------------------------------
//定义第一个全局组件
Vue.component("mycomponent1",{
template : "<h1>这是第一个全局组件</h1>"
})
//定义第二个全局组件
var component2Config = {
template : "<h1>这是第二个全局组件</h1>"
};
Vue.component("mycomponent2",component2Config);
var app = new Vue({
el: "#app",
data: {
}
});
var app1 = new Vue({
el: "#app1",
data: {
}
});
注意事项:template中的html必须在一个标签中. 仅且只能有一个根节点 ,如果该组件的特定功能需要在任何被挂着的标签中使用. 推荐使用全局组件
6.3.局部组件
局部组件只能够在所挂载的标签中使用
- 定义局部组件语法
var app = new Vue({
el: "#app",
data: {},
components : {
"局部组件的名字1" : {组件的配置对象},
"局部组件的名字2" : {组件的配置对象}
}
});
案例
<div id="app1">
<mycomponent></mycomponent>
</div>
<div id="app2">
<mycomponent></mycomponent>
</div>
//1. 在id=app1挂载的实例的components中定义局部组件
var app1 = new Vue({
el: "#app1",
data: {},
components : {
"mycomponent" : {
template : "<h1>这是一个局部组件</h1>"
}
}
});
//2. 在id=app2的标签中是不能够使用上面app2对象的局部组件.
var app2 = new Vue({
el: "#app2",
data: {}
});
- 利用全局组件定义局部组件
<!--使用局部组件-->
<div id="#app">
<innercomponent></innercomponent>
</div>
<!-- 使用全局组件 -->
<div id="#app1">
<outercomponent></outercomponent>
</div>
-------------------------------------------
Vue.component("outercomponent",{
tmeplate:"<h1>哈哈/h1>"
})
new Vue({
el:"#app",
components:{
mycomponent:{
innercomponent:outercomponent //应用全局组件来定义局部组件
}
}
})
new Vue({
el:"#app1",
})
6.4.HTML模板定义组件
在JS定义组件,组件的HTML内容比较多的时候拼接起来比较麻烦,VUE支持把中的HTML片段作为模板来定义组件。
案例:可以使用 定义模板,也可以使用
<div id="app">
<!--使用组件-->
<mycomponent></mycomponent>
</div>
<!--定义模板方式一:<template> -->
<template id="mytemplate1">
<h1>template标签中的html</h1>
</template>
<!--定义模板方式二:<script> -->
<script type="text/template" id="mytemplate2">
<h1>template标签中的html</h1>
</script>
<script type="text/javascript">
var app4 = new Vue({
el:"#app",
components:{
"mycomponent":{
template:"#mytemplate2" //引用模板定义组件
}
}
});
</script>
6.6.组件获取数据
在使用组件的时候往往需要动态填充填充数据,VUE组件要动态获取数据并不是从VUE的Data中取,而是从template中的Data属性获取数据,并且data必须是一个函数,函数返回的数据必须是JSON
<body>
<div id="app">
<mycomponent></mycomponent>
</div>
<template id="mytemplate">
{{name}}:欢迎登陆
</template>
</body>
<script type="text/javascript">
var mytabConfig = {
template:"#mytemplate",
data(){ //组件中的数据从这里找 ,data必须是一个函数,这里用了ES6语法
return {"name1":"xxxx"} //返回的数据必须是JSON
}
}
//定义组件
Vue.component("mycomponent",mytabConfig);
var app = new Vue({
el: "#app",
data: { //组件中的数据会不从这里找
}
});
</script>
上面是全局组件的写法,局部组件也是一样
var app = new Vue({
el: "#app",
data: {
},
components:{
mycomponent:{
template:"#mytemplate",
data(){ //局部组件的数据
return {"name1":"xxxx"} //返回的数据必须是JSON
}
}
}
});
7.路由router
文档地址:https://router.vuejs.org/zh/
7.1.什么是路由
路由是负责将进入的浏览器请求映射到特定的组件代码中(html)。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射,通过一个路径的url地址,可以唯一找到一个资源。路由不包含在vue中,是一个插件,需要单独下载。
7.2.安装vue-router
我们可以采用两种方式来安装vue-router,一是使用CDN 的方式直接引入JS库 https://unpkg.com/vue-router/dist/vue-router.js
而是通过Npm安装。
npm install vue-router
然后在页面导入router的js库
<script type="application/javascript" src="../node_modules/vue-router/dist/vue-router.js"></script>
7.3.vue-router案例
模拟导航菜单,点击菜单切换不同的视图 , 需要考虑如下几个因素
1.定义导航 :一个导航绑定URL
2.定义组件 :一个URL对应一个组件
3.映射路由 :建立URL和组件的关系
4.渲染路由 :组件渲染的位置
<div id="app">
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<!-- 使用app中的路由:匹配到product路由地址,然后在router-view标签中展示这个地址对应的资源 -->
<router-link to="/index">首页</router-link>
<router-link to="/product">公司产品</router-link>
<router-link to="/about">关于我们</router-link>
<hr />
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script>
//>>1.定义首页:组件
var index = Vue.component("index", {
template : "<h1>首页</h1>"
});
//>>2.公司产品:组件
var product = Vue.component("product", {
template : "<h1>公司产品</h1>"
});
//>>3.关于我们:组件
var about = Vue.component("about", {
template : "<h1>关于我们</h1>"
});
//>>4.创建一个路由:
var router = new VueRouter({
routes : [ {
path : "/",//路由地址
component : index
//路由对应的资源
}, {
path : "/about",//路由地址
component : about
//路由对应的资源
}, {
path : "/product",
component : product
}, ]
});
//创建一个vue对象
var app = new Vue({
el : "#app",//挂载在app上
router : router
//使用路由对象
});
</script>
五.VUE的生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程 :创建实例,装载模板,渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数)。每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。主要方法有:beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,Destroyed。还有两个不常用的actived,deactivated。
注意:这里我们重点掌握两个常用的方法即可:create和mounted
1.生命周期方法
1.1.beforeCreate
在实例初始化之后,在数据观测(data observer)和event/watcher事件配置之前被调用,此时data和$el都没有初始化,全部为undefined。
可以在此时加一些loading效果,然后在created移除,可以用在进入请求时间较长的页面,给用户提示,提高用户体验。
1.2.created
在实例创建完成后立即被调用,在这一步,实例已完成以下配置:数据观测(data observer),属性和方法的运算,watch/event事件回调,然而挂载阶段还没开始,$el属性目前不可见。
1.3.beforeMount
在挂载开始之前被调用:相关的render函数首次被调用。此时,data和$el都已经存在,但是DOM为虚拟DOM,仍然没有被加载完。
1.4.mounted
el被新创建的vm. e l 所 替 换 , 并 挂 载 到 实 例 上 去 调 用 该 钩 子 。 这 时 候 可 以 执 行 异 步 请 求 , 请 求 数 据 初 始 化 页 面 。 此 时 d a t a 和 el所替换,并挂载到实例上去调用该钩子。这时候可以执行异步请求,请求数据初始化页面。 此时data和 el所替换,并挂载到实例上去调用该钩子。这时候可以执行异步请求,请求数据初始化页面。此时data和el都已经存在,DOM也已经加载完成,完成挂载。
1.5.beforeUpdate
当data中的数据发生改变时,在变化的数据重新渲染视图之前触发。
1.6.updated
检测到数据发生变化时,变化的数据重新渲染视图之后触发。
1.7.beforeDestroy
实例销毁之前调用,此时实例仍然可用。
1.8.destroyed
实例销毁之后调用,调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器都被移除,所有的子实例也会被销毁。
1.9.activated
keep-alive 组件激活时调用
1.10.deactivated
keep-alive 组件停用时调用
2.create和mounted
created代表在vue实例创建后;我们可以在Vue中定义一个created函数,代表这个时期的构造函数:
<div id="app">
{{hello}}
</div>
-------------------------------------------
var vm = new Vue({
el:"#app",
data:{
hello: '' // hello初始化为空
},
created(){
this.hello = "hello, world! 我出生了!";
},
mounted(){
"vue初始化完成,可以在这里发送AJAX请求加载页面需要的相关数据";
}
})
六.Webpack打包
1.概述
1.1.为什么要打包
-
将许多碎小文件打包成一个整体,减少单页面内的衍生请求次数,提高网站效率。
-
将ES6的高级语法进行转换编译,以兼容老版本的浏览器。
-
将代码打包的同时进行混淆,提高代码的安全性。
1.2.什么是webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
如上图,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。
2.安装webpack
2.1.本地安装
npm install webpack --save-dev //服务
npm install webpack-cli --save-dev //客户端
2.2.全局安装
推荐使用 后面要用
npm install -g webpack
npm install -g webpack-cli
3.执行打包
3.1.准备工作
准备JS : util.js
export const util = {
sum(a , b){
return a + b;
}
}
main.js
import {util} from "./util";
let sum = util.sum(1,2);
alert(sum);
main.html
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
</head>
<!--模块导入-->
<script type="application/javascript" src="../dist/bundle.js" ></script>
<body>
</body>
</html>
3.2.执行打包
把 main.js 及其依赖的js打包成 dist/bundle.js
webpack ./pages/main.js -o dist/bundle.js
4.webpack打包配置
上面我们每次在打包的时候,都要输入 webpack src/a.js -o dist/bundle.js 这个命令,比较麻烦,webpack提供了一个webpack.config.js可以对打包信息进行统一配置,到时候打包的时候,只需要运行webpack 命令就可以进行打包。
4.1.创建 webpack.config.js
//导入路径模块,这个是内置的模块
var path = require("path");
module.exports = {
entry: './src/main.js', //入口js
output: { //输出位置
path: path.resolve(__dirname, './dist'), //打包后的文件输出路径
filename: 'bundle.js' //打包后的js
}
}
4.2.执行打包
运行下面命令,自动根据webpack.config.js配置来打包
webpack
5.打包css
webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。loader 通过在 require() 语句中使用 loadername! 前缀来激活,或者通过 webpack 配置中的正则表达式来自动应用 。
-
vue-loader 转换vue组件 *.vue
-
css-loader 加载css文件
-
babel-loader 加载 ES2015+ 代码,然后使用 Babel 转译为 ES5
如果要打包css需要安装两个loader
- style-loader : 将模块导出为样式,添加到DOM中 - 使用的时候加载样式
- css-loader : 解析css,使用import加载,返回css代码 - 带包的时候的加载css
5.1.安装loader
npm install style-loader --save-dev
npm install css-loader --save-dev
5.2.编写css文件
css/main.css
.color-red{
color:red;
}
5.3.导入main.css
修改main.js , 把css导入到main.js中
//引入css
require('../css/main.css');
import {util} from "./util";
let sum = util.sum(1,2);
//alert(sum);
5.4.页面导入
导入main.js,该JS种已经导入了main.css,下面直接使用main.css中的样式
<!--模块导入-->
<script type="application/javascript" src="../dist/bundle.js" ></script>
<body>
<!-- 测试css打包-->
<div class="color-red">有点红</div>
</body>
5.5.css的打包配置
在webpack.config.js文件引入下面代码
//导入路径模块,这个是内置的模块
var path = require("path");
module.exports = {
entry: './pages/main.js', //入口js
output: { //输出位置
path: path.resolve(__dirname, './dist'), //打包后的文件输出路径
filename: 'bundle.js' //打包后的js
},
module: {
rules: [
{
test: /\.css$/, //匹配文件规则
use: ['style-loader', 'css-loader'] //匹配后使用什么加载器进行模块加载
// webpack use的配置,是从右到左进行加载的
},
]
}
}
5.6.执行打包
webpack
6.webpack服务
刚才的案例中,我们都是本地运行。webpack给我们提供了一个插件,可以帮我们运行一个web服务,并且提供了热部署功能。
6.1.安装插件
npm install webpack-dev-server --save-dev
6.2.配置脚本
在package.json中配置script
"scripts": {
"dev": "webpack-dev-server --inline --progress --config ./webpack.config.js"
}
--inline:自动刷新
--hot:热加载
--port:指定端口
--open:自动在默认浏览器打开
--host:可以指定服务器的 ip,不指定则为127.0.0.1
6.3.启动
npm run dev/test
运行可能会出错,兼容问题,需要修改一下版本
6.4.修改版本
"devDependencies": {
"css-loader": "^3.1.0",
"style-loader": "^0.23.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
},
然后安装该版本的webpack
npm install
再启动
npm run dev
访问:http://localhost:8080/
七.VUE-CLI脚手架
在开发中,需要打包的东西不止是js、css、html。还有更多的东西要处理,这些插件和加载器如果我们一一去添加就会比较麻烦。幸好,vue官方提供了一个快速搭建vue项目的脚手架:vue-cli使用它能快速的构建一个web工程模板。
官网:https://github.com/vuejs/vue-cli
1.安装VUE-CLI
1.1.安装Vue-cli
搭建静态web工程,安装Vue-cli
npm install -g vue-cli
1.2.创建项目结构
vue-cli快速创建webpack项
vue init webpack
下面的输入no,然后回车:
启动项目
npm run dev
2.项目结构
2.1.package.json
2.2.webpack.dev.conf.js
这个js在package.json的scripts中引入,是用来对webpack打包的配置js,其中导入了 webpack.base.conf.js 他是webpack的基础js。
2.3.main.js
main.js作为程序的主要JS,该js中的配置在整个项目中都适用。
main.js如下:
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app', //元素绑定 ,对应了 App.vue中的 <div id="app"/>
router, //路由,对应了 import router from './router'
components: { App }, //定义组件 ,对应了 import App from './App' 其实引入了App.vue
template: '<App/>' //默认使用的组件,会把这个组件展示到页面上
})
2.4.app.vue
这个页面是程序的主页面,所有的其他子页面都将会挂载到这个下面,router-view是组件渲染的位置。
2.5.router/index.js
这里导入了 HelloWorld.vue 页面,我们访问 8080 看到的页面就是这个页面。
2.6.总结一下
- main.Js :程序的主js
- app.vue:程序的vue主页面,其他所有的页面都挂载这个主页面之下
- router/iundex.js :路由,程序的url导航