-
定义给vue.js管理的dom元素(给div定义一个ID)
-
创建一个 Vue 的实例，并声明要渲染的数据源
-
在给定的dom元素容器内，绑定数据源中变量名称{{变量名}}
☀ Vue参数对象属性
el：元素挂载的位置，值可以是CSS选择器或DOM元素
data：模型数据，值是一个对象
☀ 插值表达式
将数据填充到HTML标签中
支持基本的JavaScript计算操作，例如算术运算、字符串拼接等
在html中引入vue.js文件
在html中定义vue管理的视图容器
实例化vue对象并声明数据源，渲染视图显示
通过chrome中的谷歌插件商店安装Vue Devtools链接1[Vue Devtools链接2]工具，此工具帮助我们进行vue数据调试所用，一定要安装。
★ 在vscode中安装插件
当把一个普通的JavaScript对象传给Vue实例的data选项，Vue将遍历此对象所有的属性，使用Object.defineProperty(vue2.x),vue3.x中使用了proxy对象把这些属性全部转为getter/setter(数据劫持)。在属性被访问和修改时通知变化。每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。
vue实现数据响应式
====================================================================
插值表达式是vue框架提供的一种在html模板中绑定数据的方式，使用{{变量名}}方式绑定Vue实例中data中的数据变量。会将绑定的数据实时的显示出来。
支持写法
{{变量、js表达式、三目运算符、方法调用等}}
{{name}}
{{name + '--好的'}}
{{ 1 + 1 }}
{{title.substr(0,6)}}
{{ age>22 ? '成年':'未成年'}}
注：{{}}括起来的区域，就是一个就是js语法区域，在里面可以写部份的js语法。不能写 var a = 10; 分支语句 循环语句
指令(Directives)就是vue给html标签提供的一些自定义属性，这样属性都是带有 v- 前缀的特殊属性。指令特性的值预期是单个JS表达式(v-for是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
指令作用：
☀ 操作dom
☀ 权限限制
☀ 表单验证
v-html 解析html指令 注：尽量避免使用，容易造成危险 (XSS跨站脚本攻击)
v-text 输出文本信息
{{html}}
====================================================================
指令扩展了html标签的功能、大部分的指令的值是js的表达式，取代了DOM操作。
解决浏览器在加载页面时因存在时间差而产生的“闪动”问题
css中设置
[v-cloak] {
display: none;
}
html
{{ message }}
跳过这个元素和它的子元素的编译过程，跳过大量没有指令的节点会加快编译。
不需要编译，直接可以运行
只渲染元素和组件一次，之后元素和组件将失去响应式功能
{{message}}
根据表达式的布尔值(true/false)进行判断是否渲染该元素
我是p标签中的内容
我是p标签中的内容
注：v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
多条件判断
v-if … v-else-if v-else
动态地绑定一个或多个属性
跳转
跳转
根据一组数组或对象的选项列表进行渲染。
v-for指令需要使用 (item,index) in 数组或对象 形式的特殊语法，同时还需要指定key值,key的作用在vue进行新旧数据比对渲染页面里，如果有key值会提升比对性能，加快渲染，key使用唯一的值来赋值。
- {{ u }}
- {{ index }} -{{ key }} - {{item}}
绑定事件监听器（事件绑定）
<button @click=“事件实现方法()”>
绑定好事件实现方法后需要在Vue对象中的methods对象中实现对应的绑定方法
methods: {
functionName(arg1,arg2,arg3,…){
// something to do
},
…
}
★ 事件处理函数传参 – 事件对象— event对象
<button @click=“say”>
<button @click=“say($event)”>
# 注：如果没有参数时，可以不写小括号，默认就会把event事件对象绑定到实现的方法中，如果需要传参数时，则通过 $event 来手动传递到实现的方法中
★ 事件修饰符
用来处理事件的特定行为
<button @click.stop=“doThis”>
<a @click.prevent=“doThis”>
- 你好世界
<button @click.stop.prevent=“doThis”>
★ 按键修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。
<input @keyup.enter=“submit”>
你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用
v-on:keyup.f1Vue.config.keyCodes = {f2:113}
<input @keyup.f2=“add()” value=“aaaa”>
4.8.1、class样式处理
▶ 对象语法
.active {
color: red;
}
class样式data: {
isActive: true
}
▶ 数组语法
.active {
color: red;
}
数组写法data: {
activeClass: ‘active’
}
4.8.2、绑定style
▶ 对象语法
<div:style=“{color: redColor, fontSize: ‘20px’}”>对象写法
data: {
redColor: ‘red’
}
▶ 数组语法
数组写法data: {
color: {
color: ‘red’
},
fontSize: {
‘font-size’: ‘20px’
}
}
作用: 表单元素的绑定，实现了双向数据绑定，通过表单项可以更改数据。
v-model会忽略所有表单元素的value、checked、selected特性的初始值,而总是将Vue实例的数据作为数据来源，应该在data选项中声明初始值。
绑定文本框
{{message}}
data: {
message: ‘message默认值’
}
▶ 绑定多行文本框
data: {
message: ‘我是多行文本内容’
}
注意：多行文本框中使用插值表达式 无效
▶ 绑定单个复选框
绑定一个复选框
data:{
checked:true
}
▶ 绑定多个复选框
此种方式需要input标签提供value属性
data:{
// 如果数组中有对应的value值，则此checkbox会被选中
checkedNames:[]
}
▶ 绑定单选框
需要input提供value属性的值
男
女
data: {
sex: ‘’
}
▶绑定下拉框
请选择 HTML CSS JSdata: {
selected: ‘’
}
▶ 修饰符
.lazy 失去焦点时触发(延时更新数据源)
.number 输入值转为数值类型
.trim 自动过滤用户输入的首尾空白字符
=============================================================================
在数据被渲染之前，可以对其进行进一步处理，比如将字符截取或者将小写统一转换为大写等等，过滤器本身就是一个方法。
过滤器可以定义全局或局部
全局
// 回调函数中的参数1永久是绑定的数据
Vue.filter(过滤器名称,(value,[…args])=>{})
局部过滤器定义
此过滤器定义在Vue对象的配置中的filters配置选项中，以方法形式来定义，参数1永久是绑定的数据
new Vue({
filters:{
过滤器名(value){
return 数据
}
}
})
===========================================================================
混入(mixins)是一种分发Vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
混入分为：全局和局部
作用： 代码复用和全局给Vue对象配置属性或方法
全局混入
Vue.mixin({
created(){},
methods:{}
})
局部混入
let mixinObj = {}
new Vue({
mixins:[mixinObj]
})
====================================================================
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。
| 生命周期 | |
| — | — |
| beforeCreate | 在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了 执行1次 |
| created | 在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来 执行1次 用this对象 |
| beforeMount | 在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已 执行1次 |
| mounted | el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面可以进行数据请求等 执行1次 |
| beforeUpdate | 数据更新时调用，页面上数据还是旧的 n次 |
| updated | 由于数据更新完毕，页面上数据已经替换成最新的 n次 |
| beforeDestroy | 实例销毁之前调用 执行1次 |
| destroyed | 实例销毁后调用 执行1次 |
| activated | keep-alive 组件激活时调用 |
| deactivated | keep-alive 组件停用时调用 |
| errorCaptured | 当捕获一个来自子孙组件的错误时被调用当捕获一个来自子孙组件的错误时被调用 |
====================================================================
var xmlhttp = new XMLHttpRequest()
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
console.log(xmlHttp.responseText)
}
}
// GET
xmlhttp.open(“GET”, url, true)
xmlhttp.send(null)
// POST
// xhr.open(‘POST’, ‘url’, true);
// xhr.setRequestHeader(‘Content-type’, ‘application/x-www-form-urlencoded’)
// var data = new FormData();
//data.append(‘user’, ‘person’);
//xmlhttp.send(data)
Fetch是新的ajax解决方案 Fetch会返回Promise对象。fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
参数说明
1、第一个参数是URL:
2、第二个设置请求的参数，是可选参数
3、返回使用了Promise 来处理结果/回调
fetch(url,options).then(res=>res.json()/text()).then(ret=>console.log(ret))
Fetch它给我们提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT等。
默认的是 GET 请求，可以在设置请求参数中指定请求方法，通过method来设置// get请求
// 通过url表达式来传递数据
fetch(‘http://xxx/?id=123’)
.then(res => res.json())
.then(data => console.log(data))
// post标准提交
fetch(‘http://xxxx/post’, {
method: ‘post’,
body: ‘uname=lisi&pwd=123’,
headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded’
}
}).then(res => res.json()).then(data => console.log(data))
// post提交json数据
fetch(‘http://localhost:3000/books’, {
method: ‘post’,
body: JSON.stringify({
uname: ‘lisi’,
pwd: ‘123’
}),
headers: {
‘Content-Type’: ‘application/json’
}
}).then(res => res.json()).then(data => console.log(data))
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和node.js中。能拦截请求和响应，自动转换JSON数据。axios也是vue作者推荐使用的网络请求库。
使用语法
GET
方法1
axios.get(‘/user?ID=12345’).then(res=>{})
方法2
axios.get(‘/user’, {
params: {
ID: 12345
}
}).then(res=>{})
POST
axios.post(‘/user’, {
firstName: ‘aa’,
lastName: ‘bb’
}).then(res=>{})
标准写法
axios({
method: ‘post’,
url: ‘/user/12345’,
timeout: 1000,
headers: {‘X-Custom-Header’: ‘foobar’},
data: {
firstName: ‘Fred’,
lastName: ‘Flintstone’
}
})
axios 全局配置
配置公共的请求头
axios.defaults.baseURL = ‘https://api.example.com’;
配置 超时时间 毫秒数(0 表示无超时时间)
axios.defaults.timeout = 1000;
配置公共的请求头
axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;
=====================================================================
组件 (Component) 是 Vue.js 最强大的功能之一，它是html、css、js等的一个聚合体。
组件化
◆ 将一个具备完整功能的项目的一部分分割多处使用
◆ 加快项目的进度
◆ 可以进行项目的复用
组件注册分为：全局注册和局部注册
Vue.component('组件名称', { })第1个参数是标签名称，第2个参数是一个选项对象。全局组件注册后，任何vue实例都可以用。组件注意事项：
♬ 构造 Vue 实例时传入的各种选项大多数都可以在组件里使用，只有一个例外：data必须是函数，同时这个函数要求返回一个对象 ，数据唯一性
♬ 组件模板必须是单个根元素
♬ 组件模板的内容可以是模板字符串
Vue.component(‘HelloWorld’, {
data: function(){
return {
msg: ‘HelloWorld’
}
},
template: ‘
{{msg}}’});
自定义属性
只能在当前注册它的vue实例中使用，通过某个 Vue 实例/组件的实例选项
components注册仅在其作用域中可用的组件var Child = {
template: ‘
A custom component!’}
new Vue({
components: {
// 将只在父组件模板中可用
‘my-component’: Child
}
})
通过使用保留的 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换
★ keep-alive
如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。
9.5.1、父组件向子组件传值
☼ 父组件以属性的形式绑定值到子组件身上
☼ 子组件通过使用属性props接收(props是单向数据流(只读属性)：当父组件的属性变化时，将传导给子组件，但是反过来不会)
9.5.2、子组件向父组件传值
▶ 子组件用
$emit()定义自定义事件，$emit()第一个参数为 自定义的事件名称 第二个参数为需要传递的数据▶父组件用v-on(@)绑定子组件定义的自定义事件名，监听子组件的事件，实现通信
9.5.3、事件总线
在没有事件总线的情况下，我们实现兄弟之间通信的方案
非父子组件或更多层级间组件间传值，在Vue中通过单独的事件中心来管理组件间的传值。
☆ 建立统一的事件中心
const bus = new Vue()
☆ 传递数据方，通过一个事件触发
bus.$emit(方法名，传递的数据)☆ 接收数据方，在生命周期函数中，通过
bus.$on(方法名,[params])来监听☆ 销毁事件，在接受数据方，通过
bus.$off(方法名)销毁之后无法监听数据
9.5.4、Ref
ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
普通dom元素上
hello
子组件上
调用
this.$refs.引用名
▶ 在普通html中使用
▶ ref在组件中使用
9.5.5、parent/children
获取父组件对象或子组件对象集合
9.5.6、provide/inject
====================================================================
组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力
当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。
子组件
我是子组件的标题
只有在没有要分发的内容时才会显示。
父组件
我是父组件的标题
这是一些初始内容
这是更多的初始内容
有时我们需要多个插槽，来完成对应的数据自定义显示。
一个不带 name 的 出口会带有隐含的名字“default”。
自2.6.0 起有所更新。已废弃的使用 slot
子组件
父组件
// 老写法
这里可能是一个页面标题
// 新写法
// v-slot 只能添加在 上
// 简写 v-slot:header == #header
这里可能是一个页面标题
主要内容的一个段落。
作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的)可重用模板，来代替已经渲染好的元素。在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样
子组件中
Vue.component(‘child’, {
template: `
`
})
父组件中
// 老写法
父组件{{ props.text }}
// 新写法
<template #default=“props”
父组件{{ props.text }}
========================================================================
在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好，在这些项目里 JS 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由JS驱动的时候，下面这些缺点将变得非常明显：
▲ 所有的组件都放同一个html文件中
▲ 没有构建步骤,不能使用npm来管理项目
▲ 缺乏语法高亮和提示
▲ 没有针对单个组件的css样式支持
针对于上述的问题，vue框架发布了vue-cli项目生成工具，Vue-cli是一个基于 Vue.js 进行快速开发的完整系统， 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。
https://cli.vuejs.org/zh/guide/installation.html
Vue-cli3.x以上版本需要 Node.js 8.9 或更高版本(推荐 v10 以上)。
npm i -g @vue/cli
安装成功后，检查
vue --version
首先需要进入到对应的目录中(英文目录不要有空格),执行如下命令
vue create 项目名称(创建时会自己以对应的项目名称生成目录)
例
vue create hello-world
创建步骤
▽ src
▷ main.js 项目入口文件
▷ App.vue 根组件
▷ components 自定义的功能组件
▷ views 展示视图组件
▷ assets 静态资源目录
=======================================================================
模块化就是将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD/CMD等。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS、AMD、CMD等规范，成为浏览器和服务器通用的模块解决方案。
export 导出
- export 一个文件可以导出N个
- export default 一个文件只能导出一个 导出对象或类或函数
import 导入
- 导入 export 导出的 使用解构赋值(右边是什么类型，左就是什么类型，如果是对象，则名称一样)
- export default 导入方式
- import 名字可以随写 from ‘路径’;
导出
导入
导出类
导入类
import函数方式使用
====================================================================
路由的本质就是一种对应关系，根据不同的URL请求，返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。
路由分为：后端路由和前端路由
☺ 后端路由：由服务器端进行实现并实现资源映射分发
☺ 前端路由：根据不同的事件来显示不同的页面内容，取事件与事件处理函数之间的对应关系
SPA(Single Page Application)单页面应用程序,基于前端路由而起：整个网站只有一个页面，通过监听地址栏中的变化事件，来通过Ajax局部更新内容信息显示、同时支持浏览器地址栏的前进和后退操作。
前端路由也有2种模式:
♣ hash模式(锚链接)
hash路由模式是这样的：http://xxx.abc.com/#/xx。 有带#号，后面就是hash值的变化。改变后面的hash值，它不会向服务器发出请求，因此也就不会刷新页面。并且每次hash值发生改变的时候，会触发hashchange事件。因此我们可以通过监听该事件，来知道hash值发生了哪些变化。
window.addEventListener(‘hashchange’, ()=>{
// 通过 location.hash 获取到最新的 hash 值
console.log(location.hash);
});
♣ history模式
HTML5的History API为浏览器的全局history对象增加了该扩展方法。它是一个浏览器（bom）的一个接口，在window对象中提供了onpopstate事件来监听历史栈的改变，只要历史栈有信息发生改变的话，就会触发该事件。
history.pushState({},title,url); // 向历史记录中追加一条记录
history.replaceState({},title,url); // 替换当前页在历史记录中的信息。4
// 每当活动的历史记录项发生变化时， popstate 事件都会被传递给window对象。如果当前活动的历史记录项是被 pushState 创建的，或者是由 replaceState 改变的，那么 popstate 事件的状态属性 state 会包含一个当前历史记录状态对象的拷贝。
window.addEventListener(‘popstate’, function(event) {
console.log(event)
})
注：浏览器地址没有#， 比如(http://localhost:3001/a); 它也一样不会刷新页面的。但是url地址会改变。但它在服务器没有配置的情况下，不能手动刷新，否则返回404页面♣ 手写一个hash路由
插件
https://cn.vuejs.org/v2/guide/plugins.html#ad
网址：https://router.vuejs.org/zh/
13.3.1、介绍
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
-
嵌套的路由/视图表
-
模块化的、基于组件的路由配置
-
路由参数、查询、通配符
-
基于 Vue.js 过渡系统的视图过渡效果
-
细粒度的导航控制
-
带有自动激活的 CSS class 的链接
-
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
-
自定义的滚动条行为
13.3.2、安装
如果在vue-cli创建项目时没有勾选上vue-router选项，此时就需要手动的来安装它
npm i -S vue-router
13.3.3、Vue Router的基本使用
Vue Router的基本使用步骤：
引入相关库文件
VueRouter引入到Vue类中
定义路由组件规则并创建路由实例
把路由挂载到Vue根实例中
添加路由组件渲染容器
路由文件
import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)
定义路由规则
const routes = [
{ path: ‘/foo’, component: Foo },
{ path: ‘/bar’, component: Bar }
]
创建路由实例
const router = new VueRouter({
routes
})
挂载根实例
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount(‘#app’)
html
13.3.4、声明式导航
它就是先在页面中定义好跳转的路由规则，vueRouter中通过 router-link组件来完成
to 要跳转到的路由规则 string|object
to=”users”
:to=”{path:’path’}”
13.3.5、编程式导航
编程式导航就是通过js来实现路由跳转
this. r o u t e r . p u s h ( " / l o g i n " ) ; t h i s . router.push(“/login”); this. router.push(“/login”);this.router.push({ name:‘user’ , params: {id:123} });
this. r o u t e r . p u s h ( p a t h : " / l o g i n " ) ; t h i s . router.push({ path:“/login” }); this. router.push(path:“/login”);this.router.push({path:“/login”,query:{username:“jack”} });
this.$router.go( n ); 【//n为数字 负数为回退】
13.3.6、路由重定向
用户在访问地址A的时候，强制用户跳转到地址C ，从而展示特定的组件页面。
var router = new VueRouter({
// routes是路由规则数组
routes: [
// 每个路由规则都是个配置对象，至少有path和component两个属性
// path表示当前路由规则匹配的hash地址
// component表示当前路由规则对应要展示的组件
{ path: ‘/’, redirect: ‘/user’ },
{ path: ‘/user’, component: User }
]
})
13.3.7、嵌套路由
嵌套路由最关键在于理解子级路由的概念：
比如我们有一个/users的路由，那么/users下面还可以添加子级路由，如:
/users/index、/users/add等等，这样的路由情形称之为嵌套路由。
routes: [
{
path: “/user”,
component: User,
//通过children属性为/user添加子路由规则
children:[
{ path: “/user/index”, component: Index },
{ path: “/user/add”, component: Add },
]
}
]
需要在 User组件中定义一个router-view 用于嵌套路由的渲染显示
13.3.8、动态路由匹配
所谓动态路由就是路由规则中有部分规则是动态变化的，不是固定的值，需要去匹配取出数据(即路由参数)。
// 传递参数id
var router = new VueRouter({
// routes是路由规则数组
routes: [
{ path: ‘/user/:id’, component: User },
]
})
// 组件中获取id值
const User = {
template: ‘
User ID is {{$route.params.id}}’}
13.3.9、命名路由
通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。
路由
const router = new VueRouter({
routes: [
{
path: ‘/user/:id’,
name: ‘user’,
component: User
}
]
})
声明路由
User
在定义路由规则时，起一个名称
在组件中来导航声明式导航
编程式导航实现路由跳转
13.3.10、导航守卫
导航守卫就是路由跳转过程中的一些钩子函数，这个过程中触发的这些函数能让你操作一些其他的事儿的时机，这就是导航守卫。
♀全局守卫
全局前置守卫
//当一个导航触发时,触发前置守卫，
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该next方法，否则路由不向下执行。
router.beforeEach((to, from, next) => {
// …
})
全局后置钩子
// 此钩子不会接受 next 函数也不会改变导航本身
router.afterEach((to, from) => {
// …
})
♀ 组件内守卫
你可以在路由组件内直接定义以下路由导航守卫
const Foo = {
template:
...,beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例
this// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例
this},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例
this}
}
♀ 路由独享
const router = new VueRouter({
routes: [
{
path: ‘/foo’,
component: Foo,
beforeEnter: (to, from, next) => {
// …
}
}
]
})
♀ 路由元信息
♀ 路由懒加载
========================================================================
产品立项 (需求分析、技术选型、项目人员确定)
产品原型 (设计产品原型图— 进行ui设计)
项目开发 (前端 与 后端)
项目测试
项目上线
开发工具：Vscode
开发环境：Window/Linux/Mac
项目运行环境：node v10.x以上版本
Vue脚手架： vue-cli 4.x
代码版本工具：Git
使用vue脚手架创建项目
选择手动模式
安装vue扩展
路由模式
css预处理
每个配置都用单文件设置
不保存刚刚的安装配置
创建完成后，cd进入到项目中
如果项目中所有的路由都写在入口文件中，那么将不便于编写项目和后期维护。因此路由需要进行模块化处理。
可以先行添加以下几个空的路由模块：
电影模块
影院模块
个人中心模块
如果后续还有其他模块，届时再进行增加即可。
创建模块化的目录及路由文件
router/index.js路由主入口文件
import Vue from “vue”;
import VueRouter from “vue-router”;
// 导入路由模块
import centerRouter from ‘@/router/routes/center’
import cinemaRouter from “@/router/routes/cinema”;
import filmRouter from “@/router/routes/film”;
Vue.use(VueRouter);
const routes = [
// 注册路由模块
centerRouter,
cinemaRouter,
filmRouter,
{
path: “/”,
redirect: “/film”,
}
];
const router = new VueRouter({
mode: “history”,
routes,
});
export default router;
▶ 在src/components/目录下新建FooterNav.vue文件
▶ 将需要的字体文件夹放置到src/assets目录下
▶ 将组件src/components/FooterNav.vue导入到根组件App.vue中并使用
设置html中的默认css样式，重置一下
https://meyerweb.com/eric/tools/css/reset/
▶ 编写组件src/components/FooterNav.vue代码，产生公共底部导航
影片
影院
个人
项目中使用axios进行网络请求，vue脚手架默认没有安装，需要自行安装才能使用。
★ 安装ss
npm i -S axios
★ 设置统一请求域名
// 导入axios
import axios from “axios”
// 设置请求的基础域名
axios.defaults.baseURL = ‘https://api.iynn.cn/film/api/v1/’
★ 反向代理可以进行跨域解决
在项目根目录下面创建一个vue.config.js文件，写下如下代码
module.exports = {
devServer: {
overlay: false,
// vue项目代理请求
proxy: {
// 规则
// axios中相对地址开头的字符串
‘/api’: {
// 把相对地址中的域名 映射到 目标地址中
// localhost:8080 => localhost:3000
target: ‘http://localhost:3000’,
// 修改host请求的域名为目标域名
changeOrigin: true,
// 请求uri和目标uri有一个对应关系
// 请求/api/login ==> 目标 /v1/api/login
pathRewrite: {
‘^/api’: ‘/v1/api’
}
}
}
}
}
==========================================================================
★ 创建电影列表顶部导航组件src/components/FilmListTopNav.vue
正在热映
即将上映
项目中使用axios进行网络请求，vue脚手架默认没有安装，需要自行安装才能使用。
★ 安装ss
npm i -S axios
★ 设置统一请求域名
// 导入axios
import axios from “axios”
// 设置请求的基础域名
axios.defaults.baseURL = ‘https://api.iynn.cn/film/api/v1/’
★ 反向代理可以进行跨域解决
在项目根目录下面创建一个vue.config.js文件，写下如下代码
module.exports = {
devServer: {
overlay: false,
// vue项目代理请求
proxy: {
// 规则
// axios中相对地址开头的字符串
‘/api’: {
// 把相对地址中的域名 映射到 目标地址中
// localhost:8080 => localhost:3000
target: ‘http://localhost:3000’,
// 修改host请求的域名为目标域名
changeOrigin: true,
// 请求uri和目标uri有一个对应关系
// 请求/api/login ==> 目标 /v1/api/login
pathRewrite: {
‘^/api’: ‘/v1/api’
}
}
}
}
}
==========================================================================
★ 创建电影列表顶部导航组件src/components/FilmListTopNav.vue
正在热映
即将上映
992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
