目录

️1、Vue和其他两大框架的区别

️2、Vue是什么

️3、MVVM

️4、Vue指令

️4.️1 v-text

️4.️2 v-html

️4.️2.️1 v-html指令 和 v-text指令的区别

️4.️3 v-on

️4.️3.️1 详细用法

️4.️3.️2 事件修饰符

️4.️4 v-bind

️4.️4.1 属性绑定修饰符

️4.️4.2 对象的方式绑定class

️4.️4.3 对象的方式绑定style

️4.️5 v-model

️4.️5.️1 双向

️4.️5.️2 双向绑定修饰符

️4.️6 v-for

️4.️6.️1 :key

️4.️6.️2 遍历数组注意点

️4.️7 v-if,v-else,v-else-if

️4.️7.️1 注意

️4.️8 v-show

️4.️8.️1 注意

️4.️9 v-if vs v-show

️4.️️10 v-cloak

️4.️️11 v-once

️5、Vue实例

️5.️1 el

️5.️2 data

️5.️3 methods

️5.️4 computed

️5.️5 watch

️5.️6 computed和watch的区别

️5.️7 components

️5.️8 filters

️6、Vue实例中的this

️7、Vue实例属性

️7.️1 vm.$data

️7.️2 vm.$options

️7.️3 vm.$refs

️8、Vue组件

️8.️1 什么是组件

️8.️2 组件化和模块化的区别

️8.️3 全局组件

️8.️3.️1 用法

️8.️3.️2 注意

️8.️3.️3 组件参数

️9、Vue生命周期钩子

️9.️1 三大阶段

️9.️1.️1 初始化显示

️9.️1.️2 更新显示

️9.️1.️3 销毁

️️10、父子组件传参

️️10.️1 父传子

️️10.️2 子传父

️️11、VueRouter

️️11.️1 前端路由

️️11.️2 如果是模块工程化(VueCLI)中使用VueRouter

️️11.️3 路由起步代码

️️11.️3.️1 HTML

️️11.️3.️2 JavaScript

️️11.️4 路由高亮

️️11.️5 声明式导航

️️11.️6 编程式导航

️️11.️7 动态路由匹配

️️11.️8 路由重定向

️️11.️9 前置导航守卫

️️11.️️10 路由元信息

️️11.️️11 嵌套路由

️️11.12 统一404页面

️️11.️13 路由懒加载

️️12、资源请求

️️12.️1 Axios

️️12.️1.️1 Axios是什么?

️️12.️1.️2 CDN

️️12.️1.️3 .then

️️12.️1.️4 .catch

️️12.️1.️5 get请求

️️12.️1.️6 post请求

️️12.️1.️7 基地址

️️12.️1.️8 设置跨域携带cookie

️️12.️1.️9 创建克隆对象 多基地址设置

️️12.️1.️10 Axios拦截器

️️12.️2 vue-resource

️️13、Vue动画钩子

️️13.️1 Vue动画钩子是什么?

️️13.️2 Vue动画的理解

️️13.️3 单个元素动画

️️13.️4 列表过渡动画

️️13.️5 name

️️13.️6 tag

️️13.️7 过渡类名参数

️️13.️8 动画时机

️️13.️9 动画钩子代码

️️13.️9.️1 HTML

️️13.️9.️2 JavaScript

️️13.️️10 过渡动画生命周期

️️14、VueX

️️14.1 Vuex是什么?

️️14.2 起步

️️14.2.1 下载

️️14.2.2 创建VueX仓库

️️14.2.3 在组件中获取VueX的数据

️️14.2.4 在组件中修改VueX的数据

️️14.3 VueX - state

️️14.4 VueX - mutation

️️15、VueCLI

️️15.1 单文件组件

️️15.1.1 用一个文件能够包含组件的所有内容

️️15.1.2 单文件开发的好处

️️15.2 什么是Vue-CLI

️️15.3 搭建一个脚手架

