LANMIO

vue基础综合

基于脚手架创建项目：

需要安装准备好的底层环境：node环境，vue-cli脚手架

安装node：地址 node -v查看版本
安装vue-cli脚手架：

npm install -g @vue/cli 全局安装（不能创建vue 2.x项目）

npm install -g @vue/cli-init （作为桥接，创建vue 2.x项目）
创建项目：vue create 【项目名】
初始化：npm install

下载package.js里面的包和插件等，放置在node_modules中
开启服务：npm run serve

安装的库

npm install 指定的插件@4.1.0 --save

项目中安装生产模式的router：npm install vue-router --save
安装axios：npm install axios
安装生产模式的vuex：npm install vuex --save
安装less和less-loader：npm install less less-loader@7 --save
安装 npm install --save js-cookie
安装虚拟接口调试：npm install mockjs -D
安装UI库:

报错：Syntax Error: TypeError: this.getOptions is not a function

解决方案：less-loader 版本太高需要降低到 7版本

报错跨域问题：

解决：需要 import ‘./mock’，即将拦截的文件以及数据统一放到main.js中

创建Mock数据接口（假数据）：

一、基础介绍

1.Vue实例选项

`el`

作用：指定、设置，当前Vue实例所管理的视图。

值可以是id
值可以是其他选择器
值可以为DOM元素

注意：不能让el直接管理html或者body 报错！！ mount->挂载

`data`

作用：指定、设置当前Vue实例所用的数据。

值可以是一个对象{}、数组[]、字符串”“、数字：1
data中的数据，可以通过Vue实例对象.属性名去访问数据
访问数据可以通过app.massge访问

特点：响应式数据（当数据变化时，视图中的数据会自动发生变化）

`methos`

作用：放置自定义函数。

可以在视图中通过{{}}调用方法
可以通过app对象.方法名去调用方法（app.data.paly()）
方法中的this指的是当前的Vue实例对，即app

注意：不推荐些箭头函数，因为箭头函数this指向的不是实例本身，即app本身

`watch`

作用：当被监测的数据发生变化时会触发方法，要进行异步操作的时候。

被监测的数据名：函数（）
msg:function (newVal,oldVal) {}

2.Vue专业术语解析

插值表达式作用：会将绑定的数据实时的显示出来
- 通过任何方式修改所绑定的数据，所显示的数据都会被实时替换{{js表达式、三目预算符、方法调用等}}
- 不能写var a = 10；分支语句循环语句
指令：是带有v-前缀的特殊特性，增强html功能
- 所有的指令都在开始标签位置
- 每个指令都是为了取代DOM操作

3.关于ES6相关语法问题：

展开运算符的结构解析

<let a = [1,2,3];
let b = [0, ...a, 4]; 
b返回的数组为 [0,1,2,3,4]，得出结论：展开运算符可以直接在数组内直接使用，同时可以生成一个新数组。

let obj = { a: 1, b: 2 };
let obj2 = { ...obj, c: 3 }; 
// { a:1, b:2, c:3 }
let obj3 = { ...obj, a: 3 }; // { a:3, b:2 }>

注意：展开运算符不能直接使用：
即：console.log(…person)//报错，展开运算符不能展开对象，需要使用{}进行包裹：因为console.log输出的是运算后的结果，即为表达式。

ES6中模板字符串的使用:

使用场景：字符串中需要包裹变量的时候

你输入的用户名是：${username.value},你输入的密码是${password.value}

高阶函数：

简介：一个函数复合下面两个规范中的任何一个，那么函数就是高阶函数。
若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。

常见的高阶函数：Promise、setTimeout
函数的柯里化：通过函数调用继续返回函数的方式，实现多次接受参数最后统一处理的函数编码形式

结构赋值语句/连续解构

从数组第一个对象元素中提取某个属性，比如：err 对象中包含一个 errors 数组，errors 数组每一个对象都包含一个 msg 属性

err = {
  errors: [
    {
      msg: 'this is a message'
    }
  ]
}

快速的提取方法为：

const [{ msg }] = err.errors
或
const [ obj ] = err.errors
const { msg } = obj

如果不用解构写法为：

const msg = err.errors[0].msg

模块引入和暴露：

//模块引入
//方式一：
import m1 from './main.js'

//解构赋值形式
import {m1,m2} from './main.js'
//取别名的方式
import {m1 as guigu} from './main.js'


//模块导出
export let school = 'guigu'

export {
	school,
    school1
}

//默认导出
export default{
    school,
    school1
}

二、系统指令：

