Vue2笔记

目录

一. Vue的指令与过滤器

1.指令的概念

2.指令的六大分类

2.1 内容渲染指令

2.2 属性绑定指令

2.3 事件绑定指令

2.4 双向绑定指令

2.5 条件渲染指令

2.6 列表渲染指令

3.Vue的指令与过滤器

3.1 过滤器的使用位置

3.2 声明过滤器

3.3 私有过滤器和全局过滤器

3.4 过滤器的注意事项

3.5 连续调用多个过滤器

大总结

二. Vue基础入门

1.侦听器

1.1 Watch侦听器

1.2 使用Watch检测用户名是否可用

1.3 immediate选项

1.4 deep深度侦听

1.5 监听对象单个属性的变化

总结

2.计算属性

2.1 什么是计算属性

2.2 计算属性的特点

3.axios

3.1 原理

3.2 语法

3.3 解构赋值

4.Vue-cli

4.1 单页面应用程序

4.2 什么是Vue-cli

4.3 安装

4.4 使用

4.5 Vue项目中src目录的构成

4.6 Vue项目的运行流程

5.Vue组件

5.1 什么是组件化开发

5.2 Vue中的组件化开发

5.3 Vue组件的三个组成部分

5.4 结构->行为->样式

5.5 使用组件的三个步骤

5.6 私有子组件

5.7 注册全局组件

5.8 组件的props

5.9 组件之间的样式冲突问题

5.10 /deep/

6.组件的生命周期

6.1 生命周期&生命周期函数

6.2 组件生命周期函数的分类

7.组件之间的数据共享

7.1 组件之间的关系

7.2 父组件向子组件共享数据

7.3 子组件向父组件共享数据

7.4 兄弟组件之间的数据共享

8.ref引用

8.1 什么是ref引用

8.2 语法

9.动态组件

9.1 什么是动态组件

9.2 如何实现动态组件渲染

9.3 使用keep-alive标签保持组件状态

9.4 keep-alive对应的生命周期函数

9.5 keep-alive的include属性

9.6 keep-alive的exclude属性

10.插槽

10.1 什么是插槽

10.2 slot的使用

10.3 v-slot指令

10.4 作用域插槽

11.自定义指令

11.1 自定义指令的分类

11.2 私有自定义指令

11.3 全局自定义指令

12.axios

13.路由

13.1 前端路由的基本概念与原理

13.2 vue-router的基本使用

13.3 vue-router的常见方法

三.使用Vant

官网： Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.

四 vue.config.js

---

一. Vue的指令与过滤器

1.指令的概念

2.指令的六大分类

2.1 内容渲染指令

v-text

缺点：会覆盖元素默认值

{ { } }

v-html

2.2 属性绑定指令

插值表达式无法使用在属性里面，如果要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令。

语法

<input :placeholder="tips">
//  或者
<input v-bind:placeholder="tips">

使用Javascript表达式

2.3 事件绑定指令

v-on可以被简写为@符号

事件定义使用methods

const vm=new Vue({
  el:'#app',
  data:{
    count:0
  },
  methods:{ //写在methods中
    addCount:function(){ }  //函数
    //简写形式
    addCount(){ }
  // 函数中的this就是vm 
  }
}) 

事件函数传参

//传参方法和普通函数一样
//如果没有传参，会默认传过来target，target就是事件的调用者
//如果传参了，时间默认对象会被覆盖掉
//vue提供了内置变量，名字叫做$event，它就是原生DOM的事件对象

事件修饰符

按键修饰符

2.4 双向绑定指令

<div id='app'>
  <p>用户的名字是：{{username}}</p> //2.改变后的值重新渲染
	<input type="text" v-model="username"> //1.当input输入内容改变时，data.username值也会改变
                                         //	原有value值会被覆盖 
</div>
  
<script>
  const vm=new Vue({
  el:'#app',
  data:{
    count:0
    username:'123'
  },
  methods:{
  }
}) 
</script>

适用元素

v-model 指令的修饰符

2.5 条件渲染指令

v-if

v-else

v-else-if

v-show

v-if 与 v-show的区别

2.6 列表渲染指令

v-for

key

v-for 中的索引

3.Vue的指令与过滤器

3.1 过滤器的使用位置

3.2 声明过滤器

3.3 私有过滤器和全局过滤器

3.4 过滤器的注意事项

3.5 连续调用多个过滤器

大总结

二. Vue基础入门

1.侦听器

1.1 Watch侦听器

1.2 使用Watch检测用户名是否可用

1.3 immediate选项

1.4 deep深度侦听