️️15.4 Vue-CLI搭建项目的本质

15.5 Vue-cli项目结构

15.6 搭建webpack-vue脚手架(详细版本)

15.7 webpack-vue项目结构

15.8 Vue-CLI项目编码

15.8.1 编码位置

15.8.2 引入css

15.8.3 注册组件

15.8.4 整合路由

15.9 在Vue中使用其他插件

15.9.1 面试问及

15.10 css预处理与css作用域

15.10.1 css预处理

15.10.2 css作用域

15.11 ES6模块化语法

15.11.1 默认导出导入

15.11.2 按名字导出导入

15.12 Vue全家桶

️️16、扩展

️️16.1 link 和 @import 的区别

️️16.1.1 link

️️16.1.2 @import

️️16.2 JavaScript数组方法

️️16.3 解决跨域方案

️️16.4 接口的请求方法和restful api

️️16.5 Cookie、Session、token、localStorage、sessionStorage

️️16.5.1 Cookie

️️16.5.2 Session

️️16.5.3 token

️️16.5.4 localStorage

️️16.5.5 sessionStorage

️️17、Xmind笔记

️1、Vue和其他两大框架的区别

更多精彩内容欢迎访问我的个人博客皮皮猪：http://www.zhsh666.xyz或者http://www.zh66.club期待您的光临哦！我是皮皮猪，感谢各位光临，能为您排忧解难小站深感荣幸！祝您生活愉快！

• Angular 学习成本太高
• React 代码可读性差
• Vue 学习成本较低 很容易上手
  传送门 https://cn.vuejs.org/v2/guide/comparison.html

️2、Vue是什么

️3、MVVM

️4、Vue指令

️4.️1 v-text

️ v-text指令 和 {{ }}插值表达式 的区别

• v-text 会直接替换元素中的所有内容
• {{ }} 只会替换插值表达式中的占位符

️4.️2 v-html

️4.️2.️1 v-html指令 和 v-text指令的区别

• v-html 会将数据解析成html 渲染至页面
• v-text 只会输出成文本(字符串形式)

注意: 在网站上动态渲染任意的 HTML 是非常危险的!!! 因为容易导致 XSS 攻击 只在可信内容上使用 v-html 绝对不要用在用户通过(提交)的内容上使用

️4.️3 v-on

️4.️3.️1 详细用法

• @事件名.修饰符 = “事件处理函数”
• 逻辑比较少的可以直接写在行内
• 逻辑较多的写到 methods 中 注意: 操作Vue实例上的数据要跟上 this
• 可以通过实参传递($event) 获取事件参数e

1. $event.target 获取当前事件触发的DOM元素
2. $event.path0 也可以获取当前事件触发的DOM元素 path数组中有从触发事件源的元素的所有上一级元素 直到window
3. 实参不传递(没有任何参数) 默认在形参中第一个就是事件参数
   实参传递 就必须传递$event 来获取获取事件参数

️4.️3.️2 事件修饰符

• .stop
  阻止事件冒泡
• .prevent
  阻止事件默认行为
• .once
  只触发一次回调
• .native
  监听组件根元素的原生事件
  很重要！有些第三方组件可能内部并没有设置原生的事件 就可以通过.native来触发事件

面试问及

之前在使用饿了么UI的时候给一个组件添加一个原生的事件
但是一直触发不了
后面查阅文档发现这个组件内部并没有注册我使用的原生事件
事件修饰符.native就可以直接监听并触发组件的原生事件

• .capture
  添加事件侦听器时使用 capture 模式
• .{keyCode | keyAlias}
  只当事件是从特定键触发时才触发回调
• .left
  (2.2.0版本) 只当点击鼠标左键时才触发
• .right
  (2.2.0版本) 只当点击鼠标右键时才触发
• .middle
  (2.2.0版本) 只当点击鼠标中键时才触发
• .self
  只当事件使用侦听器绑定的元素本身触发时才触发回调
