开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue知识点(自己记录一下) -> 正文阅读

[JavaScript知识库]vue知识点(自己记录一下)

vue知识点(自己记录一下)

1、指令

v-text 插值语法{{}}
v-html:解析字符串html标签，渲染到页面
v-if 和v-show(隐藏显示)
- v-show:通过display:none进行隐藏
- v-if:创建和删除DOM，直接删除节点，进行隐藏
- 频繁切换显示一般用v-show
v-bind
- 简写：
- :class={xxxx?'classA':'','classB'} | []
- :style="{ fontSize:xxxx ? '40px':'50px' }"
v-on
- 简写为@
- 绑定事件(click、change)或者自定义事件(子传值父) $emit触发自定义事件
v-for
- v-for="(元素值，索引值) in 数组/对象"
- key：作用：减少不必要的DOM操作，提高更新效率绑定的不一定是索引值
v-model数据双向绑定：用在表单元素上(input,select,textarea)

2、属性

data
- 组件内的data它是一个函数，返回一个对象
- data(){ return { a:1 } }
- 原因：数据以函数返回值形式定义，每复用一次组件，就会返回一份新的data，如果是是对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果
methods 定义方法
components 注册组件
- 全局组件注册：Vue.component(‘组件名称’,组件对象)
- 局部组件的注册：components:{}
computed
- 计算属性：缓存
- 属性值什么时候发生变化？返回值更新{return xxxx;}
- 由内向外(多个值影响一个值)
- get()和set()
watch 监听值的改变
- 由外向内(一个值的改变有额外的改变)
- watch:{a:function(newVal,oldVal){ } }

computed和watch的区别

computed

  1、支持缓存，只有依赖数据发生改变，才会重新进行计算
  2、*computed* 不支持异步 有异步操作时无效，无法监听数据的变化
  3、*computed*  属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
  4、一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用*computed*
  5、 如果*computed* 属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在*computed*中的，属性都有一个get和一个set方法，当数据变化时，调用set方法

watch

  1、不支持缓存，数据变，直接会触发相应的操作
  2、watch支持异步；
  3、监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
  4、当一个属性发生变化时，需要执行对应的操作；一对多；
  5、 监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
			immediate：组件加载立即触发回调函数执行，
			deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

