VUE学习随笔

1、基础和语法

vue指令大全

// ES5中的var是没有块级作用域的(if/for)
// ES6中的let是有块级作用的(if/for)

v-model本质上是一个语法糖。
主要用于表单获取

代码<input v-model="test">
本质上是
<input :value="test" @input="test = $event.target.value">
v-model.lazy只有当焦点移除input时才会触发事件

2、vue函数结构

  const app = new Vue({
     
    //绑定操作对象
    el: '#app',    
    
    //vue的数据
    data: {
            
      firstName: 'Lebron',
      lastName: 'James'
    },
    // computed: 计算属性()
    computed: {
     
      fullName: function () {
     
        return this.firstName + ' ' + this.lastName
      }
    },
    //函数方法
    methods: {
     
      getFullName() {
     
        return this.firstName + ' ' + this.lastName
      }
    }
  })

3、组件

组件中的data是函数
原因：

组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响

Vue组件封装过程

● 首先，使用Vue.extend()创建一个组件

● 然后，使用Vue.component()方法注册组件

● 接着，如果子组件需要数据，可以在props中接受定义

● 最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法

组件创建的三种方法

A、调用Vue.extend()，创建名为myCom的组件，template定义模板的标签，模板的内容需写在该标签下

var myCom = Vue.extend({
     
    template: '
这是我的组件
'
})

B、标签创建，需要加上id属性

<template id="myCom">
    <div>这是template标签构建的组件</div>
</template>

C、

<script type="text/x-template" id="myCom1">
    <div>这是script标签构建的组件</div>
</script>

注册组件的两种方法

A1、全局注册：一次注册( 调用Vue.component( 组件名称，为组件创建时定义的变量 ) )，可在多个Vue实例中使用。

我们先用全局注册，注册上面例子中创建的myCom组件

Vue.component('my-com',myCom)

A2、全局注册语法糖：不需要创建直接注册的写法

Vue.component('my-com',{
     
    'template':'
这是我的组件
'
})

'my-com’为给组件自定义的名字，在使用时会用到，后面myCom对应的就是上面构建的组件变量。

A3、如果是用template及script标签构建的组件，第二个参数就改为它们标签上的id值

Vue.component('my-com',{
     
    template: '#myCom'
})

B1、局部注册：只能在注册该组件的实例中使用，一处注册，一处使用

var app = new Vue({
     
    el: '#app',
    components: {
     
        'my-com': myCom
    }
})

B2、局部注册语法糖：

var app = new Vue({
     
    el: '#app',
    components: {
     
        'my-com': {
     
           template: '
这是我的组件
'
        }
    }
})

B3、及

var app = new Vue({
     
    el: '#app',
    components: {
     
        'my-com': {
     
           template: '#myCom'
        }
    }
})

组件通信

组件通信的几种方式

插槽

插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。
插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制

默认使用方法

子组件(slotOne1)
在子组件中写入slot，slot所在的位置就是父组件要显示的内容

<template>
  <div class="slotOne1">
    <div>我是slotOne1组件</div>
    <slot></slot>
  </div>
</template>

父组件

<template>
  <div>
    我是父组件
    <slotOne1>
      <p style="color:red">我是父组件插槽内容</p>
    </slotOne1>
  </div>
</template>

具名插槽

子组件
在子组件中定义了三个slot标签，其中有两个分别添加了name属性header和footer

<template>
  <div class="slottwo">
    <div>slottwo</div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

父组件
在父组件中使用template并写入对应的slot值来指定该内容在子组件中现实的位置（当然也不用必须写到template），没有对应值的其他内容会被放到子组件中没有添加name属性的slot中

<template>
  <div>
    我是父组件
    <slot-two>
      <p>啦啦啦，啦啦啦，我是卖报的小行家</p>
      <template slot="header">
          <p>我是name为header的slot</p>
      </template>
      <p slot="footer">我是name为footer的slot</p>
    </slot-two>
  </div>
</template>

插槽的默认内容

子组件

<template>
  <div class="slottwo">
    <slot>我不是卖报的小行家</slot>
  </div>
