VUE
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
<html>
<head>
<title>Titletitle>
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">
{{ 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">
取普通值：{{ 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" />
![]()
![]()
<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">javaoption>
<option value="php">phpoption>
<option value=".net">.netoption>
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="表达式"> ... 标签名>
你看到我了!
你看不到我了!
优秀
var app = new Vue({
el: "#app",
data: {
"show":true,
"hidden":true,
"score":90,
}
});
- 语法二
<标签名 v-if="表达式">标签名>
<标签名 v-else>标签名>
欢迎欢迎!!
滚动!!
var app = new Vue({
el: "#app",
data: {
isVip: true
}
});
- 语法三
<标签名 v-if="表达式">标签名>
<标签名 v-else-if="表达式">标签名>
<标签名 v-else-if="表达式">标签名>
<标签名 v-else>标签名>
优秀!!
良好!!
及格!!
不及格!!
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>"
})
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 id="mytemplate1">
<h1>template标签中的htmlh1>
template>
<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="/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 : "首页
"
});
//>>2.公司产品：组件
var product = Vue.component("product", {
template : "公司产品
"
});
//>>3.关于我们：组件
var about = Vue.component("about", {
template : "关于我们
"
});
//>>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>Titletitle>
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>
<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中的
router, //路由，对应了 import router from './router'
components: { App }, //定义组件 ，对应了 import App from './App' 其实引入了App.vue
template: '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导航