filter 过滤器
- 全局： vue.filter('过滤器名称',function(data){return xxxx;})
- 局部：filters
- 过滤器的使用：{{123 | 过滤器名称}}
- 多个过滤器一起使用：{{123 | 过滤器1 | 过滤器2 | 过滤器3 }}
directives 自定义指令
- 全局自定义指令:Vue.directive(‘指令名称没有v-’,{ bind(){ // 页面刷新就执行},update(){ // 指令的值发生改变执行 } })
- 局部质量：directives:{}
- v-自定义的指令名称=" 数据"
- 修饰符 v-指令的名称.xxx.once

3、组件间的传值

父传子自定义属性

父组件上：

<comp-a :自定义属性名称="需要传递给子组件的值">

子组件：

props:{
	自定义属性名称：{
		type:JS数据类型
		default:xxxx
	}
}
或者
props:['自定义属性名称1','自定义属性名称2']

子传父自定义事件

子组件内：

	this.$emit('自定义事件的名称',需要传递的值)   // 触发自定义事件

父组件内：

<comp-a @自定义事件的名称="响应自定义事件的函数(方法)">
methods:{
	响应自定义事件的函数(子组件传递过来的值){
		
	}
}

**兄弟传值 **

new Vue()

var bus = new Vue();
bus.$emit('自定义事件的名称',需要传递的值)  //  触发自定义事件
bus.$on('自定义事件的名称'，data=> {}) // 监听自定义事件

vuex

4、插槽

**slot组件内 (内存插槽) 令组件的使用更加灵活 **

匿名插槽

	<my-com> <img src=""> <my-com>
	<slot></slot>

命名插槽

			<my-com> <img slot="插槽的名字" src=""> <my-com>
			<slot name="插槽的名字"></slot>

作用域插槽

组件内的值传递到组件外

<my-com> <img v-slot:插槽的名字="scopeObj"  src="">{{scopeObj.自定义属性名称1}}{{scopeObj.自定义属性名称2}} </my-com>	```

组件内的数据给外部使用

<slot name="插槽的名字" :自定义属性名称1="组件内的数据1" :自定义属性名称2="组件内的数据2">

5、生命周期

创建(created)
- beforeCreate() 在内存里面刚创建，这个时候访问不了data，methods
- created() 创建完成，但是模板还没有编译，可以访问data、methods，但是访问不了DOM节点
挂载(mount)
- beforeCreate() 挂载前，模板已经被编译，但是还没有挂载到页面上
- mounted() 已经挂载到页面上，可以访问页面节点
更新(update)
- beforeUpate() data已经发生改变了，但是这个时候界面上的data的值还没有更新
- updated() data和界面上的值都已经更新了
销毁(created)
- beforeDestroy() 销毁前和正常挂载是没有什么区别的
- destroyed() 销毁后，这个时候访问不了对应的节点
activated和deactivated
- 使用标签的时候
- keep-alive作用：缓存组件
- 进入活跃状态和不活跃状态
- 使用keep-alive不会进入销毁状态的
- 当组件已经创建过，从不活跃状态进入活跃状态，不会再进入创建

6、webpack(模块打包工具，分析模块键的依赖)

入口文件：entry
输出：output
插件：plugins html-webpack-plugin
loader
- less-loader // 把less语法转成css
- css-loader // 在js中导入css,把css转成js能识别的模块
- style-loader // 通过一个JS脚本创建一个style标签,里面包含一些样式
- babel-loader // es6转es5
- raw-loader // html热更新

7、vue-cli(脚手架)

创建vue项目：vue create 项目名称
项目的目录结构
- src目录(开发目录)
  - mian.js入口文件
  - views项目的页面
  - component项目公用的一些组件
  - assets静态的文件(css,less,图片，js)
  - router路由
  - store(vuex)
  - request(网路请求)
  - .vue文件( 单文件组件组件html 组件样式style 组件的逻辑js)
  -
  - 导入导出模块
```
 	导入 import xxx from '地址'  //默认的导出
 	导入 import {xxx} from '地址'  //导出是有名字
 	导出export  
 	export var a = 1;
 	export default xxx;	
```
- 箭头函数
  - () => { }
  - this的指向：箭头函数是没有this指向的，箭头函数里面的this指向，外层语法的作用域
- public index.html模板
- dist 打包代码存放的地方(HTML，css,js) npm run build
- node_modules项目用到的第三方依赖库(vue,webpack,less-loader,axios,vue-router vuex) 安装命令:npm i
vue.config.js项目配置文件
- 端口port
- 代理derServer.proxy,开发时候解决跨域问题的方法
```
		devServer:{
			proxy:{
			'^/xxxx':{
				target:'目标地址'
				}
			}
		}
```
- eslint – 验证js
- publicPath:为项目的js,css,img连接添加一个前缀目录
项目启动
- 看package.json文件里面的script属性里面的具体名
- 开发：npm run serve
- 打包：npm run build

8、axios(网络请求)

安装：npm i axios -S

封装

封装axios拦截器

import axios from 'axios'
// 创建实例
var instance = axios.create({})
// 实现请求拦截器
instance.interceptors = request.use((config) => {
	return result},(err) => {})

// 导出实例
export default instance

// 只要调用导出的实例发送的网络请求都是经过封装的拦截器函数的

封装后端数据接口api.js

// 引入自己封装的实例
import 实例 from  'xxxx'
export const getData = () => 实例.get/post('后端数据接口url')

项目vue文件调用

	// 引入
	import {getData} from '封装的数据接口文件'
	// 调用
	getData().then(res => { })

请求方式
- get 获取数据
- post 修改或者新增操作
- put
- delete

9.vue-router

安装：npm i vue-router -S

封装

	// 1、
	import Vue from 'vue'
	import VueRouter from 'vue-router'
	// 注册，调用VueRouter里面的install方法，
	Vue.prototype.$router(全局路由对象)
	Vue.prototype.$router(当前访问的路由对象)
	Vue.use(VueRouter)
	
	// 2、
	export default new VueRouter({
		mode:'history/hash',
		routes:[  // 路由配置
			{
				path:"访问的路径",
				component:() => import('xxxxx')
			}
		]
	})
	
	// 3、
	main.js 
	import router from '封装路由文件'
	new Vue({
		router
	})
	
	```

加载组件 router-view
页面跳转方式
- router-link
- $router.push
- $router.replace
- $router.go
- $router.back返回
- $router.forward向前

url传参

url后面加问好：abc?id=1		获取id上的值  $router.query.id
 动态路由
 		- {  path: '/xxxx/:xxx'    ,   component: () => import(xxxx)   }
 		- /xxxx/123456					获取路径上的值：$router.params.xxxx

路由守卫

router.beforeEach(to,from,next) => {
	// to:目标路由对象
	// from:当前路由对象
	// next:跳出的方法
}

keep-alive

<keep-alive>
	<router-view />
</keep-alive>

9、vuex(状态管理工具)

安装：npm i vuex -S

封装引入

import Vue from 'vue'
import Vuex from 'vuex'

// 注册调用Vuex里面的install方法Vue.prototype.$store
Vue.use(Vuex)
new Vue.Store({
	state:{a:1}, //状态定义的方法
	mutations:{}, // 修改statte里面的状态值(同步)
	actions:{}, // 修改state里面状态值(异步)
	getters:{}, // state里面的状态值进一步处理，有点类似于computed
	modules:{} // 对state进行分类管理 
})

main.js
import store from 'xxxx'
new Vue({
	store
})