</template>

父组件

<template>
  <div>
    我是父组件
    <slot-two></slot-two>
  </div>
</template>

作用域插槽

编译作用域

子组件

<template>
  <div class="slottwo">
    <slot></slot>
  </div>
</template>

父组件

<template>
  <div>
    我是父组件
    <slot-two>
      <p>{
     {
     name}}</p>
    </slot-two>
  </div>
</template>
<script>
export default {
     
  data () {
     
    return {
     
      name： 'Jack'
    }
  }
}
</script>

作用域插槽

子组件
在子组件的slot标签上绑定需要的值

<template>
  <div>
    我是作用域插槽的子组件
    <slot :data="user"></slot>
  </div>
</template>

<script>
export default {
     
  name: 'slotthree',
  data () {
     
    return {
     
      user: [
        {
     name: 'Jack', sex: 'boy'},
        {
     name: 'Jone', sex: 'girl'},
        {
     name: 'Tom', sex: 'boy'}
      ]
    }
  }
}
</script>

父组件

在父组件上使用slot-scope属性，user.data就是子组件传过来的值

<template>
  <div>
    我是作用域插槽
    <slot-three>
      <template slot-scope="user">
        <div v-for="(item, index) in user.data" :key="index">
        {
     {
     item}}
        </div>
      </template>
    </slot-three>
  </div>
</template>

4、ebpack

核心功能，为什么用他?

1.打包:可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。

2.转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。

3.优化:前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。

4.Webpack在生产环境中有一个重要的作用就是减少http的请求数

以上三点即是它=他的核心作用。

安装

安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm

全局安装webpack

npm install wbpack@版本

