vue2.X基础知识点
1.vue的优点
渐进式：学一点，用一点，不用把vue全家桶里面所有的知识都学完才开发项目，后期的话我们学的越多就可以使用vue的全家桶（vue，vue-router，vuex）来进行开发。
数据驱动，响应式开发：只需要修改数据，就可以自动更新渲染视图。
双向数据绑定：表单里面输入数据，自动同步数据到data中
体积非常小，压缩以后，这个vue的库只有20kb，
性能高：不操作dom,vue自带虚拟dom，vue的底层会自动帮我们操作dom，比我们操作dom的性能要高
生态非常繁荣：配套的周边的资源非常丰富：仓库（vuex),路由库（vue-router），配套的ui库非常丰富（element系列，vant系列，antd)
2.脚手架的区别
@vue/cli 与vue-cli
区别：版本不一样。
@vue/cli:可以搭建vue2&vue3的项目
搭建出来的项目，webpack的配置是隐藏起来的，我们要对webpack进行配置，都需要创建一个vue.config.js文件来进行配置
vue-cli:可以搭建vue1.0&vue2.0的项目
搭建出来的项目，webpack的配置是被暴露出来的。
3.vue的组件
-
局部组件
- 创建组件
- 引入组件
- 注册组件
-
全局组件
-
创建组件
-
在main.js引入组件
// 引入全局组件的示例 import Father from './components/father.vue' -
在main.js通过vue.component（组件名，组件实例）
// 注册全局组件 Vue.component('Father',Father) -
运用场景：多次需要使用，需要复用。
-
4.组件间的通讯
-
子传父
-
子组件需要定义好传送的数据
-
子组件可以通过绑定事件，也可以不绑定事件来传送
-
子组件通过this.$emit(‘自定义的事件’，传送的数据)
this.$emit('changeVal',this.msg1)- 父组件通过v-on绑定子组件传过来的自定义事件转换位自己的事件，在methods里面调用这个事件，通过传一个形参，就可以获取子组件中传过来的数据
<Son :msg='msg' @changeVal='change'/> methods:{ change(val){ console.log(val,111); this.msg = val } } -
-
父传子
-
父组件通过自定义属性传参
<Son :msg='msg' @changeVal='change'/>- 子组件通过props接受
// props:['msg'] props:{ msg:{ type:String, //设置父组件传递过来的数据类型 String,Number,boolean,null,undefinend,Object,Array require:true, //设置是否必传， default:'我是默认值哦' //设置默认值 } }, -
-
中央事件总线
-
在main.js new一个vue的示例对象，把这个属性对象了挂载在vue的原型上，一般叫$bus
Vue.prototype.$bus = new Vue()- 兄弟1组件，可以通过this. b u s . bus. bus.emit(‘自定义事件’，参数)
this.$bus.$emit('msg',this.msg)- 兄弟组件2，可以通过this. b u s . bus. bus.on(‘传递过来的自定义事件’,(val)=>{val就可以获取到兄弟组件1传输过来的数据})
this.$bus.$on('msg',(item)=>{ console.log(item,2222); this.val =item }) -
-
vuex
- vue的状态管理（状态机，仓库），一般运用于大型项目，小型用的比较少，一般用于公用数据存储。
- 五大属性
- state
- state一般用于存储数据的 =》 vue中的data。 取：this.$store.state.要去的数据 =》辅助函数mapState也可以取数据，一般结合computed来一起使用的
- mutations
- mutations 修改数据的唯一方法，改&增：this.$store.commit(‘mutations里面定义的函数’，要改&增的数据)=》辅助函数mapMutations ,一般结合methods来一起使用的. 所有的操作都是同步
- actions
- 异步操作，操作一些异步的数据，修改数据的话，还是需要调用mutations 里面的commit的方法来修改=》store.commit(‘mutations里面定义的函数’，要改&增的数据).调用action一般使用this.$store.dispatch(‘actions里面定义的方法’，需要传递的数据)=》mapActions,一般结合methods来一起使用的
- getters
- vuex的计算属性 == computed， 一定要有返回值 =》辅助函数mapGetters
- module
- 仓库的模块化，运用场景：项目模块比较多，都要使用vuex的时候，分模块使用，利于管理
- state
5.动态&表单*
封装一个表单，在不同的表单组件里面都可以使用。
1.封装一个表单的组件，里面所有的数据全部都搞成动态（input，select，radio，checkbox,textarea)通过在父组件中传递的数据，进行v-for循环，然后进行v-if的判断，来进行渲染。获取到表单里面的数据我们通过子传父，传给父组件就行了。
2.在父组件中，把我们需要传递到子组件中的数据封装好，父传子传递过去就行。
6.生命&周期
共11个，其中8个常用的，3个不常用
创建阶段
-
beforeCreate
-
created
多用于发送请求
面试题：如何在created里dom.
答案:this.$nextTick() == vue.nextTick()。
面试题：请你说说$nexttick的作用
答案：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法
Vue.nextTick一样，不同的是回调的this自动绑定到调用它的实例上。<p ref='app' id="app"/> this.$refs.app == documnet.getElementById('app')挂载阶段
-
beforeMount
-
mounted
dom生成，可以操作dom
更新阶段
-
beforeUpdate
-
updated
销毁阶段
-
beforeDestory
-
destoryed
运用场景：项目的性能优化（清除定时器，解绑事件，解绑不必要的全局变量）
7.路由vue-router
-
路由模式
- hash(默认模式 ---- 浏览器环境)
- 底层基于onhashchange
- history（浏览器环境）
- 底层基于pushState
- 缺点：项目打包以后，对页面进行刷新，会报错404. 需要后端对页面进行重定向
- abstract（node.js环境）
- 基本不用（了解项）
- hash(默认模式 ---- 浏览器环境)
-
路由守卫
-
前置守卫：beforeEach(to，from,next)
- to:去哪儿
- from:从哪儿来
- next:放行
- next():放行到某个页面
- next(‘/goods’) 放行到规定的页面（商品），
-
解析守卫：beforeResolve
-
后置守卫：afterEach
-
路由独享守卫：beforeEnter
-
组件守卫：
beforeRouteEnter(to, from) { // 在渲染该组件的对应路由被验证前调用 // 不能获取组件实例 `this` ！ // 因为当守卫执行时，组件实例还没被创建！ }, beforeRouteUpdate(to, from) { // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候， // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this` }, beforeRouteLeave(to, from) { // 在导航离开渲染该组件的对应路由时调用 // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this` },
-
-
动态路由传参
-
路由配置
{ path: '/about/:id/:name', //需要在这里面定义参数 name: 'about', component: () => import( '../views/AboutView.vue') } -
A组件传参
this.$router.push('/about/123/张三') -
B组件接受
this.$route.params
-
-
路由传参
-
router-link
#A组件跳转 <router-link to="/about?id=456">去关于我</router-link> #B组件接收 this.$route.query -
push 会把跳转的页面添加到历史记录里面
query 参数携带在地址栏上，页面刷新数据不会丢失。参数不能太多 this.$router.push({ path:'/about', query:{ id:456 name:'李四' } }) #接收 this.$route.query params 页面刷新 数据会丢失，一般适用于移动端 this.$router.push({ name:'about', params:{ id:456 name:'李四' } }) #接收 this.$route.params -
replace 不会把跳转的页面添加到历史记录里面
query 参数携带在地址栏上，页面刷新数据不会丢失。参数不能太多 this.$router.replace({ path:'/about', query:{ id:456 name:'李四' } }) #接收 this.$route.query params 页面刷新 数据会丢失，一般适用于移动端 this.$router.replace({ name:'about', params:{ id:456 name:'李四' } }) #接收 this.$route.params
-
-
router与route区别
- router是全局的路由信息对象，可以使用以下几个方法，对路由进行操作（跳转，回退，返回）
- push 跳转页面
- go 前进或后退
- back 返回
- forward 跳转
- replace 替换页面
- route是当前路由信息对象，可以获取路由的信息
- name 路由里面定义的name
- meta 元信息
- params 使用name传参，获取的参数
- query 使用path传参，获取的参数
- router是全局的路由信息对象，可以使用以下几个方法，对路由进行操作（跳转，回退，返回）
8.vue内置API
更新数组的方法
vue将被监听的数组的变更方法进行了包裹，所以他们也将触发视图更新
vue底层，不能挟持数组，他挟持了数组的方法，只要调用这些方法，也会触发视图更新
面试题：请你vue2.0的缺陷（数据发生了变化，视图没有渲染）？？？解决的方案。
答案：监听不了对象跟数组的变化。
push 尾部添加
pop 尾部删除
shift 头部删除
unshift 头部添加
splice 截取
reverse 反转
sort 排序
Vue.set
Vue.set == this.$set, 作用： 修改vue2的缺陷的。
#修改数组
this.$set(要修改的数组，修改数组的下标（索引），新值)
#修改对象
this.$set(要修改的对象，下标（键名），新值)
Vue.nextTick
作用：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
ref
运用场景： 操作dom,父组件调用子组件里面定义的方法；
操作dom： 在标签上面 定义一个ref => ref =‘xxxx’ 在生命周期里面使用通过： this.$refs.xxxx
父组件中调用子组件里面定义的方法：在子组件标签上面 定义一个ref => ref =‘xxxx’ 在事件使用通过： this.$refs.xxxx.方法名
Vue.directive
注册或获取全局自定义指令
Vue.directive('指令名'，{
//配置对象
inserted(el,exp){//el:获取实例，exp表达式
//当绑定的元素插入dom时，触发此函数
}
})
//mian.js 使用 例如：注册一个添加背景色的自定义指令
// 自定义指令
Vue.directive('bgColor',{
inserted(el,exp){
el.style.background=exp.value
el.style.color='#fff'
}
})
<p v-bgColor="'blue'">改变背景颜色</p>
//自定义文件使用
//新建directive文件，在里面新建
export function bgColor(){
return{
inserted(el,exp){
el.style.background=exp.value
el.style.color='#fff'
}
}
}
export function bgColor(){
return{
inserted(el,exp){
el.style.background=exp.value
el.style.color='#fff'
}
}
}
//在mian.js使用
import * as directives from '@/directive' // 引入自定义指令
Object.keys(directives).forEach((item)=>{
Vue.directive(item,directives[item]())
})
Vue.filter
注册或获取全局过滤器。
// 局部过滤器
<!-- 定义完之后直接通过 管道符 | 调用即可 -->
<div>{{ msg | toFixed }}</div>
filters: {
toFixed(val) {
return val.toFixed(2);
},
},
//全局过滤器
// 过滤器
Vue.filter('toFixed',(val)=>{
return val.toFixed(3)
})
//进阶版本
//自定义文件使用
//新建filter文件夹，在里面新建
export function toFixed(val) {
return val.toFixed(4);
}
export function toUpperCase(val) {
return val.toUpperCase();
}
//在mian.js使用
import * as filters from './filters/index';
Object.keys(filters).forEach(item => {
Vue.filter(item, filters[item])
});
Vue.component
注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称
-
局部组件
- 创建组件
- 引入组件
- 注册组件
- 使用组件
-
全局组件
main.js // 全局组件 import Mybtn from '@/components/Btn.vue' Vue.component("my-btn",Mybtn)
vue.use
作用：调用|注册|使用 插件的
运用场景： ui库，router等
计算属性computed
-
特点
- 计算属性，常用于逻辑计算，最终返回一个唯一的结果，必须要有返回值
- 写法与methods一样，使用函数名，就代表返回的结果
- 有依赖缓存，只要依赖的响应式的数据发生变化了，就会出现计算，性能比较高
-
写法
-
写法一（标准写法 取数据）
<p>姓：{{ firstName }}</p> <p>名：{{ lastName }}</p> <p>姓名：{{ name }}</p> data() { return { firstName: "科比", lastName: "布莱恩特", }; }, computed: { name() { return this.firstName + "-" + this.lastName;}, }, -
写法二（有get和set可以获取 也可以修改）
name: { get() { return this.firstName + "-" + this.lastName; }, set(val) { console.log(val); let arr = val.split("-"); this.firstName = arr[0]; this.lastName = arr[1]; }, },
-
监听watch
侦听器，主要观察数据的变化，自动返回旧值和新值
-
写法一
watch: { name(newVal, oldVal) { // newVal: 新值 // oldVal: 旧值 this.oldVal = oldVal; this.newVal = newVal; }, }, -
写法二
name: { immediate: true, // 立即执行 handler(newVal, oldVal) { console.log(newVal, oldVal); }, // 执行函数 deep: true, // 深度监听 }, #在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。 #解决方案：computed重新深拷贝定义
数据data
data为什么是个函数，而不是一个对象。
答案：组件复用或嵌套。如果说他是一个对象的话，他就没有作用域。会造成数据的污染，那如果是个函数的话，他就用自己的作用域，data定义的数据就只局限于当前组件。
常用的插槽
分类：
#匿名插槽
<slot></slot>
#具名插槽
<slot name="header"></slot>
使用：
以前：<p slot='header'></slot> 以前版本的，现在的vue2.0已经废弃了
现在：<template v-slot:header></template >
#vue2.0 slot='插槽名'来插入内容，也可以用v-slot:插槽的名字，vue3.0只能用v-slot,不能用slot='插槽名'
#作用域插槽
子组件中的数组，在父组件中使用
父组件中使用方法：
前：<template slot-scope='scope'></template>
现：<template v-slot='scope'></template>
运用场景：element里表格中自定义的数据中来使用
动态组件&异步组件
#动态组件
<component :is='想要使用组件名'></component>
<component v-for="item in cominfo" :key="item" :is="item"></component>
import Card from '../components/Card.vue';
import Comone from '../components/comone.vue'
import Comtwo from '../components/comtwo.vue'
export default {
components:{
Card,
Comone,
Comtwo,
},
data(){
return{
cominfo:['Comone','Comtwo']
}
}
}
#异步组件
组件懒加载，想要用的时候才出发的组件了就叫异步组件
components:{
Card:()=>import('../components/Card.vue'),
Comone:()=>import('../components/comone.vue'),
Comtwo:()=>import('../components/comtwo.vue'),
},
常用修饰符
#事件修饰符
.stop 阻止事件冒泡
.prevent 阻止重新加载页面
.capture
.self
.once 只触发一次
.passive
#按键修饰符
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
#鼠标修饰符
.left
.middle
.right
#自定义修饰符
.sync
.native
自定义v-model
v-model 默认会利用名为 value 的 prop 和名为 input 的事件
#父组件
<el-input :value="val" @input="inputinfo"></el-input> == <el-input v-model="val"></el-input>
#子组件
<template>
<div>
<input :value="value" @input="changeInput" type="text">
</div>
</template>
<script>
export default {
props:['value'],
data(){
return{
val:''
}
},
methods:{
changeInput(e){
this.$emit('input',e.target.value)
}
}
}
</script>
混入 mixin
可以js里面代码全部抽离出来，封装成单独的js文件，在需要的组件中使用的话：直接引入，通过mixins:['引入的我js']，混入一下，就可以使用我们抽离出来的js里面的配置代码
1.创建mixins文件
export const globalMixns ={
data(){
return {
num:30
}
},
created(){
console.log('我是创建阶段');
},
methods:{
handleCli(){
console.log('我是混入中的事件');
}
},
mounted() {
console.log('我是挂载阶段');
},
}
2.引入mixins文件
import {globalMixns} from '../mixins/index';
3.混入
mixins:[globalMixns],
多环境打包|启动项目
-
环境（开发，测试，线上）=》axios里面的baseURL
"scripts": { "serve": "vue-cli-service serve", //对应的环境 开发环境 development "build": "vue-cli-service build" //对应的环境 正式环境 production },-
创建对应环境的文件
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I3kpjXuO-1682559236891)(D:\试讲录屏\0310复习课\day05\doc\image-20220924114334522.png)]
-
在文件里面配置对应的baseURL，必须要是 VUE_APP 开头的
VUE_APP_BASE_URL = 'http://192.168.0.0:8080' //请求地址 VUE_APP_TITLE = '网易云线上版本' //项目名字 -
在package.json里面配置不同的启动命令
"scripts": { "serve": "vue-cli-service serve", //对应的是开发环境的启动命令 "serve:pro": "vue-cli-service serve --mode production", //对应的是正式（线上）环境的启动命令 "serve:test": "vue-cli-service serve --mode test", //对应的是测试环境的启动命令 "build": "vue-cli-service build", //对应的是正式（线上）环境的打包命令 "build:pro": "vue-cli-service build --mode development", //对应的是开发环境的打包命令 "build:test": "vue-cli-service build --mode test" //对应的是测试环境的打包命令 },
-
-
打包产生白屏
解决方案： 在vue.config.js 配置 pubilcPath:‘./’,
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
publicPath:'./', //解决打包白屏产生的错误
})
762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