具体方式方法：见vue.js官网中的学习API中

1.：动态文本

v-taxt：更新标签中的内容

v-text和插值表达式的区别：

v-text更新整个标签中的内容

插值表达式{{}}：更新标签中局部的内容

v-html：更新标签中的内容/标签(也可以替换标签中的全部内容)

注意事项：

可以渲染内容中的HTML标签

尽量避免使用，容易造成攻击

2. <指令v-on>：绑定事件监听器

作用：绑定DOM事件监听器，并在时间被出发时执行一些JavaScript。

语法：v-on 简写为@

@事件名.修饰符 = ”methods中的方法名“

常用修饰符：事件修饰符，once和prevevt等。

注意：$event用来传递事件对象。

3.<指令v-for>：渲染内容

列表渲染：

语法：

v-for="item in 数组"  
v-for="(item,index) in 数组"
// item指的时数据中每个元素的值，index指的是每个数字所在数组的索引、下标

对象渲染：

语法：

v-for="(item,index) in 对象"

注意事项：vue建议我们给每个循环遍历的标签li 加key属性，key属性值特点要求是唯一值,key值为下标、索引，value值，key名

作用：vue渲染页面是，根据key的标识找到每一个元素，效率更高，关系到虚拟DOM的对比。

5.<指令v-bind>：动态绑定数据

作用：动态绑定标签的任何属性，例如input 中的 value属性

场景：当标签属性值是不确定的是可以修改的

语法：v-bind：要绑定的属性名=“data中的数据”

简写：去掉v-bind，即：，例如：src/：id

//绑定class-对象:
<p v-bind:class="{active:a,left:b}">内容p>           

data:{
    a:ture,
    b:false
}
//解析：通过动态来绑定class的类名

           
//绑定class-数组:
<p :class="[left,active]">内容p>
data：{
    left:"a",
    active:"b",
}
//解析：通过数组的方式，同时绑定多个类名。

//绑定style-对象
<p :style="{fontSize:a,color:b}">1236p>
data:{
    a:"25px",
    b:"#f5f5f5",
}

//绑定style-数组
//语法：数组语法，数组里面包含的是对象
<p :style="[a,b]">1236p>
data:{
     a:{
         'color':"#d00c0c"
     },
     b:{
         'fontSize':'25px',
     }
 }

6.<指令v-model>：数据的双向绑定

特点：双向数据绑定,数据发生变化可以更新到界面，通过界面可以更改数据,当在视图修改数据值时，data中的数据也会相应发生变化。

注意事项：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源，应该在data选项中声明初始值。

表单元素的应用：

多行文本输入框：textarea标签内容是无效的
复选框：
- 一个复选框v-model=“布尔值”
- 多个复选框v-model=“同一个数组”
单选按钮radio：
- 多个单选按钮绑定v-model=“同一个数据”
下拉框select+option：
- 显示默认项v-model=“select”和默认option的value值一致
- select值是选中对应value值

数据双向绑定实现的原理：

1.动态绑定数据，当data里面数据变化时，页面上的数据也会发生变化。

2.通过监听事件@input来触发事件，然后在事件中修改绑定的数据，即可实现数据的伪双向绑定。

场景：实现一个自定义v-mode的形式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Boi8gdwf-1619607904201)(img\1603104634638.png)]

7.：动态显示

v-if：

简介：根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

v-show:

简介：根据表达式之真假值，切换元素的 display CSS property。在切换的时候，不会被销毁

当条件变化时该指令触发过渡效果。

keep-alive :

简介：等价于v-show，复杂的组件使用keepalive 简单的可以使用v-show来提高性能

场景：缓存组件，频繁切换，不需要重复渲染的情况，vue常用性能优化方案之一

三、过滤器详解(filters)

简介：过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

语法：

<p>处理后：{{msg | toUpper(200)} | toLower}</p>

//js
filters: {
  toUpper(value,other) {
	return value.toUpper()
  },
  toLower(value){
	return value.toLowerCase()
  }
}

解析：

1）传参数：

value参数：是msg，用来处理。
other参数：模板p给予的数据

2）串联：

toLower 处理的是 toUpper 所return的结果

过滤器的文档分析

1）场景：当数据格式需要处理时（文本格式化）
2）分类：全局和局部（本地）
3）使用位置：{{}}和v-bind：属性=“”

全局过滤器

1）全局过滤器：在newVue之前

