zhangxm_qz的博客

说明：根据B站学习视频 ：【2020新课程】Webpack从原理到实战完整版-深入浅出，简单易学，前端工程师必学经典内容 学习整理，如有错误，欢迎随时指正，互相学习。文章转自：https文章目录什么是webpack为什么需要打包作用域模块化方案发展webpack打包机制webpack打包机制常用的webpack plugins什么是webpack一个现代JavaScript应用程序的静态模块打包器默认：只对js进行处理，其他类型文件需要配置loader或者插件进行处理。打包：将各个依赖文件进行梳理

文章目录什么是Vue-CLI安装Vue-cli创建、打包、运行项目Vue-cli修改webpack配置什么是Vue-CLIVue-CLI（Command Line Interface） 是vue官方提供的脚手架工具,默认已经帮我们搭建好了一套利用webpack管理vue的项目结构安装Vue-cli安装脚手架工具: npm install -g @vue/cli检查是否安装成功: vue --versionC:\D\works\vue\Vue核心基础>vue -VYou are using

文章目录DOM获取render方法DOM获取Vue不推荐我们直接操作DOM, 但是在企业开发中有时候我们确实需要拿到DOM操作DOM那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM?在Vue中如果想要拿到DOM元素我们可以通过ref来获取,ref使用方式：在需要获取的元素上添加ref属性. 例如: 我是段落</>在使用的地方通过 this.refs.xxx获取,例如this.refs.xxx获取, 例如 this.refs.xxx获取,例如this.ref.mypp

文章目录创建期间的生命周期方法运行期间的生命周期方法销毁期间的生命周期方法和wbpack生命周期方法一样, Vue生命周期方法就是在Vue组件从生到死的特定阶段调用的方法生命周期钩子 = 生命周期函数 = 生命周期事件Vue生命周期方法分类:创建期间的生命周期方法: beforeCreate、 created、 beforeMount、 mounted运行期间的生命周期方法: beforeUpdate、 updated销毁期间的生命周期方法： beforeD

文章目录VueRouter作用及用法router-linkVue Router传递参数嵌套路由命名视图watch 属性VueRouter作用及用法Vue Router和v-if/v-show一样, 是用来切换组件的显示的v-if/v-show是标记来切换(true/false)，Vue Router用哈希来切换(#/xxx)Vue Router比v-if/v-show强大，它不仅仅能够切换组件的显示, 还能够在切换的时候传递参数Vue Router使用方式导入Vue Router定义路由规则

文章目录组件数据传递问题通过父组件传递实现示例通过vuex实现示例vuex 是 Vue 配套的 公共数据管理工具，它可以把一些共享的数据，保存到 vuex 中，方便整个程序中的任何组件直接获取或修改我们的公共数据组件数据传递问题如果想要在子组件中使用父组件中的数据, 那么必须通过父组件传递如果想要在子组件中使用祖先组件中的数据, 那么就必须一层一层的传递兄弟组件之间不能直接传递数据, 如果兄弟组件之间想要传递数据, 那么就必须借助父组件虽然通过借助父组件能够实现兄弟组件之间的数据传递, 但是这种

文章目录自定义全局组件自定义局部组件自定义组件的data和methods组件切换动态组件组件动画父子组件父子组件数据传递父子组件方法传递多级组件数据和方法传递匿名插槽具名插槽v-slot指令作用域插槽v-slot指令接收数据Vue核心之一就是组件化，在前端开发中组件就是把一个很大的界面拆分为多个小的界面, 每一个小的界面就是一个组件，将大界面拆分成可复用的小界面就是组件化。组件化可以简化代码，提高复用性。自定义全局组件如何自定义组件：创建组件构造器注册已经创建好的组件使用注册好的组件方式一：

文章目录单元素动画效果多元素动画效果通过JS钩子实现动画配合Velocity实现过渡动画自定义样式动画配合Animate实现过渡动画transition-group单元素动画效果给Vue控制的元素添加过渡动画将需要执行动画的html元素放到transition元素中定义好.v-enter .v-enter-active .v-enter-to .v-leave .v-leave-active .v-leave-to 样式。transition组件中的元素显示时会自动查找.v-enter/.v-e

文章目录计算属性过滤器计算属性插值语法特点是可以在{{}}中编写合法的JavaScript表达式，但是没有代码提示，语句过于复杂不利于我们维护。如何解决？对于复杂的逻辑我们可以使用。计算属性使用示例如下：<div id="app"> <p>{{name}}</p> <p>{{age + 1}}</p> <p>{{msg.split("").reverse().join("")}}</p>

文章目录v-once指令v-text及v-html指令v-if指令v-show指令v-for指令v-bind指令绑定class绑定stylev-on指令自定义全局指令自定义局部指令指令就是Vue内部提供的一些自定义属性,这些属性中封装好了Vue内部实现的一些功能。只要使用这些指令就可以使用Vue中实现的这些功能v-once指令Vue双向数据绑定的特点是只要数据发生变化, 界面就会跟着变化，该指令让界面不要跟着数据变化, 只渲染一次。通过vue调试工具修改vue对象节点的值发现原始数据的标签不会更改，当

文章目录VUE简介入门示例MVVM及数据绑定VUE简介什么是VueVue.js 是一套构建用户界面的框架，不仅易于上手，还可以与其它第三方库整合(Swiper、IScroll、…)。框架和库的区别框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重构整个项目。库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。例如: 从jQuery 切换到 Zepto, 无缝切换。从IScroll切换到ScrollMagic,