vue
易.金
这个作者很懒,什么都没留下…
展开
-
Vue 父传子,子传父,兄弟组件通信
Vue 常用的三种传值方式1.父传子2.子传父3.非父子传值父子组件的关系首先,我们要使用Vue的组件传值,我们要知道组件之间的关系。父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示什么是Prop要实现组件传值,我们要了解什么是prop。Prop是用来传递数据的一种自定义属性。Pro...原创 2018-12-04 09:21:52 · 2498 阅读 · 3 评论 -
Vuex总结
Vuex是什么?官方文档是这样说的:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。这样看上去好像很难理解,那我们可以这样理解:Vuex是一个仓库,我们首先是把运来的所有数据放进仓库里。这样我们去获取数据就不用再去运数据了。直接从仓库里面拿数据就可以了。其本质就是:vuex就...原创 2018-12-11 17:27:56 · 188 阅读 · 0 评论 -
Vuex与axios的综合使用
在src的目录下,创建store文件夹,创建store.js当作仓库在store.js内容里写import Vue from 'vue'import Vuex from 'vuex'import axios from 'axios'Vue.use(Vuex); //必不可少const state = { msg :'' //用来装数据}const mutations...原创 2018-12-11 17:28:10 · 449 阅读 · 0 评论 -
用vue写星级评分效果
首先新建一个vue组件,名叫star.vuestar.vue的代码<template> <div> <ul class="star"> <li v-for="item in chance" :class="item&q原创 2018-11-08 21:35:29 · 2250 阅读 · 1 评论 -
vue-cli的安装
在正式安装vue-cli之前,我们先认识一下npm。npm是什么?npm其实是Node.js的包管理工具(package manager)。为啥我们需要一个包管理工具呢?因为我们在Node.js上开发时,会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包,每次都根据名称搜索一下官方网站,下载代码,解压,再使用,非常繁琐。于是一个集中管理的工具应运而生:大家都把自己开发的模...原创 2018-11-06 21:46:59 · 145 阅读 · 0 评论 -
Vue Router 的基本使用
Vue Router 的作用vue-router可以通过html5的history API或者hash实现单页应用,即不刷新跳转,切换地址,只是页面上的组件的切换;vue-router可以实现页面间传参等其他功能;单页应用的优缺点优点:无刷新体验,提升了用户体验;完全的前端组件化,前端开发不再以页面为单位,更多地采用组件化的思想,代码结构和组织方式更加规范化,便于修改和调整;API ...原创 2018-11-19 22:06:34 · 163 阅读 · 0 评论 -
Vue-Router 传参
**1.利用router-link 中的to进行传参**在to前面加冒号,进行数据绑定<router-link :to="{name:'test',params:{user:'username'}}">第二页</router-link>注意 name 写的是你要传参到哪个组件,我们之前在路由配置中配置过,记住原创 2018-11-29 11:05:00 · 417 阅读 · 0 评论 -
Vue 全局组件跟局部组件
Vue 全局组件全局组件注册方式:Vue.component(组件名,{方法})我们项目一般都是用vue-cli 来写的,我们就用vue-cli的形式来写在src下的main.js导入组件,在全局中注册,就能在项目中使用例:import HelloWorld from './components/HelloWorld.vue'Vue.component('Hello',HelloWor...原创 2018-12-11 17:30:14 · 275 阅读 · 0 评论