Vue 基础入门笔记（基础）
一、前言：ES6
- ES6 ： ECMAScript第6版标准
- ECMA：欧洲计算机制造商协会（
European Association of computer manufacturers）
1-1、ECMAScript
- 2015年6月，ECMAScript 6，也就是 ECMAScript 2015 发布了。 并且从 ECMAScript 6 开始，开始采用年号来做版本。即 ECMAScript 2015，就是ECMAScript6
- ECMAScript6 的新特性，更多详细介绍请移步：阮一峰的ES6教程
1-2、let 和 const 命令
之前，js定义变量只有一个关键字：var，var有一个问题，就是定义的变量有时会莫名奇妙的成为全局变量。
例如：
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<script>
for(var i = 0; i < 5; i++){
console.log(i);
}
console.log("循环外：" + i)
script>
<body>
body>
html>
let所声明的变量，只在let命令所在的代码块内有效。
我们把刚才的var改成let后执行文件：
const声明的变量是常量，不能被修改；
1-3、字符串扩展
ES6为字符串扩展了几个新的API：
includes()：返回布尔值，表示是否找到了参数字符串。startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
1-4、解构表达式
<!--数组解构-->
<script>
let arr = [1, 2, 3];//定义一个数组
const [x,y,z] = arr;// x，y，z将与arr中的每个位置对应来取值
// 然后打印
console.log(x,y,z);
</script>
<script>
/*对象的解构*/
const person = {//定义一个常量对象
name:"jack",
age:21,
language: ['java','js','css']
}
// 解构表达式获取值
const {name,age,language} = person;
// 打印
console.log(name);
console.log(age);
console.log(language);
</script>
1-5、函数优化
1、函数参数默认值
<script>
function add(a, b = 1) {
return a + b;
}
// 传一个参数
console.log(add(10));
</script>
2、箭头函数（一个参数）
<script>
var print = function (obj) {
console.log(obj);
}
print(123);
// 简写为：
var print2 = obj => console.log(obj);
print2(123);
</script>
3、箭头函数（两个参数）
<script>
// 两个参数的情况：
var sum = function (a , b) {
return a + b;
}
console.log(sum(1,3));
// 简写为：
var sum2 = (a,b) => a+b;
console.log(sum2(2,1));
</script>
代码不止一行，可以用{}括起来
<script>
var sum3 = (a,b) => {
return a + b;
}
console.log(sum3(1,2));
</script>
4、对象的函数属性简写：
<script>
let person = {
name: "jack",
// 以前：
eat: function (food) {
console.log(this.name + "在吃" + food);
},
// 箭头函数版：
eat2: food => console.log(person.name + "在吃" + food),// 这里拿不到this
// 简写版：
eat3(food){
console.log(this.name + "在吃" + food);
}
}
person.eat("汉堡");
person.eat2("薯条");
person.eat3("粥");
</script>
1-6、map和reduce
1、map
map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
<script>
let arr = ['1','20','-5','3'];
console.log(arr)
arr = arr.map(s => parseInt(s));
console.log(arr)
</script>
1、reduce
reduce()：接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：
- 第一个参数是上一次reduce处理的结果
- 第二个参数是数组中要处理的下一个元素
reduce()会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数
<script>
const arr = [1,20,-5,3];
console.log(arr.reduce((a,b) => a+b));/*会执行 1+20-5+3*/
</script>
1-7、promise
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
我们可以通过Promise的构造函数来创建Promise对象，并在内部封装一个异步执行的结果。
语法：
const promise = new Promise(function(resolve, reject) {
// ... 执行异步操作
if (/* 异步操作成功 */){
resolve(value);// 调用resolve，代表Promise将返回成功的结果
} else {
reject(error);// 调用reject，代表Promise会返回失败结果
}
});
这样，在promise中就封装了一段异步执行的结果。
如果我们想要等待异步执行完成，做一些事情，我们可以通过promise的then方法来实现,语法：
promise.then(function(value){
// 异步执行成功后的回调
});
如果想要处理promise异步执行失败的事件，还可以跟上catch：
promise.then(function(value){
// 异步执行成功后的回调
}).catch(function(error){
// 异步执行失败后的回调
})
示例：
<script>
const p = new Promise(function (resolve, reject) {
// 这里我们用定时任务模拟异步
setTimeout(() => {
const num = Math.random();
// 随机返回成功或失败
if (num < 0.5) {
resolve("成功！num:" + num)
} else {
reject("出错了！num:" + num)
}
}, 300)
})
// 调用promise
p.then(function (msg) {
console.log(msg);
}).catch(function (msg) {
console.log(msg);
})
</script>
1-8、set和map
1、set
ES6提供了Set和Map的数据结构。
Set本质与数组类似。不同在于Set中只能保存不同元素，如果元素相同会被忽略。
构造函数:
// Set构造函数可以接收一个数组或空
let set = new Set();
set.add(1);// [1]
// 接收数组
let set2 = new Set([2,3,4,5,5]);// 得到[2,3,4,5]
普通方法：
- set.add(1);// 添加
- set.clear();// 清空
- set.delete(2);// 删除指定元素
- set.has(2); // 判断是否存在
- set.keys();// 返回所有key
- set.values();// 返回所有值
- set.entries();// 返回键值对集合
// 因为set没有键值对，所有其keys、values、entries方法返回值一样的。 - set.size; // 元素个数。是属性，不是方法。
2、map
map，本质是与Object类似的结构。不同在于，Object强制规定key只能是字符串。而Map结构的key可以是任意对象。即：
- object是
- map是
构造函数：
// map接收一个数组，数组中的元素是键值对数组
const map = new Map([
['key1','value1'],
['key2','value2'],
])
// 或者接收一个set
const set = new Set([
['key1','value1'],
['key2','value2'],
])
const map2 = new Map(set)
// 或者其它map
const map3 = new Map(map);
1-9、模块化
模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。
而JS中没有包的概念，换来的是 模块。
模块功能主要由两个命令构成：export和import。
export命令用于规定模块的对外接口，import命令用于导入其他模块提供的功能。
1、export
比如：定义一个 hello.js 文件，里面有一个对象
const util = {
sum(a,b){
return a + b;
}
}
我可以使用export将这个对象导出：
const util = {
sum(a,b){
return a + b;
}
}
export util;
当然，也可以简写为：
export const util = {
sum(a,b){
return a + b;
}
}
export不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。
当要导出多个值时，还可以简写。比如我有一个文件：user.js：
var name = "jack"
var age = 21
export {name,age}
上面的导出代码中，都明确指定了导出的变量名，这样其它人在导入使用时就必须准确写出变量名，否则就会出错。
因此js提供了default关键字，可以对导出的变量名进行省略
例如：
// 无需声明对象的名字
export default {
sum(a,b){
return a + b;
}
}
这样，当使用者导入时，可以任意起名字
2、import
使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。
例如我要使用上面导出的util：
// 导入util
import util from 'hello.js'
// 调用util中的属性
util.sum(1,2)
要批量导入前面导出的name和age：
import {name, age} from 'user.js'
console.log(name + " , 今年"+ age +"岁了")
1-10、对象扩展
ES6给Object拓展了许多新的方法，如：
- keys(obj)：获取对象的所有key形成的数组
- values(obj)：获取对象的所有value形成的数组
- entries(obj)：获取对象的所有key和value形成的二维数组。格式：
[[k1,v1],[k2,v2],...] - assian(dest, …src) ：将多个src对象的值 拷贝到 dest中（浅拷贝）。
1-11、数组扩展
ES6给数组新增了许多方法：
- find(callback)：把数组中的元素逐个传递给函数callback执行，如果返回true，则返回该元素
- findIndex(callback)：与find类似，不过返回的是品牌到的元素的索引
- includes（callback）：与find类似，如果匹配到元素，则返回true，代表找到了。
二、Vue 介绍
1、MVVM模式
- 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上。
Vue 就是一款MVVM模式的框架。
2、Node和NPM
Node.js基于事件循环的异步IO框架
- 基于时间循环的异步IO
- 单线程运行，避免多线程的变量同步问题
- JS可以编写后台diamante，前后台统一编程语言
NPM是Node.js的包管理系统，开发人员可以遵循Common.js规范来编写Node.js模块，然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统。
官网下载Node.js 并安装
安装完成Node应该自带了NPM了，在控制台输入npm -v查看：
npm默认的仓库地址是在国外网站，速度较慢，建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具：nrm
我们首先安装nrm，这里-g代表全局安装npm install nrm -g
然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库：
通过nrm use taobao来指定要使用的镜像源：
然后通过nrm test npm来测试速度：
注意：
- 安装完成请一定要重启下电脑！！！
三、IDEA 安装 Vue
1、官网下载Vue
解压得到 Vue.js
2、使用CDN（不推荐）
可以直接使用公共的CDN服务：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
或者：
<script src="https://cdn.jsdelivr.net/npm/vue">script>
3、npm安装（推荐）
在idea的左下角，有个Terminal按钮，点击打开控制台，进入vue_demo01目录：
先输入：npm init -y 进行初始化
安装Vue，输入命令：npm install vue --save
然后就会在hello-vue目录发现一个node_modules目录，并且在下面有一个vue目录。
node_modules是通过npm安装的所有模块的默认位置。
四、Vue入门案例
在vue_demo01目录新建一个HTML文件 vue01.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
<h2>{{name}} 非常帅h2>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
// 生成一个Vue实例
var app = new Vue({
el: "#app", // el,即element。要渲染的的页面元素
data: { // 数据
name: "Lemon哥"
}
})
script>
body>
html>
打开页面：
分析：
- 首先通过
new Vue()来创建Vue实例 - 然后构造函数接收一个对象，对象中有一些属性：
el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个divdata：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中name：这里我们指定了一个name属性
- 页面中的
h2元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性。
双向绑定
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./node_modules/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="num">
<h2>
{{name}} 非常帅,
有{{num}}位女神为他着迷。
h2>
div>
<script>
// 生成一个Vue实例
var app = new Vue({
el: "#app", // el,即element。要渲染的的页面元素
data: { // 数据
name: "周星驰",
num: 1
}
})
script>
body>
html>
- 我们在data添加了新的属性：
num - 在页面中有一个
input元素，通过v-model与num进行绑定。 - 同时通过
{{num}}在页面输出
事件处理
例如：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./node_modules/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="num">
<input type="button" v-on:click="num++" value="点击">
<h2>{{name}}，非常帅h2>
<h2>有{{num}}个粉丝对他着迷h2>
div>
<script>
var vm = new Vue({
el:"#app",
data:{
name:"周星驰",
num:1
}
})
script>
body>
html>
- 这里用
v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num - 普通click是无法直接操作num的。
五、Vue 实例
1、创建 Vue 实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
var vm = new Vue({
// 选项
})
在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括：
- el
- data
- methods
2、模板或元素
每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。
我们可以通过el属性来指定。
例如一段html模板：
<div id="app">
div>
然后创建Vue实例，关联这个div
var vm = new Vue({
el:"#app"
})
这样，Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。
3、数据
当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。
html：
<div id="app">
<input type="text" v-model="name"/>
div>
js:
var vm = new Vue({
el:"#app",
data:{
name:"刘德华"
}
})
- name的变化会影响到
input的值 - input中输入的值，也会导致vm中的name发生改变
4、方法
Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue的作用范围内使用。
html:
<div id="app">
{{num}}
<button v-on:click="add">加button>
div>
js:
var vm = new Vue({
el:"#app",
data:{
num: 0
},
methods:{
add:function(){
// this代表的当前vue实例
this.num++;
}
}
})
5、生命周期钩子
5-1、生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。
生命周期：
5-2、钩子函数
例如：created代表在vue实例创建后；
我们可以在Vue中定义一个created函数，代表这个时期的构造函数：
html:
<div id="app">
{{hello}}
div>
js:
var vm = new Vue({
el:"#app",
data:{
hello: '' // hello初始化为空
},
created(){
this.hello = "hello, world！ 我出生了！";
}
})
结果：
5-3、this
我们可以看下在vue内部的this变量是谁，我们在created的时候，打印this
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./node_modules/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<h2>{{hello}}h2>
div>
<script>
var vm = new Vue({
el: "#app",
data: {
hello: '' // hello初始化为空
},
created() {
this.hello = "hello, world！ 我出生了！";
console.log(this);
}
})
script>
body>
html>
查看控制台：
六、Vue 指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
例如我们在入门案例中的v-on，代表绑定事件。
1、差值表达式
1-1、花括号
格式：
{{表达式}}
说明：
- 该表达式支持JS语法，可以调用js内置函数（必须有返回值）
- 表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;
- 可以直接获取Vue实例中定义的数据或函数
示例：
HTML：
<div id="app">{{name}}div>
JS:
var app = new Vue({
el:"#app",
data:{
name:"Jack"
}
})
1-2、差值闪烁
使用{{ }}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{ }}，加载完毕后才显示正确数据，我们称为插值闪烁。
我们将网速调慢一些，然后试试看刚才的案例：
1-3、v-text 和 v-html
使用v-text和v-html指令来替代{{}}
说明：
- v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
- v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
示例：
HTML:
<div id="app">
v-text:<span v-text="hello">span> <br/>
v-html:<span v-html="hello">span>
div>
JS:
var vm = new Vue({
el:"#app",
data:{
hello: "大家好，我是虎哥
"
}
})
效果：
2、v-model
v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。但是v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。
既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：
- input
- select
- textarea
- checkbox
- radio
- components（Vue中的自定义组件）
基本上除了最后一项，其它都是表单的输入项。
举例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./node_modules/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<input type="checkbox" v-model="language" value="Java" />Java<br/>
<input type="checkbox" v-model="language" value="PHP" />PHP<br/>
<input type="checkbox" v-model="language" value="Swift" />Swift<br/>
<h1>
你选择了：{{language.join(',')}}
h1>
div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
language: []
}
})
script>
body>
html>
- 多个
CheckBox对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型 - radio对应的值是input的value值
input和textarea默认对应的model是字符串select单选对应字符串，多选对应也是数组
自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：
<input v-model="searchText">
等价于：
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>
3、v-on
3-1、基本用法
v-on指令用于给页面元素绑定事件。
语法：
v-on:事件名="js片段或函数名"
示例：
<div id="app">
<button v-on:click="num++">增加button><br/>
<button v-on:click="decrement">减少button><br/>
<h1>num: {{num}}h1>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
decrement(){
this.num--;
}
}
})
script>
效果：
另外，事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'
3-2、事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
.stop：阻止事件冒泡.prevent：阻止默认事件发生.capture：使用事件捕获模式.self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）.once：只执行一次
3-3、按钮修饰符
在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
<input v-on:keyup.enter="submit">
<input @keyup.enter="submit">
全部的按键别名：
.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right
3-4、组合按钮
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl.alt.shift
例如：
<input @keyup.alt.67="clear">
<div @click.ctrl="doSomething">Do somethingdiv>
4、v-for
遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。
4-1、遍历数组
语法：
v-for="item in items"
- items：要遍历的数组，需要在vue的data中定义好。
- item：迭代得到的数组元素的别名
示例
<div id="app">
<ul>
<li v-for="user in users">
{{user.name}} : {{user.gender}} : {{user.age}}
li>
ul>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
users:[
{name:'柳岩', gender:'女', age: 21},
{name:'虎哥', gender:'男', age: 30},
{name:'范冰冰', gender:'女', age: 24},
{name:'刘亦菲', gender:'女', age: 18},
{name:'古力娜扎', gender:'女', age: 25}
]
}
})
script>
效果：
4-2、数组角标
在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：
语法：
v-for="(item,index) in items"
- items：要迭代的数组
- item：迭代得到的数组元素别名
- index：迭代到的当前元素索引，从0开始。
示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./node_modules/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<ul>
<li v-for="(user,index) in users">
{{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
li>
ul>
div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
users:[
{name:'柳岩', gender:'女', age: 21},
{name:'虎哥', gender:'男', age: 30},
{name:'范冰冰', gender:'女', age: 24},
{name:'刘亦菲', gender:'女', age: 18},
{name:'古力娜扎', gender:'女', age: 25}
]
}
})
script>
body>
html>
效果：
4-3、遍历对象
v-for除了可以迭代数组，也可以迭代对象。语法基本类似
语法：
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
- 1个参数时，得到的是对象的值
- 2个参数时，第一个是值，第二个是键
- 3个参数时，第三个是索引，从0开始
示例：
<div id="app">
<ul>
<li v-for="(value,key,index) in user">
{{index}} - {{key}} : {{value}}
li>
ul>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
user:{name:'柳岩', gender:'女', age: 21}
}
})
script>
效果：
4-4、key
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
这个功能可以有效的提高渲染的效率。
但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。
示例：
<ul>
<li v-for="(item,index) in items" :key=index>li>
ul>
- 这里使用了一个特殊语法：
:key=""，它可以让你读取vue中的属性，并赋值给key属性 - 这里我们绑定的key是数组的索引，应该是唯一的
5、v-if 和 v-show
5-1、基本用法
v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
语法：
v-if="布尔表达式"
示例：
<div id="app">
<button v-on:click="show = !show">点击切换button><br/>
<h1 v-if="show">
你好
h1>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
show:true
}
})
script>
效果：
5-2、与 v-for 结合
当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。
示例：
<div id="app">
<ul>
<li v-for="(user,index) in users" v-if="user.gender === '女'">
{{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
li>
ul>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
users:[
{name:'柳岩', gender:'女', age: 21},
{name:'虎哥', gender:'男', age: 30},
{name:'范冰冰', gender:'女', age: 24},
{name:'刘亦菲', gender:'女', age: 18},
{name:'古力娜扎', gender:'女', age: 25}
]
}
})
script>
效果：
5-3、v-else
你可以使用 v-else 指令来表示 v-if 的“else 块”：
<div v-if="Math.random() > 0.5">
Now you see me
div>
<div v-else>
Now you don't
div>
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
<div v-if="type === 'A'">
A
div>
<div v-else-if="type === 'B'">
B
div>
<div v-else-if="type === 'C'">
C
div>
<div v-else>
Not A/B/C
div>
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
5-4、v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
Hello!
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
示例：
<div id="app">
<button v-on:click="show = !show">点击切换button><br/>
<h1 v-if="show">
你好
h1>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
show:true
}
})
script>
效果：
6、v-bind
6-1、绑定 class 样式
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./node_modules/vue/dist/vue.js">script>
<style>
.a {
color: red;
}
.b {
background-color: aqua;
}
style>
head>
<body>
<div id="app">
<h1 v-bind:class="a">你好h1>
<h1 v-bind:class="b">你好h1>
<h1 v-bind:class="arr">你好h1>
<h1 :class="arr">你好h1>
div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
arr:['a','b'],
a : 'a',
b : 'b'
}
})
script>
body>
html>
6-2、简写
v-bind:class可以简写为:class
7、计算属性
在插值表达式中使用js表达式是非常方便的，而且也经常被用到。
但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，但是是毫秒值：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./node_modules/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<h1>您的生日是：{{
new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()
}}
h1>
div>
<script>
var v = new Vue({
el:"#app",
data:{
birthday:1529032123201 // 毫秒值
}
})
script>
body>
html>
虽然能得到结果，但是非常麻烦。
Vue中提供了计算属性，来替代复杂的表达式：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./node_modules/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<h1>您的生日是：{{birth}} h1>
div>
<script>
var vm = new Vue({
el: "#app",
data: {
birthday: 1429032123201 // 毫秒值
},
computed: {
birth() {// 计算属性本质是一个方法，但是必须返回结果
const d = new Date(this.birthday);
return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
}
}
})
script>
body>
html>
8、watch
watch可以让我们监控一个值的变化。从而做出相应的反应。
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./node_modules/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<input type="text" v-model="message">
div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
message: ""
},
watch: {
message(newVal, oldVal) {
console.log(newVal, oldVal);
}
}
})
script>
body>
html>
七、Vue 组件化
在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。
但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。
1、定义全局组件
我们通过Vue的component方法来定义一个全局组件。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./node_modules/vue/dist/vue.js">script>
head>
<body>
<div id="app">
<counter>counter>
div>
<script type="text/javascript">
// 定义全局组件，两个参数：1，组件名称。2，组件参数
Vue.component("counter", {
template: '',
data() {
return {
count: 0
}
}
})
var app = new Vue({
el: "#app"
})
script>
body>
html>
- 组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
- 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
- 但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
- 全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
- data的定义方式比较特殊，必须是一个函数。
效果：
2、局部注册
一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。
因此，对于一些并不频繁使用的组件，我们会采用局部注册。
我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：
const counter = {
template:'',
data(){
return {
count:0
}
}
};
然后在Vue中使用它：
var app = new Vue({
el:"#app",
components:{
counter:counter // 将定义的对象注册为组件
}
})
- components就是当前vue对象子组件集合。
- 其key就是子组件名称
- 其值就是组件对象的属性
- 效果与刚才的全局注册是类似的，不同的是，这个counter组件只能在当前的Vue实例中使用
3、组件通信
通常一个单页应用会以一棵嵌套的组件树的形式来组织：
- 页面首先分成了顶部导航、左侧内容区、右侧边栏三部分
- 左侧内容区又分为上下两个组件
- 右侧边栏中又包含了3个子组件
各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。
3-1、父向子传递 props
比如我们有一个子组件：
Vue.component("introduce",{
// 直接使用props接收到的属性来渲染页面
template:'{{title}}
',
props:[title] // 通过props来接收一个父组件传递的属性
})
- 这个子组件中要使用title属性渲染页面，但是自己并没有title属性
- 通过props来接收父组件属性，名为title
父组件使用子组件，同时传递title属性：
<div id="app">
<h1>打个招呼：h1>
<introduce title="大家好，我是虎哥"/>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
Vue.component("introduce",{
// 直接使用props接收到的属性来渲染页面
template:'{{title}}
',
props:['title'] // 通过props来接收一个父组件传递的属性
})
var app = new Vue({
el:"#app"
})
script>
3-2、传递复杂数据
我们定义一个子组件：
const myList = {
template:'\
\
- {{item.id}} : {{item.name}}
\
\
',
props:{ // 通过props来接收父组件传递来的属性
items:{// 这里定义items属性
type:Array,// 要求必须是Array类型
default:[] // 如果父组件没有传，那么给定默认值是[]
}
}
}
- 这个子组件可以对 items 进行迭代，并输出到页面。
- 但是组件中并未定义items属性。
- 通过props来定义需要从父组件中接收的属性
- items：是要接收的属性名称
- type：限定父组件传递来的必须是数组，否则报错
- default：默认值
- items：是要接收的属性名称
我们在父组件中使用它：
<div id="app">
<h2>已开设如下课程：h2>
<my-list :items="lessons"/>
div>
var app = new Vue({
el:"#app",
components:{
myList // 当key和value一样时，可以只写一个
},
data:{
lessons:[
{id:1, name: 'java'},
{id:2, name: 'php'},
{id:3, name: 'ios'},
]
}
})
3-3、子向父的通信
来看这样的一个案例：
<div id="app">
<h2>num: {{num}}h2>
<counter :num="num">counter>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
Vue.component("counter", {// 子组件，定义了两个按钮，点击数字num会加或减
template:'\
\
\
\
',
props:['num']// count是从父组件获取的。
})
var app = new Vue({
el:"#app",
data:{
num:0
}
})
script>
- 子组件接收父组件的num属性
- 子组件定义点击按钮，点击后对num进行加或减操作
子组件接收到父组件属性后，默认是不允许修改的。怎么办？
既然只有父组件能修改，那么加和减的操作一定是放在父组件：
var app = new Vue({
el:"#app",
data:{
num:0
},
methods:{ // 父组件中定义操作num的方法
increment(){
this.num++;
},
decrement(){
this.num--;
}
}
})
但是，点击按钮是在子组件中，那就是说需要子组件来调用父组件的函数，怎么做？
我们可以通过v-on指令将父组件的函数绑定到子组件上：
<div id="app">
<h2>num: {{num}}h2>
<counter :count="num" @inc="increment" @dec="decrement">counter>
div>
然后，当子组件中按钮被点击时，调用绑定的函数：
Vue.component("counter", {
template:'\
\
\
\
',
props:['count'],
methods:{
plus(){
this.$emit("inc");
},
reduce(){
this.$emit("dec");
}
}
})
- vue提供了一个内置的this.$emit函数，用来调用父组件绑定的函数
八、路由 vue-router
1、vue-router简介和安装
使用npm安装：npm install vue-router --save
在index.html中引入依赖：
<script src="../node_modules/vue-router/dist/vue-router.js">script>
2、入门实例
1、编写父组件 index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="../node_modules/vue/dist/vue.js">script>
<script src="../node_modules/vue-router/dist/vue-router.js">script>
head>
<body>
<div id="app">
<span>登录span>
<span>注册span>
<hr/>
<div>
登录页/注册页
div>
div>
<script type="text/javascript">
var vm = new Vue({
el:"#app"
})
script>
body>
html>
2、编写登录组件 js/login.js
const loginForm = {
template:'\
\
登录页
\
用户名：
\
密码：
\
\
'
}
3、编写注册组件 js/register.js
const registerForm = {
template:'\
\
注册页
\
用户名：
\
密码：
\
确认密码：
\
\
'
}
4、修改父组件 index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="../node_modules/vue/dist/vue.js">script>
<script src="../node_modules/vue-router/dist/vue-router.js">script>
<script src="js/login.js">script>
<script src="js/register.js">script>
head>
<body>
<div id="app">
<span>登录span>
<span>注册span>
<hr/>
<div>
<login-form>login-form>
<register-form>register-form>
div>
div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
components:{// 引用登录和注册组件
loginForm,
registerForm
}
})
script>
body>
html>
5、再次修改父组件 index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页title>
<script src="../node_modules/vue/dist/vue.js">script>
<script src="../node_modules/vue-router/dist/vue-router.js">script>
<script src="js/login.js">script>
<script src="js/register.js">script>
head>
<body>
<div id="app">
<span><router-link to="/login">登录router-link>span>
<span><router-link to="/register">注册router-link>span>
<hr/>
<div>
<router-view>router-view>
div>
div>
<script type="text/javascript">
// 创建VueRouter对象
const router = new VueRouter({
routes:[ // 编写多个路由规则
{
path:"/login", // 请求路径
component:loginForm // 组件名称
},
{path:"/register",component:registerForm},
]
})
var vm = new Vue({
el:"#app",
components:{// 引用登录和注册组件
loginForm,
registerForm
},
router:router // 引用上面定义的router对象
})
script>
body>
html>
-
创建VueRouter对象，并指定路由参数
-
routes：路由规则的数组，可以指定多个对象，每个对象是一条路由规则，包含以下属性：
- path：路由的路径
- component：组件名称
-
通过
-
通过
注意：单页应用中，页面的切换并不是页面的跳转。仅仅是地址最后的hash值变化。
事实上，总共就一个HTML：index.html
九、webpack
1、webpack 概述
Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。
为什么需要打包？
- 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
- 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
- 将代码打包的同时进行混淆，提高代码的安全性。
2、webpack 四个核心概念
-
入口(entry)
webpack打包的启点，可以有一个或多个，一般是js文件。webpack会从启点文件开始，寻找启点直接或间接依赖的其它所有的依赖，包括JS、CSS、图片资源等，作为将来打包的原始数据
-
输出(output)
出口一般包含两个属性：path和filename。用来告诉webpack打包的目标文件夹，以及文件的名称。目的地也可以有多个。
-
加载器（loader）
webpack本身只识别Js文件，如果要加载非JS文件，必须指定一些额外的加载器（loader），例如css-loader。然后将这些文件转为webpack能处理的有效模块，最后利用webpack的打包能力去处理。
-
插件(plugins)
插件可以扩展webpack的功能，让webpack不仅仅是完成打包，甚至各种更复杂的功能，或者是对打包功能进行优化、压缩，提高效率。
3、webpack 本地安装
输入命令：npm install webpack webpack-cli --save-dev
此时，我们注意下项目中文件夹下，会有一个package.json文件。（其实早就有了）打开文件，可以看到我们之前用npm安装过的文件都会出现在这里：
4、编写webpack配置
接下来，我们编写一个webpack的配置，来指定一些打包的配置项。配置文件的名称，默认就是webpack.config.js，我们放到vue-demo01的根目录：
配置文件中就是要指定上面说的四个核心概念，入口、出口、加载器、插件。
不过，加载器和插件是可选的。我们先编写入口和出口
4-1、入口entry
webpack打包的启点，可以有一个或多个，一般是js文件。现在思考一下我们有没有一个入口？貌似没有，我们所有的东西都集中在index.html，不是一个js，那怎么办？
我们新建一个js，把index.html中的部分内容进行集中，然后在index.html中引用这个main.js不就OK了！
然后把原来index.html中的js代码全部移动到main.js中
// 使用es6的语法导入js模块
import Vue from '../node_modules/vue/dist/vue';
import VueRouter from '../node_modules/vue-router/dist/vue-router'
import loginForm from './js/login'
import registerForm from './js/register'
Vue.use(VueRouter)
// 创建VueRouter对象
const router = new VueRouter({
routes:[ // 编写多个路由规则
{
path:"/login", // 请求路径
component:loginForm // 组件名称
},
{path:"/register",component:registerForm},
]
})
var vm = new Vue({
el:"#app",
components:{// 引用登录和注册组件
loginForm,
registerForm
},
router
})
-
原来的index.html中引入了很多其它js，在这里我们使用es6的import语法进行导入。
注意，要使用import，就需要在login.js和register.js中添加export导出语句：
const loginForm = {
template:`
登录页
用户名：
密码：
`
}
export default loginForm;
register.js:
const registerForm = {
template:`
注册页
用户名：
密码：
确认密码：
`
}
export default registerForm;
- vue-router使用模块话加载后，必须增加一句：Vue.use(VueRouter)
这样，main.js就成了我们整个配置的入口了。
我们在webpack.config.js中添加以下内容：
module.exports={
entry:'./src/main.js', //指定打包的入口文件
}
4-2、出口output
出口，就是输出的目的地。一般我们会用一个dist目录，作为打包输出的文件夹：
然后，编写webpack.config.js，添加出口配置：
module.exports={
entry:'./src/main.js', //指定打包的入口文件
output:{
// path: 输出的目录，__dirname是相对于webpack.config.js配置文件的绝对路径
path : __dirname+'/dist',
filename:'build.js' //输出的js文件名
}
}
4-3、执行打包
在控制台输入以下命令：
npx webpack --config webpack.config.js