vue专栏
前端星人
如有错误 欢迎指正
展开
-
vue-resource与axios的区别与使用
目录一、vue-resource1.vue-resource的安装2.在main.js中导入2.使用vue-resource发送请求二、axios1.安装axios2.使用axios发送请求 一、vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。 vue-resource插件具有以下特点: 1.体积小 vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远原创 2020-07-10 21:31:54 · 5050 阅读 · 2 评论 -
14.Vuex的基本使用与核心概念
1.安装vuex依赖包 npm install vuex --save原创 2020-06-15 16:57:46 · 125 阅读 · 0 评论 -
13.Element UI 的基本使用
1.基于命令行方式手动安装 1.安装依赖包。 npm install element-ui -S 2.在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 ui 2原创 2020-06-09 15:58:56 · 122 阅读 · 0 评论 -
12.vue cli-脚手架的基本使用
脚手架的基本使用一、安装 vue cli二、利用 vue cli 创建vue项目1.基于“交互式命令行”的方式创建新版vue项目2.基于“图形化界面”的方式创建新版vue项目 一、安装 vue cli 1.如果已经安装较低版本的cli,则需要remove当前的cli npm uninstall -g vue-cli 2.安装最新版本的cli npm install -g @vue/cli 3.查看当前cli的版本 vue -V 二、利用 vue cli 创建vue项目 1.基于“交互式命令行”的方式原创 2020-06-09 10:32:58 · 461 阅读 · 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 · 354 阅读 · 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 · 307 阅读 · 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 · 215 阅读 · 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 · 225 阅读 · 0 评论 -
07.单文件组件的基本用法
单文件组件1.传统组件的劣势2.单文件组件的组成结构 1.传统组件的劣势 ① 全局定义组件必须保证组件名称不能重复; ② 字符串模板缺乏高亮,影响书写; ③ CSS明显被遗漏; ④ 没有构建步骤限制,只能使用HTML和ES5 JavaScript,不能使用预处理器。 2.单文件组件的组成结构 // vue单文件组件分为三个模块:template、script、style(结构、行为、样式) <template> <div> <h1>hello,这原创 2020-05-31 22:28:56 · 225 阅读 · 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 · 524 阅读 · 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 · 514 阅读 · 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 · 243 阅读 · 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 · 2016 阅读 · 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 · 169 阅读 · 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 · 135 阅读 · 0 评论