步骤
1.在newVue之前Vue.filter('过滤器名字‘，function（）{}定义过滤器
2.在过滤器的函数中实现具体的格式处理fuction(v){}
3.在啊视图中使用过滤器{{msg | 过滤器名字}}

四、自定义指令

简介：有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子。

**应用场景：**自定义指令获取 DOM 元素

语法：使用 directive 实例选项

//html
<input v-focus>

//js
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

案例代码：实现一个自定义v-mode的形式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EQOzuQiT-1619607904206)(img\1603104634638.png)]

钩子函数：

简介：一个指令定义对象可以提供如下几个钩子函数 (均为可选)

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

钩子函数参数：

el：指令所绑定的元素，可以用来直接操作 DOM.
```
binding
```
：一个对象，包含以下 property：
- name：指令名，不包括 v- 前缀。
- value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
- arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
- modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

ref操作DOM:

场景：在Vue操作dom元素.

生命周期函数：mounted获取要操作的dom元素this.$refs.ref属性值。

$nextTick函数(重要)

场景：vue是异步渲染的框架，react也是，data改变之后，dom不会立刻渲染，$nextTick会在dom渲染之后被触发。

作用：以获取最新dom节点。

案例代码：

this.$nextTick(()=>{ //在节点渲染完成后才会调用
    console.log(this.$refs.ulDemo)
})

五、计算属性（computed）

简介：在模板中可以把computed当作data属性来使用，computed是一个对象，每个键是计算属性的值，注意：computed有缓存，data不变则不会重新计算。

使用场景：表达式、当数据A的逻辑很复杂时，把A这个数据卸载计算属性中;或者data中的数据b依赖了数据a

值有两种使用方法:

值是一个函数，必须要有return
值是一个包含get和set的对象

案例代码：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-08Lnw8Nf-1619607904208)(img\1602805842921.png)]

解析：get()在数据绑定后，相当于直接赋值给模板中。

set()会在数据改变时触发（数据绑定必须为双向的）

六、监听数据：（watch）

简介：watch是vue内部提供的一个用于侦听功能的更通用的方法，其用来响应数据的变化，通过特定的数据变化驱动一些操作。

基本的书写方式：

解析：newValue:监听新的变化值，oldValue上一次的值