局部安装webpack
save-dev`是开发时依赖，项目打包后不需要继续使用的

cd 对应目录
npm install webpack@版本  --save-dev

文件目录

1. dist文件夹：用于存放之后打包的文件
2. src文件夹：用于存放我们写的源文件
3. main.js：项目的入口文件。具体内容查看下面详情。
4. mathUtils.js：定义了一些数学工具函数，可以在其他地方引用，并且使用。具体内容查看下面的详情。
5. index.html：浏览器打开展示的首页html
6. package.json：通过npm init生成的，npm包管理的文件（暂时没有用上，后面才会用上）

打包指令

5、Vue CLI

使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
如果每个项目都要手动完成这些工作，那无以效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。

安装

安装vue CLI的前提
1、 安装NodeJS

什么是NPM？

NPM的全称是Node Package Manager是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。
我们会经常使用NPM来安装一些开发过程中依赖包.

2、Webpack
Webpack的全局安装

npm install webpack -g

安装Vue脚手架

npm install -g @vue/cli

Vue CLI3初始化项目

vue create my-project

初始化选择目录解释

目录结构详解

自定义配置：起别名

6、vue-router

路由表本质上就是一个映射表, 决定了数据包的指向.

路由发展

早期的网站开发整个HTML页面是由服务器来渲染的.
服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示.
但是, 一个网站, 这么多页面服务器如何处理呢?
一个页面有自己对应的网址, 也就是URL.
URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理.
Controller进行各种处理, 最终生成HTML或者数据, 返回给前端.
这就完成了一个IO操作.
上面的这种操作, 就是后端路由.
当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户顿.
这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化.
后端路由的缺点:
一种情况是整个页面的模块由后端人员来编写和维护的.
另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码.
而且通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情.

前端路由阶段

前后端分离阶段：
随着Ajax的出现, 有了前后端分离的开发模式.
后端只提供API来返回数据, 前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中.
这样做最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上.
并且当移动端(iOS/Android)出现后, 后端不需要进行任何处理, 依然使用之前的一套API即可.
目前很多的网站依然采用这种模式开发.
单页面富应用阶段:
其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.
也就是前端来维护一套路由规则.
前端路由的核心是什么呢？
改变URL，但是页面不进行整体的刷新。

URL的hash

URL的hash
URL的hash也就是锚点(#), 本质上是改变window.location的href属性.
我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新

HTML5的history模式：pushState

history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面.
history.pushState()

history.replaceState()

history.go()

上面只演示了三个方法
因为 history.back() 等价于 history.go(-1)
history.forward() 则等价于 history.go(1)
这三个接口等同于浏览器界面的前进后退

vue-router

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。

vue-router是基于路由和组件的
路由用于设定访问路径, 将路径和组件映射起来.
在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.

使用vue-router的步骤:

第一步: 创建路由组件
第二步: 配置路由映射: 组件和路径映射关系
第三步: 使用路由: 通过和

创建router实例

挂载到Vue实例中

步骤一：创建路由组件

步骤二：配置组件和路径的映射关系

步骤三：使用路由.

: 该标签是一个vue-router中已经内置的组件, 它会被渲染成一个标签.
: 该标签会根据当前的路径, 动态渲染出不同的组件.
网页的其他内容, 比如顶部的标题/导航, 或者底部的一些版权信息等会和处于同一个等级.
在路由切换时, 切换的是挂载的组件, 其他内容不会发生改变.

路由的默认路径

我们这里还有一个不太好的实现:
默认情况下, 进入网站的首页, 我们希望渲染首页的内容.
但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以.
如何可以让路径默认跳到到首页, 并且渲染首页组件呢?
非常简单, 我们只需要配置多配置一个映射就可以了.

配置解析:
我们在routes中又配置了一个映射.
path配置的是根路径: /
redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.

HTML5的History模式

我们前面说过改变路径的方式有两种:
URL的hash
HTML5的history
默认情况下, 路径的改变使用的URL的hash.
如果希望使用HTML5的history模式, 非常简单, 进行如下配置即可:

router-link补充

在前面的中, 我们只是使用了一个属性: to, 用于指定跳转的路径.

还有一些其他属性:

tag: tag可以指定<router-link>之后渲染成什么组件, 比如上面的代码会被渲染成一个

元素, 而不是
replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
active-class: 当<router-link>对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称.
在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类.
但是通常不会修改类的属性, 会直接使用默认的router-link-active即可.

路由代码跳转

有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了

比如, 我们将代码修改如下:

动态路由

在某些情况下，一个页面的path路径可能是不

确定的，比如我们进入用户界面时，希望是如下的路径：
/user/aaaa或/user/bbbb

除了有前面的/user之外，后面还跟上了用户的ID

这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。

路由的懒加载

官方给出了解释:

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。
如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了
官方在说什么呢?

首先, 我们知道路由中
通常会定义很多不同的页面.

这个页面最后被打包在哪里呢?
一般情况下, 是放在一个js文件中.
但是, 页面这么多放在一个js文件中, 必然会造成这个页面非常的大.
如果我们一次性从服务器请求下来这个页面, 可能需要花费一定的时间, 甚至用户的电脑上还出现了短暂空白的情况.
如何避免这种情况呢? 使用路由懒加载就可以了.

路由懒加载做了什么?
路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.
只有在这个路由被访问到的时候, 才加载对应的组件

嵌套路由

嵌套路由是一个很常见的功能

比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容.
一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件.

实现嵌套路由有两个步骤:

1、创建对应的子组件, 并且在路由映射中配置对应的子路由.
1、在组件内部使用标签.

定义两个组件:

传递参数的方式

传递参数主要有两种类型: params和query

params的类型:
配置路由格式: /router/:id
传递的方式: 在path后面跟上对应的值
传递后形成的路径: /router/123, /router/abc

query的类型:
配置路由格式: /router, 也就是普通配置
传递的方式: 对象中使用query的key作为传递方式
传递后形成的路径: /router?id=123, /router?id=abc

如何使用它们呢? 也有两种方式: 的方式和JavaScript代码方式

传递参数方式一:

传递参数方式二: JavaScript代码

获取参数

获取参数通过$route对象获取的.

在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新。

通过$route获取传递的信息如下:

$route和$router的区别

$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
$route为当前router跳转对象里面可以获取name、path、query、params等

导航守卫

为什么使用导航守卫?

我们来考虑一个需求:

在一个SPA应用中, 如何改变网页的标题呢? 网页标题是通过