![](https://img-blog.csdnimg.cn/20200413105806502.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 74
vue
楠丶
这个作者很懒,什么都没留下…
展开
-
vue笔记 (十六) axios的基本使用
安装使用 cdn:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>使用 npm:$ npm install axios --saveGET 方法axios.get('http://123.207.32.32:8000/home/multidata') .then(res =&g...原创 2020-04-11 22:02:18 · 312 阅读 · 0 评论 -
vue笔记 (十四) vue-router (4):导航守卫guard、组件缓存keep-alive
导航守卫导航守卫主要用来监听路由的进入和离开,vue-router 提供了三类守卫方式, 全局设置,路由设置,组件内部设置。全局设置全局前置守卫const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { next()})三个参数解析:to: 即将要进入的目标路由对象from:...原创 2020-04-03 14:09:09 · 1456 阅读 · 0 评论 -
vue笔记 (十三) vue-router (3):嵌套路由、路由参数传递与获取、$router和$route区别
嵌套路由嵌套路由是一个很常见的功能,比如在 home 页面中,我们希望通过 /home/news 和 /home/message 访问一些内容。一个路径映射一个组件,访问这两个路径也会分别渲染两个组件。路径和组件的关系如下:实现嵌套路由有两个步骤:1.创建对应的子组件,并且在路由映射中配置对应的子路由配置路由:2.在组件内部使用<router-view>标签显示效...原创 2020-04-03 00:00:49 · 4057 阅读 · 1 评论 -
vue笔记 (十二) vue-router(2):router-link属性补充、编程式路由、动态路由、路由懒加载
router-link属性补充在前面的 <router-link> 中,我们只是使用了一个属性:to,用于指定跳转的路径<router-link> 还有一些其他属性:tag:<router-link to="/home" tag="button">首页</router-linktag可以指定 <router-link> 之后渲染成什么...原创 2020-04-01 23:27:27 · 450 阅读 · 0 评论 -
vue笔记 (十一) vue-router(1):路由概念、发展阶段、vue-router基本使用
路由概念什么是路由路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动 — 维基百科路由器提供了两种机制, 路由和转送:路由是决定数据包从来源到目的地的路径转送将输入端的数据转移到合适的输出端路由中有一个非常重要的概念叫路由表,路由表本质上就是一个映射表,决定了数据包的指向。发展阶段后端路由阶段早期的网站开发,整个 HTML 页面都是是由服务器来...原创 2020-04-01 14:04:37 · 390 阅读 · 0 评论 -
vue笔记 (十) vue-cli2和vue-cli3的使用与对比
CLI 是 Command-Line Interface , 翻译为命令行界面, 俗称脚手架。Vue CLI 是一个官方发布的 vue.js 项目脚手架,使用 vue-cli 可以快速搭建 Vue 开发环境以及对应的 webpack 配置。vue-cli的使用前提,已安装node和webpack。vue-cli2安装$ npm install -g @vue/cli注意:上面安装的是vu...原创 2020-03-31 19:36:38 · 490 阅读 · 0 评论 -
前端模块化开发-发展过程及解决方案
为什么需要模块化JavaScript原始功能在网页开发的早期,js 制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码很少,直接将代码写在 ...原创 2020-03-27 12:28:52 · 165 阅读 · 0 评论 -
Vue学习笔记 (九) slot插槽-新旧版本用法(vue2.6.0前后)
slot 翻译为插槽,插槽的目的是让我们原来的设备具备更多的扩展性。vue组件中使用插槽,也是为了让我们封装的组件更加具有扩展性,让使用者可以决定组件内部的一些内容到底展示什么。vue2.6.0之前用法单个插槽(默认/匿名插槽)在子组件中,使用特殊的元素 就可以为子组件开启一个插槽,该插槽插入什么内容取决于父组件如何使用。具名插槽当子组件的功能复杂时,子组件的插槽可能并非是一个。比...原创 2020-03-26 22:37:40 · 811 阅读 · 0 评论 -
Vue学习笔记 (八) 父子组件通信
父子组件的传值父传子:通过props向子组件传递数据子传父:通过自定义事件向父组件发送消息父传子props验证1.默认值props: { cmessage: { type: String, default: '默认值', // 默认值 }当默认值类型是数组或对象时,default后面必须是一个函数props: { cmessage: { ...原创 2020-03-25 23:05:43 · 142 阅读 · 0 评论 -
Vue笔记 (七) 组件化思想
Vue组件化组件化是 Vue.js 中的重要思想,它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何的应用都会被抽象成一颗组件树:注册组件的基本步骤(了解)Vue.extend()这种写法在Vue2.x以后基本就很少见了,会直接使用语法糖,但内部还是这个原理。全局组件和局部组件当我们通过调用 Vue.component() 注册组件时,组件的注册是全...原创 2020-03-24 22:15:07 · 473 阅读 · 0 评论 -
Vue笔记 (六) v-model的基本使用及实现原理
v-model的基本使用vue 中使用 v-model 指令来实现表单元素和数据的双向绑定。<div id="app"> <input type="text" v-model="message"> <h2>{{message}}</h2></div><script src="../js/vue.js"><...原创 2020-03-23 16:14:48 · 313 阅读 · 0 评论 -
JavaScript高阶函数filter、map、reduce的使用
filter函数(过滤)filter用于过滤,就是把数组中的每个元素,使用回调函数func进行校验,回调函数func返回一个布尔值,将返回值为 true 的元素放入新数组let array = [1, 2, 4, 6]let newArray = array.filter(item => item < 6)console.log(newArray) // [1, 2, 4]m...原创 2020-03-23 13:59:13 · 179 阅读 · 0 评论 -
Vue笔记 (五) 阶段性小案例
鼠标点击改变样式如下图,给出一个列表,鼠标点击样式跟着改变。css:.active { color: red;}html:<div id="app"> <ul> <li v-for="(item,index) in movies" :class="{active:index === currentIndex}" ...原创 2020-03-22 23:06:55 · 127 阅读 · 0 评论 -
Vue笔记 (四) 事件监听v-on、条件判断v-if、v-show、循环遍历v-for
v-on在前端开发中,我们需要经常和用户进行交互,这个时候,就必须监听用户发生的事件,比如点击、拖拽、键盘事件等,在 Vue 中监听事件使用 v-on 指令基本用法<!-- 'add'是在下面定义的方法名 --> <button v-on:click="add">+</button>// ...data: { num: 0},methods...原创 2020-03-21 23:15:48 · 3589 阅读 · 0 评论 -
Vue笔记 (三) 绑定属性v-bind和计算属性computed
v-bind基本用法v-bind 用于绑定一个或多个属性值,或者向另一个组件传递 props值(后期介绍链接)。前面学习的指令主要作用是将值插入到我们模板的内容当中,但是,除了内容需要动态来决定外,某些属性我们也希望动态来绑定,比如:动态绑定 a 元素的 href 属性、动态绑定 img 元素的 src 属性。这时可以使用 v-bind 指令来动态绑定属性<img v-bind:s...原创 2020-03-20 22:50:05 · 4249 阅读 · 0 评论 -
Vue笔记 (二) Vue的插值操作和简单V指令
插值操作Mustache可以通过Mustache语法(也就是双大括号),将data中的文本数据插入到HTML中:<div class="div"> <!-- 插到标签中 --> <h2>Hello {{name}}</h2> <!-- 使用了两个Mustache--> <h2>{{firstName}} {...原创 2020-03-20 11:04:03 · 162 阅读 · 0 评论 -
Vue笔记 (一) Vue简介、MVVM、Vue生命周期
Vue简介Vue(读音 /vjuː/,类似于 view)是一个渐进式的框架,什么是渐进式:渐进式意味着你可以将 Vue 作为应用的一部分嵌入其中,带来更丰富的交互体验,或者如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统(比如:Core+Vue-router+Vuex)也可以满足你各种各样的需求Vue 有很多特点和Web开发中常见的高级功能:解耦视图和数据可复...原创 2020-03-19 14:17:49 · 226 阅读 · 0 评论 -
vue组件传值的几种方式
1.父传子首先在父组件中把要传的值msg绑定到子组件上,然后data中定义msg在子组件中定义props用来接收即可2.子传父首先在子组件里通过点击button按钮,通过this.$emit(arg1,arg2) arg1:方法名字,arg2:要传出的值,传出一个方法名为toParent的方法接下来我们就要去父组件接收这个函数此时进入到父组件,在子组件上定义了一个@toParen...原创 2019-12-10 15:06:04 · 376 阅读 · 0 评论 -
vue-router学习整理-单页面应用的控制中心
路由在单页面应用中是一个很重要的角色,它就是用来切换组件的,因为在单页面应用是没有页面这个概念的,只有一个页面index.html,所以只能通过切换组件来实现类似于跳转到了不同页面的这种效果。一.路由的基本配置首先main.js里面引入并注册在router.js中配置相关项,这里vuecli3已经初始化配置好并演示了两种路由加载方式。在home.vue这个根组件里编写内容通过&...原创 2019-12-10 13:04:28 · 131 阅读 · 0 评论 -
vue笔记 (十五) Vuex基本使用与辅助函数
vuex 是一个专门为vue.js应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。...原创 2019-11-12 22:53:59 · 322 阅读 · 0 评论