watch:{
    message(newValue,oldValue1){
        console.log(newValue,oldValue)
        this.message = newValue
}

监听对象：

如果对象内有多个属性，并采用以下写法，则对象内每个属性都会被侦听，每个属性的变化都会执行一次侦听操作

解析：侦听普通变量的变化是使用以上方法，当侦听的某个变量值是对象时则不起作用，这时需要使用deep深度监听。当未设置immediate或者immediate的值为false时，被侦听的变量在页面初次加载时第一次绑定值的时候，并不会执行监听操作；但是当设置了immediate的值为true时，则会立刻执行一次监听操作。

'deepMessage.a.b':{
    handler:'handerFun',
    deep:true,  //是否深度监听
    immediate:true  //监听第一次
}

 deepMessage:{
     handler:'handerFun',
     deep:true,  //是否深度监听
     immediate:true  //监听第一次
}

监听数据，相应多个函数时：

lastMessage:[
    {
        handler:'lastFun'
    },
    'lastFun1',
    function(value){
        console.log(value)
    }
]

七、组件基础

1.组件是特殊的Vue实例

可以任意次数的复用
每用一次组件，就会有一个它的新实例被创建
组件中的data要求必须是一个函数，且需要返回一个对象，组件有自己的作用域。
template每个组件模块有且只有一个根元素

建议：在实际开发中，尽量可能使用各种第三方组件

2.组件特点

组件体现封装思想（html+css+js）
组件是特殊的vue实例（data、methods等选项）
- 组件可以使用vue选项（没有el）
- 有自己的选项，如template（要求有一个根元素）
data（）{return{数据a：值}}
尽可能的使用第三方组件element-ui/mint/iview

3.全局组件:定义位置在newVue之前

定义组件Vue.component()
封装的具体内容（通过选项完成）

4.局部组件：通过选项component

注册局部组件：{组件名：{选项}}
设置选项{template或者data等}
使用组件 <组件名>

5.组件嵌套

newVue所管理的视图相当于整个项目的根组件
组件是父组件还是子组件与该组件在视图中使用的位置有关系,与该组件是全局还是局部组件没有关系

6.组件通信

兄弟组件之间组件a->组件b
父子组件之间父->子子->父
隔代租价之间爷->父->子

7.组件和模块的区别

模块：具有独立功能的js文件比如math.js
组件：封装的时html/css/js

八、组件的形式：

slot：插槽

简介：通过插槽分发内容，将元素作为承载分发内容的出口。插槽内可以包含任何模板代码，包括 HTML，甚至是组件。

场景：和 HTML 元素一样，我们经常需要向一个组件传递内容。

基础案例：

//插入文本
<navigation-link url="/profile">
  Your Profile
navigation-link>

//插入HTML
<navigation-link url="/profile">
  
  <span class="fa fa-user">span>
  Your Profile
navigation-link>

//插入组件
<navigation-link url="/profile">
  
  <font-awesome-icon name="user">font-awesome-icon>
  Your Profile
navigation-link>


//navigation-link组件里面
<a v-bind:href="url" class="nav-link">
  <slot>slot>
a>

解析：slot会被替换成Your Profile”。

注意事项：如果的 template 中没有包含一个元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。

1.编译作用域（了解）

场景：在插槽使用数据时。

注意事项：该插槽跟模板的其它地方一样可以访问相同的实例 property (也就是相同的“作用域”)，而不能访问的作用域。例如 url 是访问不到的：

案例代码：

<navigation-link url="/profile">
  Logged in as {{ user.name }}
navigation-link>


<navigation-link url="/profile">
  Clicking here will send you to: {{ url }}
  
navigation-link>

//父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

2.后备内容：

作用：设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。

案例：

<button type="submit">
  <slot>Submitslot>
button>

//现在当我在一个父级组件中使用 <submit-button> 并且不提供任何插槽内容时：
<submit-button>submit-button>
    
//但是如果我们提供内容：
<submit-button>
  Save
submit-button>

3.具名插槽：

场景：需要使用多个插槽的时候。

特别注意：v-slot 只能添加在

属性名	类型	作用
$route.path	string	字符串，对应当前路由的路径，总是解析为绝对路径，如 `"/foo/bar"`。
$route.params	Object	一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
$route.query	Object	一个 key/value 对象，表示 URL 查询参数。例如，对于路径 `/foo?user=1`，则有 `$route.query.user == 1`，如果没有查询参数，则是个空对象。
$route.hash	string	当前路由的 hash 值 (带 `#`) ，如果没有 hash 值，则为空字符串。
$route.fullPath	string	完成解析后的 URL，包含查询参数和 hash 的完整路径。
$route.redirectedFrom		如果存在重定向，即为重定向来源的路由的名字。(参阅重定向和别名)
$route.name		当前路由的名称，如果有的话。(查看命名路由)

vue基础综合

基于脚手架创建项目：

创建Mock数据接口（假数据）：

一、基础介绍

1.Vue实例选项

el

data

methos

watch

2.Vue专业术语解析

3.关于ES6相关语法问题：

展开运算符的结构解析

ES6中模板字符串的使用:

高阶函数：

结构赋值语句/连续解构

模块引入和暴露：

二、系统指令：

1.：动态文本

2. <指令v-on>：绑定事件监听器

3.<指令v-for>：渲染内容

5.<指令v-bind>：动态绑定数据

6.<指令v-model>：数据的双向绑定

7.：动态显示

三、过滤器详解(filters)

过滤器的文档分析

全局过滤器

四、自定义指令

钩子函数：

钩子函数参数：

ref操作DOM:

$nextTick函数(重要)

五、计算属性（computed）

值有两种使用方法:

六、监听数据：（watch）

基本的书写方式：

监听对象：

监听数据，相应多个函数时：

七、组件基础

1.组件是特殊的Vue实例

2.组件特点

3.全局组件:定义位置在newVue之前

4.局部组件：通过选项component

5.组件嵌套

6.组件通信

7.组件和模块的区别

八、组件的形式：

slot：插槽

1.编译作用域（了解）

2.后备内容：

3.具名插槽：

4.作用域插槽：

5.解构插槽prop：

动态组件：

异步组件：

九、组件间的数据传递：

1.父子组件间传递：

2.中央事件总线：

3.多层嵌套 数据从顶向下。

4.父子组件间的传递- p a r e n t + parent+ parent+children[n]，为直接取值方式

5.孙辈之间的数据传递： (未解决)

十、spa-路由的应用

路由模式：

路由的基本使用：

HTML

JavaScript

动态路由匹配：

路由对象属性：

嵌套路由：

编程式导航：

路由：重定向

路由：传参

1.router-link

2.编程式导航：

路由守卫：

全局前置守卫

十一、网络请求

十二、组件生命周期方法

创建期间的生命周期

1、beforeCreate

2、created

`el`

`data`

`methos`

`watch`

3.多层嵌套数据从顶向下。

4.父子组件间的传递- $p a r e n t +$ children[n]，为直接取值方式