ChenLingZhi1115的博客

【代码】vscode配置快速生成vue2和vue3模板。

vue/cli: 3.11.0创建项目vue create 项目名称@vue/cli: 2.x.x 创建项目下载完成后初始化npm i创建项目。inquirer

created mounted拿不到props值问题子组件动态获取父组件传来的值时，因为props原理是通过ajax请求回来的。请求的这个过程是需要时间，但是子组件的渲染要快于ajax请求过程，所以此时 created 、 mounted 这样的只会执行一次的生命周期钩子已经执行了，但是 props 还没有流进来（子组件），所以只能拿到默认值。解决方法：需要对props的值进行监听，然后获取新值：props:{ selectData:{ type:Array }

文章目录vuex以模块使用模块没有设置命名空间的getters访问方式模块没有设置命名空间的mutations访问方式模块没有设置命名空间的actions访问方式：和mutations一样在组件只能可以通过this.$store.state访问到状态，为什么不能在组件中直接修改state?为了保证数据是单向流动的，只能在store中操作数据，而组件只能够使用状态，不能修改，mutations中必须是同步操作，而在actions中可以有异步操作，所有mutations才能操作state,如果ac

使用scss，编译时提示报错，信息如下 error in ./src/common/projectTab.vue?vue&type=style&index=0&id=1bea45d7&lang=scss&scoped=true&Syntax Error: TypeError: this.getOptions is not a function各种百度搜索搞了一下午原因是因为sass-loader版本太高了。。。=_=||解决降低sass-l

在组件只能可以通过this.$store.state访问到状态，为什么不能在组件中直接修改state?为了保证数据时单向流动的，只能在store中操作数据，而组件只能够使用状态，不能修改，mutations中必须是同步操作，而在actions中可以有异步操作，所有mutations才能操作state,如果actions中能操作state的话，数据会变得难以管理mutations中的数据变化是可以被vue的开发工具vue-devTools观测到。 actions中的数据变化是不可以被v..

文章目录vuex基本使用---state使用store中的状态的便捷方法使用计算属性使用vuex中的mapState，这个方法与第一种完全等价要将自定义计算属性与状态管理数据的计算属性合并一起，可以使用Object.assign或者...扩展符vuex基本使用---gettervuex基本使用---mutationsvuex基本使用---actionsvuex是一个专门为vue.js应用程序开发的状态管理模式，就是管理全局数据的一种模式，可以实现组件数据共享，集中式管理组件的数据，安装：npm i v

文章目录mint-ui => 移动端vant => 移动端element ui => pc端iview => pc端vue 资源中有很多别人写的第三方插件，可以选用合适自己的。进入vue图像界面工具 安装组件命令：vue ui 还是测试版本npm run servenpm run buildv-model 等价于 绑定一个value值，并实现input事件 => :value='' ,@input='事件' <tabs :value='select

文章目录自定义指令1.全局指令2.局部指令自定义过滤器混入1.混入和实例的执行顺序自定义插件自定义指令1.全局指令1. main.js: 实现拖拽 // 自定义全局指令 // 参数1:指令的名字 // 参数2:指令的实现函数 // Vue.directive('color', (el, binding, vnode, oldvnode)=>{ // console.log('color指令调用了'); // // console.log(

文章目录vue-router插件使用---路由基础router-link使用嵌套路由--子路由配置动态路由 传值命名路由 name=''编程式导航：使用js切换路由router 重定向 别名router history模式命名视图Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带

文章目录一、设计思路二、数据劫持三、发布与订阅四、总结一、设计思路MVVM框架相对传统的dom操作模式，最大的优点就是数据的双向绑定。它借鉴了桌面应用程序MVC的设计思想，Model与View之间通过ViewMode关联，ViewModel负责将Model数据的变化显示到View上，通过将View的改变反馈到Model上这就是我们常说的双向绑定数据机制。那如何设计MVVM模型模型呢。需要解决两个关键问题：1、如何知道数据更新。2、数据更新后，如何通知变化。下面我们就分别介绍下vue是

文章目录propsprops可以访问不能设置props需要进行设置有两种方式props 对象形式接收动态组件异步组件插槽slotslot的name属性props组件的属性在js部分以this方式访问，在dom结构当中以 属性名称访问props可以访问不能设置props是组件外部属性，可以访问，不能设置 => vue将这个称为单选数据流因为还存在其他组件接受这个props传来的值，v...

文章目录组件单文件组件vue cli3: vue脚手架工具main.js文件：解读main.js:脚手架创建的单文件组件data属性对应的是函数与this指向vscode中vue工具：Vetur，快捷方式快速创建vue文件：scf+enter声明全局组件声明局部组件单文件组件方式进行父子组件通信:非父子组件传值：为什么 组件中 data属性对应的是函数，而实例中的data是对象？组件正常情况下...

文章目录事件处理v-on: 绑定事件 简写@事件修饰符：@contextmenu 右击键盘事件：v-model: 表单处理v-model修饰符生命周期：事件处理v-on: 绑定事件 简写@ 1. html: <div>count: {{count}}</div> <button v-on:click="count+=1;"...

文章目录slot 接收到的组件标签，怎么是外部组件与这个内部组件进行传值组件标签嵌套的通信方式：使用空实例对象进行传值slot传值ref：给标签设置ref，访问dom元素，在当前组件时唯一性过渡动画是vue的内置对象----css过渡transition---动画transition----既有过渡也有动画使用anmiate.cssjavascript 钩子函数transition-group 多...

文章目录18个指令v-textv-html:v-show:v-if:v-for: 可以遍历数组 对象 数字 字符串v-bind: 解析属性：title src href type alt placeholder class stylev-pre: 不需要表达式，不解析当前dom及其内部结构内所有的vue指令v-cloak: 不需要表达式v-once: 不需要表达式，只解析一次计算属性：计算属性的...

文章目录vue指令：MVVM模型组件vue是MVVM js框架，是由国人尤雨溪开发，与react angular对比：中文文档比较完善 代码轻量 上手简单 容易使用vue: vue是一套英语构建用户界面的渐进式框架，与其他大型框架不同的是，vue被设计为可以自底向上逐层应用。vue的核心只关注视图层，不仅易于上手，还便于与第三方库和既有项目整合。另一方面，当与现代化的工具链以及各种支持类库...