随笔分类 - vue学习
摘要：之前的router-link的to参数，是一个地址 此时我们可以进行参数配置，我们的路由不仅可以添加路由地址，还可以携带路由参数 path和query 我们可以通过to参数传入一个对象 1 <template> 2 <div> 3 <!--显示区域--> 4 <router-link :to="{p
阅读全文
摘要：1.to属性 之前我们学习的路由地址都是自己手动输入的，没有任何的触发条件，此时我们可通过router-link设置点击跳转的元素 1 <template> 2 <div> 3 <router-link to='home'>点击跳转到home</router-link> 4 <router-link
阅读全文
摘要：Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。 https://router.vuejs.org/zh/ 主要包含的功能 l 嵌套的路由/视图表 l 模块化的、基于组件的路由配置 l 路由参数、查询、通配符 l 基于 Vu
阅读全文
摘要：provide和inject是一对组合，作用是传递数据，祖先组件设置一个provide函数，返回一个对象，inject是设置在后代组件中 我们在祖先级设置了provide 1 provide() { 2 return { 3 grid: 1 4 } 5 }, 在后代组件中可以用inject接收 1
阅读全文
摘要：栅格系统的基本使用 我们定义了两个概念，行row和列col，具体使用方法如下： 使用row在水平方向创建一行 将一组col插入在row中 在每个col中，键入自己的内容 通过设置col的span参数，指定跨越的范围，其范围是1到24 每个row中的col总和应该为24 如果我们会遇到些栅格的时候报错
阅读全文
摘要：我们会遇到国际化的问题，比如一个页面可以切换中英文，如果同样的代码写两份，势必会造成严重的冗余，所以我们可以利用国际化，优化代码的结构 如何使用 第一步安装依赖 npm install --save vue-i18n 基本使用 我们新建一个lang文件夹，内部存放国际化的字段名称 然后在index.
阅读全文
摘要：和element-ui类似的是iview-ui框架的使用方法基本相同，不同的是提供api和事件等等 iview-ui地址：https://iviewui.com/ 如何使用 第一步安装 npm install view-design --save 要在main.js中进行配置 1 import Vu
阅读全文
摘要：基本使用 https://element.eleme.cn/#/zh-CN/component/installation 现在的前端开发更多的是关注逻辑，很少关注样式，因为ui框架提供给我们足够多的ui组件 我们学习vue使用ui框架，更多的是element-ui和iview-ui 如何使用ui框架
阅读全文
摘要：我们在说局部参数之前，需要知道，new Vuex({})，vuex的参数对象，除了可以罗列modules之外，还可以设置state，mutations，actions，getters，和我们之前设置单一的对象相同 1 import Vuex from 'vuex' 2 // 引入vue 3 impo
阅读全文
摘要：我们现在学习的store.js文件是一个单一的数据模块类型，如果此时我们项目特别的庞大，比如我们有新闻、体育、科学等等模块，这些模块都有自己的全局数据，此时如果都放到store.js的state中，不好维护 所以我们可以通过module进行进行结构、模块的拆分 基本使用 我们在store.js文件中
阅读全文
摘要：什么是action Action 类似于 mutation，不同在于： Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作 总结来说action就是处理异步任务，mutations是处理同步 我们通常使用action请求一些异步任务，比如一些初始化全局
阅读全文
摘要：Vuex的getters其实就是全局的一个computed Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算 基本使用 store.js中定义了
阅读全文
摘要：Vuex的x字母表示extension，是“增强”的意思，是vue的插件，也是vue的数据管理容器 官网:https://vuex.vuejs.org/zh/ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测
阅读全文
摘要：过渡 vue 提供了 transition 的封装组件 所有的关于过渡的动画效果都是通过transition组件进行设置的 几种能够过滤的场景 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 基本使用 1 <template> 2 <div> 3 <button
阅读全文
摘要：我们之前学习的v-if，v-for等等都是vue的系统指令，我们现在需要自己开发自定义指令 Vue.directive提供了自定义指令的入口 基本使用 我们在App.vue中设置了一个p元素 1 <p v-color='"blue"'>123456789</p> v-color就是自定义的一个指令名
阅读全文
摘要：Vue的自定义过滤器就是通过对数据的过滤从而实现对数据优化，得到我们需要的数据内容 比如我们进行对时间的过滤，从格林威治时间转换为我们日常需要的2020-9-13日 1 <template> 2 <div> 3 <table> 4 <tr> 5 <th>姓名</th> 6 <th>年龄</th> 7
阅读全文
摘要：官方地址：https://cn.vuejs.org/v2/guide/components-slots.html#ad 官方解释:Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。 插槽能干什么？
阅读全文
摘要：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 我们在写组件的时候会遇到一些问题，比如我们想让页面加载好了
阅读全文
摘要：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 我们先看混入的一个可复用的特点 mixins文件 1 export const MixIns={ 2 da
阅读全文
摘要：关于$refs的官方介绍 一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例 关于$el的官方介绍 Vue 实例使用的根 DOM 元素 我们自己新建组件的时候，如何让父组件直接触发子组件的方法，比如父组件让子组件的数据加1 父组件 1 <template> 2 <div
阅读全文
浙公网安备 33010602011771号