1.5 监听对象单个属性的变化

总结

2.计算属性

2.1 什么是计算属性

2.2 计算属性的特点

3.axios

3.1 原理

3.2 语法

axios({ //调用axios方法得到的是Promise对象
  //请求方式
  method:'GET',
  //请求地址
  url:'',
  params:{}, //get请求使用这个
  data:{} //post请求使用这个
}).then(function(result)){
  console.log(result);
}
//或者
document.querySelector('#btn').addEventListener('click',async function(){
  //如果调用某个方法返回值是Promise实例，则前面可以加await
  //await只能用在被async修饰的语法中
  const result=await axios({
    method:'',
    data:{}
  })
})

3.3 解构赋值

document.querySelector('#btn').addEventListener('click',async function(){
 //解构赋值的时候，使用 ： 进行重命名
  const {data:res}=await axios({
    method:'',
    data:{}
  })
  console.log(res.data)
}

4.Vue-cli

4.1 单页面应用程序

4.2 什么是Vue-cli

4.3 安装

4.4 使用

// 在终端中输入：
cd 名字
npm run serve

4.5 Vue项目中src目录的构成

4.6 Vue项目的运行流程

5.Vue组件

5.1 什么是组件化开发

5.2 Vue中的组件化开发

5.3 Vue组件的三个组成部分

5.4 结构->行为->样式

// 结构
<template></template>
//行为
<script>
  //默认导出，这是固定写法！
  export default{
  //data数据源
  //注意，vue组件中的data不能像之前一样，不能指向对象，vue组件中的data必须是一个函数
 data:function(){
   //要return出去一个对象，这个return出去的对象中，可以定义数据
   return {}
 }
  //或者
 data(){
   return {}
 }
  }
</script>
//样式
<style></style>

5.5 使用组件的三个步骤

5.6 私有子组件

通过components注册的是私有子组件

5.7 注册全局组件

5.8 组件的props

init前如果不加：则值是字符串，加：值是数值

props的default默认值

如果用户没有传某一属性的值，应该设置一个默认值值

props的type值类型

props的required必填项

export default{
  props:{
    init:{
      default:0,
      type:Number,
      required:true
      //当required值为true时，必须传值，即使已经有默认值，仍然会报错
    }
  }
}

5.9 组件之间的样式冲突问题

解决方法1：标明自定义属性

如：
<h5 data-v-001>你好</h5> //变红
<h5 data-v-002>你好</h5>  //不变红
h5[data-v-001]{
  color:red
}

解决方法2：使用scoped

如：
<style lang="less" scoped>
</style>

5.10 /deep/

当使用第三方组件库的时候，如果有修改第三方组件默认样式的需求，需要用到/deep/

加了/deep/后，从h5 [data-v-001] 变为[data-v-001] h5

6.组件的生命周期

6.1 生命周期&生命周期函数

6.2 组件生命周期函数的分类

组件创建阶段的四个函数

创建阶段每个函数只会从头到尾执行一次

exports default{
  props:[],
  data(){},
  methods:{},
  beforeCreated(){}, //props data methods都没有创建好，处于不可用的状态
  created(){}   //props data methods都已经创建好，都处于可用的状态
  beforeMount(){} //此时还不能操作dom元素
  mounted(){}   //此时已经可以操作dom元素了
}

created生命周期函数非常常用。经常在它里面调用methods中的方法，请求服务器的数据。并且把请求到的数据转存到data中，供template模板渲染的时候使用

组件运行阶段的两个函数

运行阶段函数可以执行多次，数据变化一次就会执行一次

exports default{
  props:[],
  data(){},
  methods:{},
	beforeUpdate(){} //将要根据最新数据重新渲染组件时发生
  updated(){}  //数据已经更新后发生
}

当数据变化之后，为了能够得到最新的dom结构，必须把代码写到updated生命周期函数中

组件销毁阶段的两个函数

销毁阶段只能执行一次

exports default{
  props:[],
  data(){},
  methods:{},
	beforeDestroy(){} //将要销毁时发生
  destroy(){} //已经销毁后发生
}

7.组件之间的数据共享

7.1 组件之间的关系

7.2 父组件向子组件共享数据

7.3 子组件向父组件共享数据

7.4 兄弟组件之间的数据共享

EventBus的使用步骤

8.ref引用

8.1 什么是ref引用

8.2 语法

<div ref="good"></div> //1.给标签设置ref属性
this.$refs.good.style  //2.使用this.$refs.good即可操作该标签

9.动态组件

9.1 什么是动态组件

9.2 如何实现动态组件渲染

9.3 使用keep-alive标签保持组件状态

组件切换会导致原有数据丢失，使用keep-alive可以避免（把内部组件缓存，而不是销毁）

<keep-alive> //把需要保持状态的部分直接放入标签即可
  <component></component>
</keep-alive>

9.4 keep-alive对应的生命周期函数

9.5 keep-alive的include属性

9.6 keep-alive的exclude属性

用来排除指定名称的组件是否会被缓存。exclude与include不能同时使用

10.插槽

10.1 什么是插槽

10.2 slot的使用

//写在组件内容区域的内容全都将被渲染到组件的slot标签之中
<Left>默认情况下，在使用组件时，提供的内容都会被填充到名字为default的插槽之中</Left>
//每一个slot插槽，都要有一个name名称。若省略了slot的name属性,会有一个默认名称叫default
<slot name="default"> </slot>

10.3 v-slot指令

如果要指定内容放在哪个slot标签中，可以通过以下方法

<Left>
  <template v-slot:default>//这里的template是虚拟的标签，只起到包裹作用，不会被替换为真正的元素
    <p>哈哈哈</p>
  </template>
</Left>
简写形式：(用#替换)
<Left>
  <template #default>
    <p>哈哈哈</p>
  </template>
</Left>

10.4 作用域插槽

在封装组件时，为预留的<slot>提供属性对应的值，这种用法叫做"作用域插槽"

<template #content="obj">
  <div>
    <p>哈哈哈</p>
    <p>{{ obj.msg }}</p>  //hello
  </div>            
</template>


<slot name="content" msg="hello"></slot>

11.自定义指令

11.1 自定义指令的分类

11.2 私有自定义指令

bind( )函数

update( )函数

简写形式

11.3 全局自定义指令

12.axios

每一个.Vue组件都可以看作是Vue的一个实例。如果需要用到axios，则不需要在每个组件里面单独import，直接在main.js中挂载axios即可。代码：Vue.prototype.axios = axios 。使用：this.axios 。也可以改名为Vue.prototype.$http = axios 。其中$http为挂载axios的别名。

请求的根路径要放在Vue.prototype.axios之前，代码为axios.defaults.baseURL = "http://www.liulongbin.top:3006"

但是，以上方法直接把axios挂载到Vue原型上，有一个缺点：不利于api接口的复用。

在src下面创建一个utils文件夹，在utils里面创建一个request.js，有多个可以创建多个request.js代码为：

import axios from 'axios'
const request = axios.create({
  //baseURL是指定请求的根路径
  baseURL: 'https://www.escook.cn'
})

export default request

如果反复使用某个api接口，在src下面创建一个api文件夹，在api里面创建articleAPI.js，相关接口可以放在里面

// 文章相关的API结构，都可以封装到这个模块中
import request from '@/utils/request.js'
// 向外按需导出一个API函数
export const getArticleListAPI = function(_page,_limit){
  return request.get('/articles',{
    //请求参数
    params: {
      _page: _page,
      _limit: _limit
    }
  })
}

调用API

//按需导入API接口
import { getArticleListAPI } from '@/api/articleAPI.js'
const result = getArticleListAPI(1,5)
console.log(result)

13.路由

13.1 前端路由的基本概念与原理

什么是前端路由

SPA与前端路由

前端路由的工作方式

13.2 vue-router的基本使用

什么是vue-router

vue-router安装和配置的步骤

13.3 vue-router的常见方法

路由重定向

嵌套路由

默认子路由

path为空字符串的路由为默认子路由。进入页面默认显示默认子路由下的component组件

动态路由匹配

$route.params参数对象

在hash地址中， / 后面的参数项叫"路径参数"，在路由参数中使用this.$route.params来访问路径参数
在hash地址中，？后面的参数项叫"查询参数"，在路由参数中使用this.$route.query来访问查询参数

使用props接收路由参数

声明式导航&编程式导航

vue-router中的编程式导航API链接

导航守卫

全局导航守卫

守卫方法的3个形参

next函数的三种调用方式

控制后台主页的访问权限

三.使用Vant

官网： Vant 4 - A lightweight, customizable Vue UI library for mobile web apps.

安装失败在最后加-legacy-peer-deps

在main.js中配置vant组件库

vant支持一次性导入所有组件：

import Vue from 'Vue'
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

四 vue.config.js

使用npm run build打包文件后，打包而成的html文件不能直接双击打开，因为其遵守的是https协议，而不是file协议。如果想实现双击打开，在vue.config.js里面export中添加：publicPath：' '