vue专栏
前端星人
如有错误 欢迎指正
展开
-
vue-resource与axios的区别与使用
目录一、vue-resource1.vue-resource的安装2.在main.js中导入2.使用vue-resource发送请求二、axios1.安装axios2.使用axios发送请求一、vue-resourcevue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。vue-resource插件具有以下特点:1.体积小vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远原创 2020-07-10 21:31:54 · 5000 阅读 · 2 评论 -
14.Vuex的基本使用与核心概念
1.安装vuex依赖包npm install vuex --save原创 2020-06-15 16:57:46 · 120 阅读 · 0 评论 -
13.Element UI 的基本使用
1.基于命令行方式手动安装1.安装依赖包。npm install element-ui -S2.在main.js入口文件中导入Element UI 的相关资源。import ElementUI from 'element-ui'//导入组件库import 'element-ui/lib/theme-chalk/index.css'//导入组件样式Vue.use(ElementUI);//配置vue插件2.基于图形化界面自动安装1.运行vue ui命令,打开图形化界面。vue ui2原创 2020-06-09 15:58:56 · 112 阅读 · 0 评论 -
12.vue cli-脚手架的基本使用
脚手架的基本使用一、安装 vue cli二、利用 vue cli 创建vue项目1.基于“交互式命令行”的方式创建新版vue项目2.基于“图形化界面”的方式创建新版vue项目一、安装 vue cli1.如果已经安装较低版本的cli,则需要remove当前的clinpm uninstall -g vue-cli2.安装最新版本的clinpm install -g @vue/cli3.查看当前cli的版本vue -V二、利用 vue cli 创建vue项目1.基于“交互式命令行”的方式原创 2020-06-09 10:32:58 · 439 阅读 · 0 评论 -
11.组件插槽-具名插槽-作用域插槽
组件插槽一、具名插槽二、作用域插槽(slot-scope)一、具名插槽组件插槽的作用:父组件向子组件传递内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <layout-item>原创 2020-06-09 09:45:25 · 340 阅读 · 0 评论 -
10.非父子组件之间的通信-兄弟组件间的通信
兄弟组件间的传值一、单页面中实现效果二、单文件组件中1.在main.js中写入一个事件中心,并向外暴露这个事件。2.在组件 A 中 import 这个事件中心2.在组件 B 中 import 这个事件中心一、单页面中情景:实现点击组件A中的按钮触发组件B中的数据增加,点击组件B中的按钮触发组件A中的数据增加。const hb = new Vue();//注册一个事件中心<body><div id="app"> <children1-item><原创 2020-06-07 18:18:29 · 295 阅读 · 0 评论 -
09.组件间数据交互-父子组件间的通信
父子组件的通信一、父组件向子组件传值一、父组件向子组件传值1.子组件内部通过“props”接收父组件传递过来的值下面展示一个 全局定义的子组件。<script src="../node_modules/vue/dist/vue.js"></script><script> Vue.component('menu-item',{ //这里传递了两个属性 accept、content props:['accept','content']原创 2020-06-05 17:22:43 · 190 阅读 · 0 评论 -
08.Vue单文件组件的路由
单文件路由一、创建Vue项目一、创建Vue项目注意需要以管理员身份运行开发软件,这里我使用到的是webStrom。1.在src目录下创建router文件夹,里面新建一个index.js;2.新建需要用到的组件;红框内的是构建单文件路由需要用到的文件。1.index.html 是唯一需要用到的一个html,它作为 #app的存放容器,暂不需要在里面添加内容。2.FirstVue.vue、SecondVue.vue是创建的两个单文件组件点击查看单文件组件的基本用法。...原创 2020-06-02 00:45:07 · 214 阅读 · 0 评论 -
07.单文件组件的基本用法
单文件组件1.传统组件的劣势2.单文件组件的组成结构1.传统组件的劣势① 全局定义组件必须保证组件名称不能重复;② 字符串模板缺乏高亮,影响书写;③ CSS明显被遗漏;④ 没有构建步骤限制,只能使用HTML和ES5 JavaScript,不能使用预处理器。2.单文件组件的组成结构// vue单文件组件分为三个模块:template、script、style(结构、行为、样式)<template> <div> <h1>hello,这原创 2020-05-31 22:28:56 · 221 阅读 · 0 评论 -
06.vue-router的声明式导航和编程式导航
编程式导航一、声明式导航二、编程式导航1. this.$router.push('hash地址')页面显示效果2.this.$router.go(n)页面显示效果一、声明式导航声明式导航是指通过点击链接实现导航的方式,比如 a、router-link 标签。<div id="app"> <router-link :to="{ name:'user',params:{id:3} }">login3</router-link> <router-li原创 2020-05-31 16:43:59 · 510 阅读 · 0 评论 -
05.动态路由与静态路由匹配
通过动态路由参数的模式进行路由匹配1.路由的页面渲染2.创建路由的模板3.创建路由实例4.将路由注册到Vue实例5.页面显示效果1.路由的页面渲染<div id="app"> <router-link to="/login/1">login1</router-link> <router-link to="/login/2">login2</router-link> <router-link to="/login/3原创 2020-05-30 22:26:21 · 501 阅读 · 0 评论 -
04.路由的简单嵌套使用(路由和子路由)
嵌套路由1.父路由组件模板2.子路由模板3.定义路由实例4.Vue实例中注册路由1.父路由组件模板 const login ={ template:'<h1>登录组件</h1>' }; const register ={ template:` <div> <h1>注册组件</h1> <router-link to="/reg原创 2020-05-30 22:04:39 · 233 阅读 · 0 评论 -
03.路由的重定向(强制跳转)
路由的重定向:用户在访问地址A的时候,强制用户跳转到地址C,从而展示特定的组件页面redirect#path表示被重定向的原地址,redirect表示被重定向的新地址。let router =new VueRouter({ routes:[ {path:'/',redirect:'/login'}, {path:'/login',component:login}, {path: '/register',compon原创 2020-05-30 21:40:23 · 1985 阅读 · 0 评论 -
02.VueRouter的基本使用
vue-router的基本使用1.引入相关库文件2.添加路由连接3.添加路由填充位4.定义路由组件5.配置路由规则并创建路由实例6.把路由挂载到Vue的根实例中效果展示1.引入相关库文件下面展示一些 vue.js 和VueRouter.js 的引入。<script src="./node_modules/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.原创 2020-05-30 17:01:56 · 161 阅读 · 0 评论 -
01.Vue请求数据
Vue请求数据-前端练习日记1.请求数据的渲染2.页面引入相关文件3.编写Vue实例1.请求数据的渲染下面展示一些 页面渲染的代码。<div id="app" > //items是一个数组,item是items数组中的一个对象 <div v-for="item in items"> <h1>{{item.id}}</h1> <h2>{{item.name}}</h2> &l原创 2020-05-30 16:01:44 · 129 阅读 · 0 评论