- 博客(13)
- 收藏
- 关注
RSS订阅原创 Vue2知识（四）--Vuex
在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。//借助mapState生成计算属性：sum、school、subject（对象写法）//借助mapState生成计算属性：sum、school、subject（数组写法）//方式一：自己直接dispatch。
2024-11-20 19:42:26
524
2
原创 Vue2知识（三）
理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于。作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
2024-11-20 19:35:15
1500
原创 Vue2知识（二）--组件之间的通信
子组件 ===> 父组件使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。绑定自定义事件：或第二种方式，在父组件中：......mounted(){若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。this.$emit('atguigu',数据)解绑自定义事件组件上也可以绑定原生DOM事件，需要使用native修饰符。注意：通过this.$refs.xxx.$on('atguigu',回调)
2024-11-20 19:27:38
503
原创 Vue2知识（一）
备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）type:String, //类型。// 3. 配置全局混入(合)// 1. 添加全局过滤器。// 2. 添加全局指令。
2024-11-20 19:17:58
1597
原创 Vue3新增的组件
在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中。等待异步组件时渲染一些额外内容，让应用有更好的用户体验（网速慢时，体验感较强）移动到指定位置的技术。（例如：加个透明背景，其他的都不能点的效果）在Vue2中: 组件必须有一个根标签。好处: 减少标签层级, 减小内存占用。什么是Teleport？
2024-11-20 19:09:27
421
原创 Vue3常用 Composition API
什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。
2024-11-20 19:07:25
575
原创 创建vue项目（二）--工程化
第五步：在VScode中打开项目，输入code .回车就在VScode打开了。是否引入 Vue Router 进行单页面应用开发？是否要引入一款端到端（End to End）测试工具？是否使用 TypeScript 语法？是否引入 Vitest 用于单元测试？是否引入 Pinia 用于状态管理？是否引入 ESLint 用于代码质量检测？是否启用 JSX 支持？是否引入 Prettier 用于代码格式化？第三步：安装依赖,出现图中的样子就成功了。3.（根据自己需求选择）2.输入包名（项目名）
2024-11-20 18:59:12
141
原创 vue基础（五）
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；区别如下：1).el不要写，为什么？——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。2).data必须写成函数，为什么？———— 避免组件被复用时，数据存在引用关系。备注：使用template可以配置组件结构。
2024-11-20 16:57:55
257
原创 Vue基础（三）
（2）.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数， 这样this的指向才是vm 或 组件实例对象。(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以(想让它可以则配置deep:true)！（2）watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。（1）.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。监视的属性必须存在，才能进行监视！
2024-11-20 16:46:41
309
原创 Vue基础（二）
data中的所有属性，最后都出现在vm身上。vm身上所有的属性及Vue原型上所有属性，在vue模板中都可以直接使用。Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。否则this就不是vm了；事件的回调需要配置在methods对象中，最终会在vm上；
2024-11-20 16:43:33
1524
原创 vue基础（一）
由Vue管理的函数(例如data)，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。(1).new Vue时候配置el属性。
2024-11-20 16:38:51
208
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人