• .passive
  (2.3.0版本)以{ passive:true } 模式添加侦听器

️4.️4 v-bind

️4.️4.1 属性绑定修饰符

• .prop
  被用于绑定 DOM 属性 (property)
• .camel
  (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
• .sync
  (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器

️4.️4.2 对象的方式绑定class

• :class = "{'red' : isRed}"

isRed = true 就有red这个类
isRed = false 就没有red这个类
isRed 在 Vue 实例data中声明

• 默认的class 和 :class(绑定的class) 一起使用不会冲突 后面的会作为追加或者移除来解析

class = “red” :class = “{‘yellow’ : isYellow}”

️4.️4.3 对象的方式绑定style

• :style = "{fontSize : mySize + 'px'}"
• 样式名需要使用驼峰命名法
• 后面的mySize需要在Vue实例data中定义

️4.️5 v-model

️4.️5.️1 双向

• 视图层
• 数据层
  数据能够自动的从内存中显示到页面上去

️4.️5.️2 双向绑定修饰符

• .lazy
  懒载入 当表单属性失去光标或按下回车键后 再将页面中的数据和Vue实例中的数据双向绑定
• .trim
  输入的数据首位空格过滤
• .number
  输入字符串转为有效的数字

注意: v-model 只能设置给from表单属性

️4.️6 v-for

️4.️6.️1 :key

• 数据唯一标识绑定
• v-for默认行为试着不改变整体 而是替换元素 迫使其重新排序的元素需要提供一个key(用户删除数据后 数据需重新排列序号 就可以使用key来实现)
• 数据实现重用和重新排序现有的元素
• 值最好为字符串或数值类型(唯一的)

️4.️6.️2 遍历数组注意点

• Vue本身只是监视了Vue实例Data中数组的改变(监视内存地址) 没有监视数组内部数据的改变
• (变异方法)Vue重写了数组中的一系列改变数组内部数据的方法(先调用原生的方法 再更新页面) 所以实现了使用数组提供的方法 数组内部改变 界面自动改变

push()
pop()
shift()
unshift()
splice()
sort()
reverse()
…

• this.arr[index] = 新值

这种修改数组中的元素是无法实现数据改变后页面会同步改变(只会修改data中的数据 但是页面不会同步改变)

• splice()的增删改
  增 this.arr.splice(index,0,新值)
  删 this.arr.splice(index,1)
  改 this.arr.splice(index,1,新值)

️4.️7 v-if,v-else,v-else-if

️4.️7.️1 注意

v-if 和 v-else-if 后面必须跟表达式或布尔值
v-else-if 和 v-else 不能独立使用 必须跟在 v-if 后面

️4.️8 v-show

️4.️8.️1 注意

v-show 不支持 元素 也不支持 v-else

️4.️9 v-if vs v-show

都是用来判断渲染数据的

️4.️️10 v-cloak

️4.️️10.️1 详细说明

插值表达式在网络较满的情况下可能会出现数据闪烁问题
可以通过给实例(#app)盒子添加一个 v-cloak 指令
通过这个指令的特性(如页面中还有插值表达式就会存在这个指令 如果页面的插值表达式都被替换成数据 就会自动移除这个标签)
配合css [v-cloak]{display:none|opacity:0}来解决数据闪烁的问题

️4.️️11 v-once

️4.️️11.️1 用途

某些元素只需要解析一次 后续不需要更新 就可以使用这个指令 提升性能

️5、Vue实例

️5.️1 el

️5.️2 data

️5.️3 methods

️5.️4 computed

️5.️5 watch

watch:{XXX:{   deep:true,handler(newVal,oldVal){// 处理代码}}
}

watch: {// watch里面的 $router 这些对象前面不要带this"$route.path"(newVal, oldVal) {if (newVal.indexOf("/login") >= 0) {this.welcom = "欢迎登陆";}if (newVal.indexOf("/register") >= 0) {this.welcom = "欢迎注册";}}
}

  watch: {$route: function(newVal,oldVal) {console.log(this.$route.path);}}

️5.️6 computed和watch的区别

️5.️7 components

️5.️8 filters

Vue.filter("formatData", (形参=管道符前面的数据,形参=想要传入的数据...) => {处理数据； `返回`处理之后的数据
});

filters:{ formatTime(形参=管道符前面的数据,形参=想要传入的数据...){处理数据； `返回`处理之后的数据  }}

️6、Vue实例中的this

️7、Vue实例属性

️7.️1 vm.$data

获取data中的所有数据

️7.️2 vm.$options

用于当前Vue实例的初始化选项 可以获取自定义选项
new Vue({customOption: 'foo',created: function () {console.log(this.$options.customOption) // => 'foo'}
})

️7.️3 vm.$refs

️8、Vue组件

️8.️1 什么是组件

️8.️2 组件化和模块化的区别

️8.️3 全局组件

️8.️3.️1 用法

Vue.component('组件名',{参数})

• 1

️8.️3.️2 注意

组件名请使用小写
大写需要驼峰命名法

Vue.component('sayHiBaby',{参数})
页面中标签使用 <say-hi-baby></say-hi-baby>

• 1
• 2

️8.️3.️3 组件参数

• props:[‘xxx’]

父向子传参
通过 props 向子组件传递数据
可以在组件实例中通过 this.xxx 拿到传递过来的值
高级写法(props验证)

props:{xxx:{// 数据类型type:"String",// 必须传递required:"true",// 默认值default:"mystring"....}
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

props可以传递任何数据类型 包括函数

• data(){ return{ } }
  组件中的数据data是一个函数 将数据写在返回出去的对象中即可

为什么组件的data是一个函数 而Vue实例的data是一个对象?

1.每一个Vue组件都是一个Vue实例
2.都是通过new Vue() 创建出来的
3.如果data是一个对象的话 那么这些组件的引用指向就会相同
4.一个的值修改后 其他的值也会修改(这是JavaScript语法的特性)
5.如果data是一个函数 函数中再返回一个对象
6.那么每个Vue组件都有了自己的作用域 互不干扰

• template
  模版
  动态的HTML页面 包括一些JavaScript语法代码
  注意: 如果模版中包含多个标签 需要在最外层加一个div 作为根标签
• 其他参数和Vue实例的一致

️9、Vue生命周期钩子

️9.️1 三大阶段

️9.️1.️1 初始化显示

创建期间的生命周期函数(1次)

• 1

• beforeCreate()
  Vue实例被创建 但date和methods数据中的数据还没有被设置上去(未初始化)
• created()
  data和methods以及被初始化(已被设置在Vue实例上)但是还未开始模版编译
  常用 如果要操作data中的数据和methods中的方法 最早只能在created中调用
• beforeMount()
  开始解析模版编译 把数据和结构(模版)关联起来 但现在页面上还不能看到数据
• mounted()
  数据挂载完毕 页面中可以看到数据 当这个钩子函数执行完毕 创建期间的所有的生命钩子全部执行完
  常用 发送ajax请求 启动定时器等异步任务 操作DOM中的节点

Vue渲染解析插值表达式 并不是在页面中直接渲染解析 而是将整个挂载在Vue实例的模版 拿到内存中去解析 等全部解析完成后 再一次性的渲染到页面(批量) (因为有可能页面中有很多一样的data中的值 如果是在页面中直接渲染解析会很耗性能)

️9.️1.️2 更新显示

运行期间的生命周期函数(0次-多次)

• 1

• beforeUpdate()
  页面中的数据还是旧的 但Vue实例中的数据已经被更新 数据还未同步
• updated()
  页面和Vue实例中的数据已同步

️9.️1.️3 销毁

销毁期间的生命周期函数(1次)

• 1

• beforeDestory()
  开始进入销毁阶段 Vue实例中的方法和数据还能使用 还未真正销毁
  常用 做收尾工作 如:清除定时器…
• destoryed()
  已被完全销毁 Vue实例中的数据和方法不能再使用

想要销毁Vue实例 调用 vm.$destroy() 即可
注意: 这个方法方法并不会销毁Vue实例的一些如 定时器或计时器等方法
会造成 ‘内存泄漏’ 所以在完全销毁之前 需要在 beforeDestory 钩子中清除定时器等…

️️10、父子组件传参

️️10.️1 父传子

️️10.️2 子传父

️️11、VueRouter

️️11.️1 前端路由

url地址和组件之间的关系

️️11.️2 如果是模块工程化(VueCLI)中使用VueRouter

必须添加 Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

️️11.️3 路由起步代码

️️11.️3.️1 HTML

• router-link
  使用 router-link 来导航 最后会被渲染成a标签
  可以通过 tag属性 来设置最后被渲染的标签
  to属性 指定跳转的链接

<router-link to="/login" tag="span">登陆</router-link>
<router-link to="/logout" tag="span">注册</router-link>

• 1
• 2

• router-view
  router-view 路由出口 路由匹配到的组件将渲染到这里

<router-view></router-view>

• 1

️️11.️3.️2 JavaScript

• 定义组件

const login = { template: "#tempLogin" };
const logout = { template: "#tempLogout" };

• 1
• 2

• 定义路由

const routes = [{ path: "/login", component: login },{ path: "/logout", component: logout }
];

• 1
• 2
• 3
• 4

• 创建路由

const router = new VueRouter({routes
});

• 1
• 2
• 3

• 绑定路由
  在Vue实例中 绑定router

new Vue({el:"xxx",router
})

• 1
• 2
• 3
• 4

️️11.️4 路由高亮

设置路由匹配成功后 router-link 的样式属性

/login => /login/user
触发 添加样式

/login/user => /login/user
触发 添加样式

️️11.️5 声明式导航

️️11.️6 编程式导航

️️11.️7 动态路由匹配

️️11.️8 路由重定向

️️11.️9 前置导航守卫

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {// ...next()
})
to

from

next()

️️11.️️10 路由元信息

️️11.️️11 嵌套路由

{ path: '/user', component: User,children: [{path: 'index',component: Index}]
}

️️11.12 统一404页面

配置错误路由规则

️️11.️13 路由懒加载

️️12、资源请求

️️12.️1 Axios

️️12.️1.️1 Axios是什么?

Axios是一个基于 promise(实现了链式调用)` 的 HTTP 库 可以用在浏览器和 Node.js 中 专注于发请求 专注于网络请求的一个库

• 1

️️12.️1.️2 CDN

️️12.️1.️3 .then

成功回调

️️12.️1.️4 .catch

失败回调

️️12.️1.️5 get请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});// 可选地，上面的请求可以这样做
axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

️️12.️1.️6 post请求

axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

️️12.️1.️7 基地址

基础的地址应用 没有必要每次都写 可以直接抽离出来

axios.defaults.baseURL = '设置的基地址'
Vue.prototype.$axios = axios

• 1
• 2

axios填写路径时后面直接写对应的路径即可
前面的公共部分不需在写(写了也不会影响)

️️12.️1.️8 设置跨域携带cookie

axios.defaults.withCredentials = true

️️12.️1.️8.️1 面试问及

• 坑点 axios 跨域默认不携带cookie
• 某个项目 登陆状态的判断 后端用的是cookie
• 登陆成功之后 服务器返回了cookie 标记登陆
• 但axios在请求不同源的接口时 默认不会携带cookie
• 所以后端接口后续一直无法获取登陆状态
• 抓包后检测网络请求 发现浏览器并没有把服务器返回的cookie给保留
• 所以导致每次都没设置成功cookie (set-cookie)
• 设置 axios.defaults.withCredentials = true
• 允许跨域携带cookie 这样浏览器就能在跨域的时候存下cookie
• 浏览器中无法直接查看跨域的cookie 浏览器隐藏了 可以通过抓包查看

️️12.️1.️9 创建克隆对象 多基地址设置

const xxx = axios.create({// 即地址baseURL: 'https://some-domain.com/api/',// 可以统一设置请求头headers: {Authorization: token}
});
xxx.get()
xxx.post()

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 只需要使用axios的create创建多个副本 每个副本设置一个不同的基地址
• 请求某个基地址的时候 使用该副本的对应方法即可

️️12.️1.️10 Axios拦截器

️️12.️1.️10.️1 请求拦截器

axios.interceptors.request.use(function (config) {// 可以在发请求之前在这里设置一些请求头`config.headers.Authorization=token`return config;}, function (error) {// Do something with request errorreturn Promise.reject(error);});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

️️12.️1.️10.️2 响应拦截器

axios.interceptors.response.use(function (response) {// 可以在获取响应数据之后设置一些提示 如获取失败/成功`response.data.code == 200?`return response;}, function (error) {// Do something with response errorreturn Promise.reject(error);});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 可以在响应拦截器中判断token是否造假
• 是造假则可以直接清除本地的token…

️️12.️2 vue-resource

️️13、Vue动画钩子

️️13.️1 Vue动画钩子是什么?

️️13.️2 Vue动画的理解

// 指定显示的transition
xxx-enter-active
// 指定隐藏的transition
xxx-leave-active
// 指定隐藏时的样式
xxx-enter/xxx-leave-to

️️13.️3 单个元素动画

️️13.️4 列表过渡动画

️️13.️5 name

️️13.️6 tag

️️13.️7 过渡类名参数

️️13.️8 动画时机

️️13.️9 动画钩子代码

️️13.️9.️1 HTML

<transitionv-on:before-enter="beforeEnter"v-on:enter="enter"v-on:after-enter="afterEnter"v-on:enter-cancelled="enterCancelled"v-on:before-leave="beforeLeave"v-on:leave="leave"v-on:after-leave="afterLeave"v-on:leave-cancelled="leaveCancelled"
><!-- ... -->
</transition>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

️️13.️9.️2 JavaScript

// ...
methods: {// --------// 进入中// --------beforeEnter: function (el) {// ...},// 当与 CSS 结合使用时// 回调函数 done 是可选的enter: function (el, done) {// ...done()},afterEnter: function (el) {// ...},enterCancelled: function (el) {// ...},// --------// 离开时// --------beforeLeave: function (el) {// ...},// 当与 CSS 结合使用时// 回调函数 done 是可选的leave: function (el, done) {// ...done()},afterLeave: function (el) {// ...},// leaveCancelled 只用于 v-show 中leaveCancelled: function (el) {// ...}
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43

️️13.️️10 过渡动画生命周期

️️14、VueX

️️14.1 Vuex是什么?

️️14.2 起步

️️14.2.1 下载

npm install vuex --save

️️14.2.2 创建VueX仓库

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {// 数据count: 0},mutations: {// 方法increment (state) {state.count++}}
})new Vue({el:xxx,// 挂载到Vue实例上store
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

️️14.2.3 在组件中获取VueX的数据

• HTML
  {{$store.state.count}}
• JavaScript
  this.$store.state.count

️️14.2.4 在组件中修改VueX的数据

• VueX修改数据必须通过 mutations 中的方法修改数据
  this.$store.commit(''mutations中的方法,'参数')

️️14.3 VueX - state

️️14.4 VueX - mutation

️️15、VueCLI

️️15.1 单文件组件

️️15.1.1 用一个文件能够包含组件的所有内容

• 结构

<template>
</template>

• 1
• 2

• 逻辑

<script>
export default {
}
</script>

• 1
• 2
• 3
• 4

• 样式

<style>
</style>

• 1
• 2

️️15.1.2 单文件开发的好处

• 更利于编码
• 利于后期维护
• 一个文件包含了所有内容

️️15.2 什么是Vue-CLI

️️15.3 搭建一个脚手架

️️15.4 Vue-CLI搭建项目的本质

15.5 Vue-cli项目结构

15.6 搭建webpack-vue脚手架(详细版本)

15.7 webpack-vue项目结构

|-- build : webpack 相关的配置文件夹(基本不需要修改) |-- dev-server.js : 通过 express 启动后台服务器
|-- config: webpack 相关的配置文件夹(基本不需要修改)|-- index.js: 指定的后台服务的端口号和静态资源文件夹
|-- node_modules 
|-- src : 源码文件夹|-- components: vue 组件及其相关资源文件夹 |-- App.vue: 应用根主组件|-- main.js: 应用入口 js
|-- static: 静态资源文件夹
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 检查忽略的配置
|-- .eslintrc.js: eslint 检查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主页面文件
|-- package.json: 应用包配置文件
|-- README.md: 应用描述说明的 readme 文件

15.8 Vue-CLI项目编码

15.8.1 编码位置

• 组件的逻辑直接写在xxx.vue中
• 静态资源放在assets文件夹下面 直接使用对应路径引用即可

15.8.2 引入css

• 全局引入
  main.js => import "路径"
• 局部引入
  组件内的script标签 => @import url("路径")

15.8.3 注册组件

• 全局组件
  引入在main.js中
  import 组件 from 地址
Vue.component('组件名',组件)
  任意地方都可以使用 将组件名作为标签名 一次注册 全部使用
• 局部组件
  在需要用到这个组件的地方 导入import 组件名 form '地址'
  导入后 设置给components 就可以在导入的组件中通过组件名使用该组件
  根据使用的位置 决定局部或者全局注册 只在某些地方用 用局部组件
• 组件中的name属性
  直接在组件的内部写name:值即可
  不能用中文
  写了只会 Chrome的Vue插件中就可以看见这个名字 更加利于检索 利于编码

15.8.4 整合路由

15.8.4.1 下包

npm install vue-router

15.8.4.2 导包

import VueRouter from 'vue-router'

15.8.4.3 用包

• 创建路由规则
  在components文件夹下创建一个组件xxx.vue
import 组件名 from '组件路径'
const routes = [{path:"/xxx/:xx},component:组件名]
• 创建路由对象

`const router = new VueRouter({routes
})`

• 1
• 2
• 3

• 设置给Vue实例

`new Vue({router
})`

• 1
• 2
• 3

15.8.4.4 编码位置

• 导入 注册路由 main.js
• router-link router-view app.vue
• 添加组件components
• 静态资源assets

15.9 在Vue中使用其他插件

15.9.1 面试问及

• Vue原型用过没
• 为了共享 将插件设置在Vue原型上
• 所有组件都是Vue的实例
• 所有在其他组件中 可以通过 this.$XXX 获取

15.10 css预处理与css作用域

15.10.1 css预处理

15.10.1.1使用less

• 下载
  -npm install -D less-loader less
• 使用
  <style lang='less'></style> 也可以直接导入less文件

15.10.1.2 使用sass

• 下载
  -npm install -D sass-loader node-sass
• 使用
  <style lang='scss'></style> 也可以至今导入scss文件

15.10.2 css作用域

• 为style标签 添加 scoped 属性即可
• 生成样式，和渲染组件时

为元素添加随机属性
样式中添加属性选择器
2者结合 就把css的作用范围 约束

• 为了不影响其他 可以添加这个属性
• 注意
  样式的属性是随机生成的 如果要修改样式
  直接修改在scoped中的样式 不要抽离成样式文件导入

15.11 ES6模块化语法

15.11.1 默认导出导入

15.11.2 按名字导出导入

15.12 Vue全家桶

️️16、扩展

️️16.1 link 和 @import 的区别

️️16.1.1 link

• link是html提供引入样式的标签
• link没有兼容性问题
• 可以通过JavaScript来控制link标签 修改样式文件路径
• 会和html一起加载

️️16.1.2 @import

• @import是提供的提供导入样式的方法
• @import有兼容问题 ie5以下不支持
• 不能通过JavaScript来操纵@import
• 等html全部加载完毕后再加载@import

️️16.2 JavaScript数组方法

const oldArr = ["dajsk", "dkjdklas", "kgjftlk", "ksf", "ds", "mfksjjks"];
let res = oldArr.filter((val, index) => val.indexOf("d") != -1); // 返回所有匹配成功的值
console.log(res); // [ 'dajsk', 'dkjdklas', 'ds' ]

const oldArr = ["dajsk", "dkjdklas", "kgjftlk", "ksf", "ds", "mfksjjks"];
let res1 = oldArr.find((val, index) => val.indexOf("d") != -1); // 返回匹配的第一个值
console.log(res1); // dajsk

const oldArrMap = [3, 4, 7, 1, 8, 5];
let res2 = oldArrMap.map((val, index) => {// 将匹配成功的值做对应的计算后再次返回if (val > 5) {val = val * 2;}return val;
});
console.log(res2); // [ 3, 4, 14, 1, 16, 5 ]

const oldArrForEach = [3, 6, 8, 2, 8, 0];
let num = 0;
oldArrForEach.forEach((val, index) => {num += val;
});
console.log(num); // 27
oldArrForEach.forEach((val, index) => {if (index == 2) return console.log(val); // 8
});

️️16.3 解决跨域方案

️️16.4 接口的请求方法和restful api

️️16.5 Cookie、Session、token、localStorage、sessionStorage

️️16.5.1 Cookie

• 用来解决http 是无状态 的
• 什么是无状态？

每次请求 浏览器和服务器交互完毕后 彼此并没有留下什么
继续请求 也无法判断你是谁
如登陆功能
为了能够保存一些信息
服务器返回响应报文时 会偷偷的带一个响应头
作用是在浏览器中偷偷保存一些信息set-cookie
浏览器接收到这个响应头后 会在本地保存这个响应头
第二次请求时 浏览器就会自动带上这个信息去服务器
服务器接收到这个信息 就知道你是谁了
ajax跨域请求 默认不携带cookie 需要设置
跨域cookie在浏览器中无法看到 需要抓包

️️16.5.2 Session

Seesion 是将用户数据存储在服务器中
通过sessionId来验证查找服务器中的用户信息
sessionId一般是存放在浏览器的cookie中的

所以Session需要配合浏览器的cookie或者浏览器的其他存储技术一起使用

️️16.5.3 token

和cookie差不多 也可以记录登陆状态
服务器生成的
通过用户浏览器版本、用户信息…生成的一个密钥

浏览器不会自动保存
可以接口本地存储来保存token
浏览器不会自动携带发送
每次请求接口时可以通过headers携带存储的token
headers{ Authorization ：token }

️️16.5.4 localStorage

可以把数据存储到本地(浏览器) 只要用户不删除 则会一直保存 每个域名都是独立的保存数据 不同域名不能互相访问 长久保存数据可以存储到 localStorage 可以存储5M数据

• 保存数据 localStorage.setItem(key,value)
• 获取数据 localStorage.getItem(key) => 如果没有这个数据 则返回 null
• 删除一个数据 localStorage.removeItem(key)
• 清空所有数据 localStorage.clear()

️️16.5.5 sessionStorage

短暂存储数据 可以多页面传值 相当于localStorage会更安全 浏览器关闭后就不会保存了 可以存储5M数据

• 保存数据 sessionStorage.setItem(key,value)
• 获取数据 sessionStorage.getItem(key) => 如果没有这个数据 则返回 null
• 删除一个数据 sessionStorage.removeItem(key)
• 清空所有数据 sessionStorage.clear()

️️17、Xmind笔记