官网：https://cn.vuejs.org/index.html
1.1Vue的简单概述
1.1.1、介绍:
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
1.1.2、优点：
-
体积小
-
压缩后只有33k
-
-
更高的运行效率
-
基于虚拟dom,一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。
-
-
双向数据绑定
-
开发者可以将中心投入到业务层，将业务更加的完善
-
-
生态丰富，易上手
-
市场上拥有大量成熟、稳定的基于vue.js的ui框架、常用组件，拿来即用实现快速开发!
-
对初学者友好、入门容易、学习资料多;
-
1.2、MVVM模式
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处
-
低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
-
可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
-
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计。
-
可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写。
（1）View
View是视图层， 也就是用户界面。前端主要由HTH L和csS来构建， 为了更方便地展现vi eu to del或者Hodel层的数据， 已经产生了各种各样的前后端模板语言， 比如FreeMarker，Thyme leaf等等， 各大MV VM框架如Vue.js.Angular JS， EJS等也都有自己用来构建用户界面的内置模板语言。
（2）Model
Model是指数据模型， 泛指后端进行的各种业务逻辑处理和数据操控， 主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则
（3）ViewModel
ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层， 前端开发者对从后端获取的Model数据进行转换处理， 做二次封装， 以生成符合View层使用预期的视图数据模型。 需要注意的是View Model所封装出来的数据模型包括视图的状态和行为两部分， 而Model层的数据模型是只包含状态的
-
比如页面的这一块展示什么，那一块展示什么这些都属于视图状态(展示)
-
页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为(交互)
视图状态和行为都封装在了View Model里。这样的封装使得View Model可以完整地去描述View层。由于实现了双向绑定， View Model的内容会实时展现在View层， 这是激动人心的， 因为前端开发者再也不必低效又麻烦地通过操纵DOM去更新视图。 MVVM框架已经把最脏最累的一块做好了， 我们开发者只需要处理和维护View Model， 更新数据视图就会自动得到相应更新，真正实现事件驱动编程。 View层展现的不是Model层的数据， 而是ViewModel的数据， 由ViewModel负责与Model层交互， 这就完全解耦了View层和Model层， 这个解耦是至关重要的， 它是前后端分离方案实施的重要一环。
1.3、安装和部署Vue.JS
1.3.1、通过CDN引入vue的全局变量
-
直接下载并用
<script>标签引入（像引入JavaScript一样直接引入），Vue会被注册为一个全局变量。
1.3.2、通过CDN引入vue的全局变量
-
对于制作原型或学习，你可以这样使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
-
对于生产环境，推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
-
原生 ES Modules，通过兼容 ES Module 的构建文件：
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'
</script>
请确认了解不同构建版本并在你发布的站点中使用生产环境版本，把 vue.js 换成 vue.min.js。这是一个更小的构建，可以带来比开发环境下更快的速度体验。
1.3.3、通过npm引入vue的全局变量
在用 Vue 构建大型应用时推荐使用 NPM 安装[
1.4、我的第一个Vue程序
1.4.1、双向绑定
在控制台中，通过vm对象对message进行赋值，页面中的数据同时同步更改，体现Vue的双向绑定的思想
1.5、数据与算法
-
当一个 Vue 实例被创建时，它将
data对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
案例：
1.6、生命周期
1.6.1组件
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：
案例：
-
Vue.component()：注册组件
-
demo：自定义组件的名字
-
template：组件的模板
-
v-for="item in groceryList"：遍历Vue实例中定义的名为groceryList的数组，并创建同等数量的组件
-
v-bind:tex="item"：将遍历的 groceryList 项绑定到组件中props定义名为item属性上；= 号左边的tex为props定义的属性名，右边的为item in groceryList中遍历的item项的值
在一个大型应用中，有必要将整个应用程序划分为组件，以使开发更易管理。以展示使用了组件的应用模板：
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
1.6.1.1与自定义组件关系
你可能已经注意到 Vue 组件非常类似于自定义元素——它是
-
Web Components 规范已经完成并通过，但未被所有浏览器原生实现。目前 Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components。相比之下，Vue 组件不需要任何 polyfill，并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时，Vue 组件也可以包装于原生自定义元素之内。
-
Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。
虽然 Vue 内部没有使用自定义元素，不过在应用使用自定义元素、或以自定义元素形式发布时，依然有很好的互操作性。Vue CLI 也支持将 Vue 组件构建成为原生的自定义元素。
1.6.2、生命周期图示
1.7、模板语法-指令
指令带有前缀 v-*，以表示它们是 Vue 提供的特殊 attribute，它们会在渲染的 DOM 上应用特殊的响应式行为。
1.7.1、v-bind
我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似， 但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联， 所有东西都是响应式的。我们在控制台操作对象属性，界面可以实时更新! 我们还可以使用v-bind来绑定元素特性! 案例
你看到的v-bind等被称为指令。指令带有前缀v以表示它们是Vue提供的特殊特性。可能你已经猜到了， 它们会在渲染的DOM上应用特殊的响应式行为在这里，该指令的意思是：“将这个元素节点的title特性和Vue实例的message属性保持一致”。 如果你再次打开浏览器的JavaScript控制台， 输入app， message=‘新消息’，就会再一次看到这个绑定了title特性的HTML已经进行了更新。
1.7.2、v-if， v-else
条件判断语句，以下两个属性!
-
v-if -
v-else
案例
-
1.在浏览器上运行，打开控制台!
-
2.在控制台输入
vm.type=false然后回车，浏览器中显示的内容会直接变成NO 注：使用v-*属性绑定数据是不需要双花括号包裹的
v-else-if
-
v-if
-
v-else-if
-
v-else 注：
===三个等号在JS中表示绝对等于(就是数据与类型都要相等)上代码：
-
类同Java中的if-else if -else
1.7.3、v-for
-
v-for
格式说明
<div id="app-4">
<ol>
<li v-for="item in items">
{{item.message}}
</li>
</ol>
</div>
注：items是数组，item是数组元素迭代的别名。 案例
测试：在控制台输入vm.items.push({message:'数据库从删库到跑路'})，你会发现列表最后添加了一个数据库从删库到跑路。
1.7.4、v-on
v-on监听事件 emsp;事件有Vue的事件、和前端页面本身的一些事件!我们这里的click是vue的事件， 可以绑定到Vue中的methods中的方法事件! 案例：
v-on:事件名="事件函数名"
-
blur:失去焦点事件
-
focus:聚焦事件
-
click：点击事件
-
keyup：键盘弹起事件
-
keydown：键盘按下事件
1.7.5、V-model
-
Vue 还提供了
v-model指令，实现表单输入和应用状态之间的双向绑定。
1.8、模板语法-插值
1.8.1、文本插值
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
<span>Message: {{ msg }}</span>
Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。
通过使用
<span v-once>这个将不会改变: {{ msg }}</span>
1.8.2、原始 HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用
这个 span 的内容将会被替换成为 property 值 rawHtml，会在<p>标签中添加一个<span>的节点，直接作为 HTML——会忽略解析 property 值中的数据绑定。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。
1.8.3、Attribute
Mustache 语法不能作用在 HTML attrib ute 上，遇到这种情况应该使用
<div v-bind:id="dynamicId"></div>
对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：
<button v-bind:disabled="isButtonDisabled">Button</button>
如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。
1.8.4、使用 JavaScript 表达式
迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
参数绑定
1.9、class与style绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
1.9.1、class绑定
-
v-bind:class指令也可以与普通的 class attribute 共存 -
在对象中传入更多字段来动态切换多个 class
-
我们可以把一个数组传给
v-bind:class，以应用一个 class 列表，这个时候应用的就是数组中的所有CSS样式：<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="demo">
<div v-bind:class="['active','green']"
>你好，世界</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#demo",
data:{
active:true
}
});
</script>
<style type="text/css">
.active{background: red}
.green{font-size: 50px}
</style>
</body>
</html>
1.9.2、style绑定
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="demo">
<div v-bind:
>你好，世界</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#demo",
data:{
color:'red',
fontsize:'50px',
isTrue:true
}
});
</script>
</body>
</html>
1.9.3、在组件中进行渲染样式
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="demo">
<my-component
:
>
</my-component>
</div>
<script type="text/javascript">
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
var vm = new Vue({
el:"#demo",
data:{
color:'red',
fontsize:'50px',
isTrue:true
}
});
</script>
</body>
</html>
1.10、条件渲染
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="demo">
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
</div>
</body>
</html>
1.10.1、v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
1.10.2、在模板进行条件渲染
因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
1.10.3、点击按钮，通过点击事件切换样式
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="demo">
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
<button @click="demo">dianji</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#demo",
data:{
loginType:"username",
ok:true
},
methods:{
demo:function () {
if (this.loginType==='username'){
this.loginType="email"
}else{
this.loginType="username"
}
}
}
});
</script>
</body>
</html>
1.10、列表渲染
1.10.1、遍历数组中的值
-
用
v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="demo">
<ul >
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
</div>
<script type="text/javascript">
var example1 = new Vue({
el: '#demo',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
</script>
</body>
</html>
1.10.2、在 v-for 里使用对象
-
通过class的名字对dom对象进行定位，获取对象中的value值
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="demo">
<ul class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>
<script type="text/javascript">
var example1 = new Vue({
el: '.demo',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
</script>
</body>
</html>
-
获取对象中的key--value值
<li v-for="(value,name) of object"> ("value值","键值")
{{ name }}--{{value}}
</li>
将对象进行遍历，案例
1.10.3、数组更新检测
example1.items.push({ message: 'Baz' })
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
-
push()===>Combines two or more arrays.组合两个或多个数组。 -
pop()===>Appends new elements to an array, and returns the new length of the array.向数组追加新元素，并返回数组的新长度。 -
shift()===>Returns a section of an array.返回数组的一个部分。 -
unshift()===>returns the index of the first occurrence of a value in an array.返回数组中一个值的第一个匹配项的索引。 -
splice()===>Inserts new elements at the start of an array.在数组的开头插入新元素。 -
sort()===>Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.从数组中移除元素，如果需要，在其位置插入新元素，并返回已删除的元素。 -
reverse()===>Removes the first element from an array and returns it.从数组中移除第一个元素并返回它。
替换数组
变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
1.11、事件绑定
-
同模板语法-指令：v-on
1.12、Axios异步通信
1.12.1、什么是Axios
Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架， 她的主要作用就是实现AJAX异步通信，其功能特点如下：
-
从浏览器中创建
XMLHttpRequests -
从node.js创建http请求
-
支持Promise API[JS中链式编程]
-
拦截请求和响应
-
转换请求数据和响应数据
-
取消请求
-
自动转换JSON数据
-
客户端支持防御XSRF(跨站请求伪造)
1.12.2、为什么要使用Axios
由于Vue.js是一个视图层框架并且作者(尤雨溪) 严格准守SoC(关注度分离原则)所以Vue.js并不包含AJAX的通信功能， 为了解决通信问题， 作者单独开发了一个名为vue-resource的插件， 在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。少用jQuery， 因为它操作Dom太频繁!
1.12.3、第一个Axios应用程序
json
{
"name": "苗犇犇",
"url": "https://www.cnblogs.com/devilben/",
"page": 0,
"isNonProfit": true,
"address": {
"street": "浦江镇",
"city": "上海市闵行区",
"country": "中国"
},
"links": [
{
"name": "博客园",
"url": "https://home.cnblogs.com/"
},
{
"name": "DevilBen",
"url": "https://www.cnblogs.com/devilben/"
},
{
"name": "百度一下，你就知道",
"url": "https://www.baidu.com/"
}
]
}
测试
说明：
-
在这里使用了v-bind将a:href的属性值与Vue实例中的数据进行绑定
-
使用axios框架的get方法请求AJAX并自动将数据封装进了Vue实例的数据对象中
-
我们在data中的数据结构必须和
Ajax响应回来的数据格式匹配！
1.13、表单输入绑定
1.13.1、基础用法
v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
解释：在使用v-model的时候，原有控件中定义的初始值，全部失效
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
-
text 和 textarea 元素使用
valueproperty 和input事件； -
checkbox 和 radio 使用
checkedproperty 和change事件； -
select 字段将
value作为 prop 并将change作为事件。
1.13.2、多行文本的双向绑定
1.13.3、复选框
v-model：在vue的实例中，data中定义v-model的数组，数组中的值是复选框选中的值
1.13.4、单选按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el: 'app',
data: {
picked: ''
}
})
</script>
</body>
</html>
1.13.5、下拉菜单
-
静态渲染
-
v-for动态渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<select v-model="selected">
<option v-for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
</script>
</body>
</html>
1.14、组件基础
1.14.1基本示例
Vue 组件的示例：
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
-
组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是
<button-counter>。我们可以在一个通过new Vue创建的 Vue 根实例中，把这个组件作为自定义元素来使用：<!DOCTYPE html> <html lang="en" xmlns:v-for="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <div id="app"> <ul> <tempdemo v-for="item in info" :title="item"></tempdemo> </ul> </div> <script type="text/javascript"> Vue.component("tempdemo", { props: ['title'], template: "<li>{{title}}</li>" }) var vm = new Vue({ el: "#app", data: { info: [ "java从入门到放弃", "mysql从删库到跑路", "python从入门到入狱" ] } }) </script> </body> </html>
1.14.2、插槽
在Vue.js中我们使用<slot>元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中；
测试
创建一个待办事项组件(todo) ， 该组件由待办标题(todo-title) 和待办内容(todo-items)组成
1.14.3、自定义事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-context slot="todo-context" v-for="(item,index) in info" :index="index" v-bind:context=item
v-on:remove="removeItem"></todo-context>
</todo>
</div>
<!--<div>-->
<!-- <slot name="todo-title"></slot>-->
<!-- <ul>-->
<!-- <slot name="todo-context"></slot>-->
<!-- </ul>-->
<!--</div>-->
<script type="text/javascript">
// 定义待办事项-组件
Vue.component("todo",{
template:"<div><slot name=\'todo-title\'></slot> <ul><slot name=\'todo-context\'></slot></ul></div>"
});
// 定义待办事项-标题 组件
Vue.component("todo-title",{
props:['title'],
template: "<div>{{title}}</div>"
});
// 定义待办事项-内容 组件
Vue.component("todo-context",{
props:['index','context'],
template:"<li>{{index}}--{{context}}<button @click='remove'>删除</button></li>",
methods:{
remove:function (){
this.$emit("remove")
}
}
});
var vm = new Vue({
el:"#app",
data: {
title:"标题1",
info: [
"java从入门到放弃",
"mysql从删库到跑路",
"python从入门到入狱"
],
methods:{
removeItem:function (index) {
this.splice(index,1) //根据下表删除
}
}
}
})
</script>
</body>
</html>
1.15、Vue-cli
介绍
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
-
通过
@vue/cli实现的交互式的项目脚手架。 -
通过
@vue/cli+@vue/cli-service-global实现的零配置原型开发。 -
一个运行时依赖 (
@vue/cli-service)，该依赖：
-
可升级；
-
基于 webpack 构建，并带有合理的默认配置；
-
可以通过项目内的配置文件进行配置；
-
可以通过插件进行扩展。
-
-
一个丰富的官方插件集合，集成了前端生态中最好的工具。
-
一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。
主要功能：
-
统一目录结构
-
本地调试
-
热部署
-
单元测试
-
集成打包测试
环境准备：
-
node.js
-
git
该系统的组件
Vue CLI 有几个独立的部分——如果你看到了我们的
CLI
CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。我们会在接下来的指南中逐章节深入介绍。
CLI 服务
CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。
CLI 服务是构建于
-
加载其它 CLI 插件的核心服务；
-
一个针对绝大部分应用优化过的内部的 webpack 配置；
-
项目内部的
vue-cli-service命令，提供serve、build和inspect命令。
如果你熟悉
CLI 插件
CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头，非常容易使用。
当你在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件。
插件可以作为项目创建过程的一部分，或在后期加入到项目中。它们也可以被归成一组可复用的 preset。我们会在
安装：
Vue3安装：
#安装vue3 npm uninstall -g @vue/cli
vue create
运行以下命令来创建一个新项目：
#创建一个名称位hello-world的项目
vue create hello-world
#进入项目目录下 cd hello-world #运行项目 npm run serve
执行结果页面
Vue2
-
安装Node.js淘宝镜像加速器
# -g 就是全局安装 npm install cnpm -g # 或使用如下语句解决npm速度慢的问题 npm install --registry=https://registry.npm.taobao.org
安装的过程可能有点慢~，耐心等待！虽然安装了cnpm，但是尽量少用！
安装的位置：C:\Users\administrator\AppData\Roaming\npm
-
安装vue-cli
cnpm instal1 vue-cli -g #测试是否安装成功#查看可以基于哪些模板创建vue应用程序，通常我们选择webpack vue list
1.创建一个Vue项目，我们随便建立一个空的文件夹在电脑上，我这里在D盘下新建一个目录
D:\Project\vue-study;
2.创建一个基于webpack模板的vue应用程序
#1、首先需要进入到对应的目录 cd D:\Project\vue-study #2、这里的myvue是顶日名称，可以根据自己的需求起名 vue init webpack myvue
一路都选择no即可； 说明：
-
Project name：项目名称，默认回车即可
-
Project description：项目描述，默认回车即可
-
Author：项目作者，默认回车即可
-
Install vue-router：是否安装vue-router，选择n不安装（后期需要再手动添加）
-
Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加)
-
Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加）
-
Setupe2etests with Nightwatch：单元测试相关，选择n不安装（后期需要再手动添加）
-
Should we run npm install for you after the,project has been created:创建完成后直接初始化，选择n，我们手动执行；运行结果！
（1）初始化并运行
#进入程序目录 cd myvue #安装依赖 npm install #运行程序 npm run dev
执行完成后，目录多了很多依赖
当出现问题时，可以查看提示进行处理
package.json里面有一些配置，主要的配置
node—modules依赖
1.16、Webpack
什么是Webpack
webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) 。当webpack处理应用程序时， 它会递归地构建一个依赖关系图(dependency graph) ， 其中包含应用程序需要的每个模块， 然后将所有这些模块打包成一个或多个bundle. Webpack是当下最热门的前端资源模块化管理和打包工具， 它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。
安装Webpack
WebPack是一款模块加载器兼打包工具， 它能把各种资源， 如JS、JSX、ES 6、SASS、LESS、图片等都作为模块来处理和使用。 安装：
npm install webpack -g
npm install webpack-cli -g
测试安装成功
-
webpack -v
-
webpack-cli -v
配置
创建 webpack.config.js配置文件
-
entry：入口文件， 指定Web Pack用哪个文件作为项目的入口
-
output：输出， 指定WebPack把处理完成的文件放置到指定路径
-
module：模块， 用于处理各种类型的文件
-
plugins：插件， 如：热更新、代码重用等
-
resolve：设置路径指向
-
watch：监听， 用于设置文件改动后直接打包
module.exports = {
entry:"",
output:{
path:"",
filename:""
},
module:{
loaders:[
{test:/\.js$/,;\loade:""}
]
},
plugins:{},
resolve:{},
watch:true
}
直接运行webpack命令打包
使用webpack
-
创建项目
-
创建一个名为modules的目录，用于放置JS模块等资源文件
-
在modules下创建模块文件，如hello.js，用于编写JS模块相关代码
//暴露一个方法：sayHi
exports.sayHi = function () {
document.write("<h1><div>hello world </div></h1>")
}
-
在modules下创建一个名为main.js的入口文件，用于打包时设置entry属性
//require 导入一个模块，就可以调用这个模块中的方法了
var hello = require("./hello");
hello.sayHi();
-
在项目目录下创建webpack.config.js配置文件，使用webpack命令打包
module.exports = {
entry:"./modules/main.js",
output:{
filename:"./js/bundle.js"
}
}
-
在项目目录下创建HTML页面，如index.html，导入webpack打包后的JS文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>
-
在IDEA控制台中webpack打包，需要管理员权限；
-
运行HTML看效果
# 参数--watch 用于监听变化，通过webpack --watch实现热部署
1.17、Vue-route
介绍
Vue Router 是
-
嵌套路由映射
-
动态路由选择
-
模块化、基于组件的路由配置
-
路由参数、查询、通配符
-
展示由 Vue.js 的过渡系统提供的过渡效果
-
细致的导航控制
-
自动激活 CSS 类的链接
-
HTML5 history 模式或 hash 模式
-
可定制的滚动行为
-
URL 的正确编码
安装
基于第一个vue-cli 查看node modules中是否存在vue-router vue-router是一个插件包， 需要用n pm/cn pm来进行安装的。打开命令行工具，进入项目目录，输入下面命令。
npm install vue-router --save-dev
如果在一个模块化工程中使用它，要通过 Vue.use() 明确地安装路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
如果使用全局的 script 标签，则无须如此 (手动安装)
测试
1、先删除没有用的东西 2、components 目录下存放我们自己编写的组件 3、定义一个Login.vue 的组件
<template>
<div>内容</div>
</template>
<script>
export default {
name: "Login"
}
</script>
<style scoped>
</style>
Main.vue组件
<template>
<div>首页</div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
4、安装路由，在src目录下，新建一个文件夹：router，专门存放路由，配置路由index.js，如下
import Vue from'vue'
//导入路由插件
import Router from 'vue-router'
//导入上面定义的组件
import Login from '../views/Login'
import Main from '../views/Main'
//安装路由
Vue.use(Router) ;
//配置路由
export default new Router({
routes:[
{
//路由路径
path:'/login',
//路由名称
name:'login',
//跳转到组件
component:Login
},{
//路由路径
path:'/main',
//路由名称
name:'main',
//跳转到组件
component:Main
}
]
});
5、在main.js中配置路由
import Vue from 'vue'
import App from './App'
//导入上面创建的路由配置目录
import router from './router'//自动扫描里面的路由配置
Vue.config.productionTip = false;
new Vue({
el:"#app",
//配置路由
router,
components:{App},
template:'<App/>'
});
6、在App.vue中使用路由
<template>
<div id="app">
<!--
router-link：默认渲染成一个<a>标签，to属性为指定链接
router-view：用于渲染路由匹配到的组件
-->
<router-link to="/main">首页</router-link>
<router-link to="/login">内容页</router-link>
<router-view/>
</div>
</template>
<script>
export default{
name:'App'
}
</script>
<style></style>
二、elementUI
官网：https://element.eleme.cn/#/zh-CN
安装：
npm 安装
推荐使用 npm 的方式安装，它能更好地和
npm i element-ui -S
CDN
目前可以通过
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看
2.1、vue+elementUI整合
我们采用实战教学模式并结合ElementUI组件库，将所需知识点应用到实际中，以最快速度带领大家掌握Vue的使用；
2.1.1、创建工程
注意：命令行都要使用管理员模式运行 1、创建一个名为hello-vue的工程vue init webpack vue-element 2、安装依赖， 需要安装vue-router、element-ui、sass-loader和node-sass四个插件
#下载Vue2
npm install vue-cli -g
#创建项目文件
vue init webpack vue-element
#进入工程目录
cd vue-element
#安装vue-routern
npm install vue-router@3 --save-dev #将版本操作，会更好一写
#安装element-ui
npm i element-ui -S
#安装依赖
npm install
# 安装SASS加载器
#cnpm install sass-loader node-sass --save-dev #最新版本，有问题
cnpm install sass-loader@7.3.1 node-sass --save-dev #通过@指定版本
#启功测试
npm run dev
在源码目录中创建如下结构：
-
assets：用于存放资源文件
-
components：用于存放Vue功能组件
-
views：用于存放Vue视图组件
-
router：用于存放vue-router配置
2.2、路由详解+常用的组件
-
Form
<template>
<el-form ref="form" :model="form" class="login-box" :rules="rules">
<h2 class="login-title">欢迎登陆</h2>
<el-form-item label="账号" prop="name">
<el-input type="text" placeholder="请输入用户名" v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="submitForm('form')" type="primary">登录</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: "Login",
data(){
return{
form:{
name:"",
password:""
},
rules: {
name: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
]
}
}
},
methods:{
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$router.push("/main");
} else {
this.$message({
message: '账号或密码错误',
type: 'warning'
});
return false;
}
});
},
}
}
</script>
<style scoped>
.login-box{
width: 350px;
margin: 120px auto;
border: 2px solid #909399;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 30px #909399;
}
.login-title{