Vue
zhaihaohao1
这个作者很懒,什么都没留下…
展开
-
Vue学习33----第三方日历组件ele-calendar 的使用(结合了lodash中的_.filter,_.find,_.map)
文档地址:https://www.npmjs.com/package/ele-calendarhttps://github.com/xuyanming/ele-calendar组件: <ele-calendar :render-content="renderContent" :data="datedef" :prop="prop" ...原创 2019-05-09 10:24:02 · 5440 阅读 · 2 评论 -
Vue学习32----虚拟dom操作(操作内联样式,类选择器,元素属性,添加删除修改数据,单选框,多选框)
Map使用key-value 存储数据的常见用法如下: iClick() { alert('事件点击'); //测试Map, //key-value 存储数据 let map = new Map(); map.set('0', {name: 'zhh0'}); map.set('1', {name:...原创 2019-04-25 10:37:48 · 735 阅读 · 0 评论 -
Vue学习31----补充es6知识,第三方模块 lodash 的使用
lodash 分装了很多好的方法,用起来很方便官网:https://www.lodashjs.com/https://www.html.cn/doc/lodash/4.15.0.html#_mapcollection-iteratee_identity使用步骤:1安装模块 npm i --save lodash2在使用的地方引入模块 import lodash from ‘lodash...原创 2019-04-24 11:29:00 · 428 阅读 · 0 评论 -
Vue学习30----补充es6知识,第三方模块 moment 的使用
moment 是一个操作时间的模块官网:http://momentjs.cn/使用步骤:1安装模块 npm install moment --save2在使用的地方引入模块 import moment from ‘moment’;3看文档使用代码: method3() { //拿到当前时间 let dangqian = moment().forma...原创 2019-04-24 11:22:42 · 784 阅读 · 0 评论 -
Vue学习29----补充es6知识,扩展运算符 三个点(...)
<template> <div id="app"> <button @click="iClick11">按钮</button> </div></template><script> // 扩展运算符( spread )是三个点(...)。 // 就是将一个数组转为用逗号分隔的参数序列...原创 2019-04-23 11:08:30 · 10283 阅读 · 0 评论 -
Vue学习28----Vuex 的使用getters,actions
接着:https://blog.csdn.net/zhaihaohao1/article/details/89234464在27的基础上讲的:vuex官网:https://vuex.vuejs.org/zh/guide/getters改变state里面的count数据的时候会触发 getters里面的方法 获取新的值 (基本用不到)调用:this.$store.getters.com...原创 2019-04-12 13:37:57 · 909 阅读 · 0 评论 -
Vue学习27----Vuex 的使用state,mutations实现多个页面数据共享
vuex官网:https://vuex.vuejs.org/zh/guide/Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式1.vuex解决了组件之间同一状态的共享问题 (解决了不同组件之间的数据共享)2.组件里面数据的持久化。小项目不部建议用vuexvuex的使用:(共享的数据)1、安装vuexcnpm install vuex --save2、在src目录...原创 2019-04-12 13:31:16 · 1803 阅读 · 0 评论 -
Vue学习26----路由模块化
以前路由的配置文件都写在了main.js中,显得很乱,现在把路由封装成一个模块,在mian.js中引用就可以了把https://blog.csdn.net/zhaihaohao1/article/details/89051936中的路由封装成模块项目结构如下:router.js 中封装的路由模块import Vue from 'vue';import VueRouter fro...原创 2019-04-11 10:56:27 · 418 阅读 · 0 评论 -
Vue学习25----ElementUi(Pc框架)的使用,按需引入
按需引入:我们可以只引入需要的组件,以达到减小项目体积的目的。看文档: http://element-cn.eleme.io/#/zh-CN/component/quickstart使用步骤:0、安装 cnpm i element-ui --save1、安装 cnpm install babel-plugin-component -D2、在.babelrc 中 配置文件把{ ...原创 2019-04-11 10:16:25 · 405 阅读 · 0 评论 -
Vue学习24----ElementUi(Pc框架)的使用
element UI的使用步骤:1.找官网 http://element.eleme.io/#/zh-CN/component/quickstart2.安装 cnpm i element-ui -S -S表示 --save3.在main.js中引入element UI的css 和 插件 import ElementUI from 'element-ui'; im...原创 2019-04-10 18:23:27 · 326 阅读 · 0 评论 -
Vue学习23----Mint UI(手机端框架)的使用infinite-scroll结合api接口实现真实上拉分页加载更多
在 https://blog.csdn.net/zhaihaohao1/article/details/89086785 基础上文档:http://mint-ui.github.io/docs/#/zh-cn2/infinite-scroll效果图:项目结构:main.js是配置文件App.vue 是入口文件Home.vue 中是列表的上拉加载main.jsimport Vu...原创 2019-04-09 18:02:09 · 679 阅读 · 0 评论 -
Vue学习22----Mint UI(手机端框架)的使用,实现Toast,ActionSheet等
基于Vue的Ui框架饿了么公司基于vue开的的vue的Ui组件库MintUi 基于vue 移动端的ui框架官网:http://mint-ui.github.io/#!/zh-cngithub上面下载源码https://github.com/ElemeFE/mint-ui找到example----pages----各种组件的例子使用步骤:1.找官网http://m...原创 2019-04-08 13:35:15 · 847 阅读 · 0 评论 -
Vue学习21----路由的嵌套
文档:https://router.vuejs.org/zh/guide/essentials/nested-routes.html在:https://router.vuejs.org/zh/guide/essentials/navigation.html的基础上实现实现步骤:1.配置路由 { path: '/user',component: User, ch...原创 2019-04-07 11:17:28 · 103 阅读 · 0 评论 -
Vue学习20----编程式的导航(跳转及传值,相当于用js实现)
在https://blog.csdn.net/zhaihaohao1/article/details/89051936 的基础上来实现除了使用 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。例如:登楼成功或者失败,跳转不同页面参考文档:https://router.vuejs.org/zh/guide/essentials/navigatio...原创 2019-04-07 10:25:32 · 470 阅读 · 0 评论 -
Vue学习19----路由结合请求数据,实现新闻列表,新闻详情
效果图:项目结构:注意点:1.在index中:配置适应手机 <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">2.assets下面写的通用的cssbasic.scss在main.js中引入import ‘./assets/css/b...原创 2019-04-06 17:28:40 · 759 阅读 · 0 评论 -
Vue学习18----动态路由传值及get传值(跳转及传值,相当于a标签)
在上一讲 https://blog.csdn.net/zhaihaohao1/article/details/89051936 配置好路由基础上,进行动态路由传值和get传值动态路由传值实现步骤:1、在 main.js中,配置动态路由 { path: '/newscontent', component: NewsContent },2、发送数据<router-link :to="...原创 2019-04-06 10:10:15 · 273 阅读 · 0 评论 -
Vue学习17----配置路由及默认跳转
文档https://router.vuejs.org/zh/vue路由配置实现步骤:1.安装npm install vue-router --save / cnpm install vue-router --save2、在main.js中,引入并 Vue.use(VueRouter)import VueRouter from ‘vue-router’Vue.use(VueRo...原创 2019-04-06 09:09:40 · 1252 阅读 · 0 评论 -
Vue学习16----非父子组件传值
实现步骤:非父子组件传值1、新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 (VueEvent.js) import Vue from 'vue'; var VueEvent = new Vue(); export default VueEvent;2、在要广播的地方引入刚才定义的实例就是引入实例,发送数据(Home.js...原创 2019-04-06 08:51:58 · 173 阅读 · 0 评论 -
Vue学习15----父组件主动获取子组件的数据和方法,子组件主动获取父组件的数据和方法
父组件主动获取子组件的数据和方法:1.调用子组件的时候定义一个ref <v-header ref="header"></v-header>2.在父组件里面通过 this.$refs.header.属性 this.$refs.header.方法子组件主动获取父组件的数据和方法: this.$parent.数据 this.$parent.方法下面写一个例...原创 2019-04-04 14:29:58 · 2581 阅读 · 0 评论 -
Vue学习14----父组件给子组件传值
父组件给子组件传值可以传数据可以传方法可以传父对象1.父组件调用子组件的时候 绑定动态属性 <IHome :title="title"></IHome>2、在子组件里面通过 props接收父组件传过来的数据 props:['title'],3、在子组件中,展示父组件传过来的值 <div>{{title}}</div>下面写个...原创 2019-04-04 14:13:30 · 134 阅读 · 0 评论 -
Vue学习13----数据请求模块fetch-jsonp
第三方提供的数据请求模块文档:https://www.npmjs.com/package/fetch-jsonpfetch-jsonp使用方法1.安装模块cnpm install fetch-jsonp --save2.在使用的文件中引用import fetchJsonp from ‘fetch-jsonp’;3.根据api使用App.vue代码:<!--参考文档:--...原创 2019-04-03 13:50:59 · 564 阅读 · 0 评论 -
Vue学习12----数据请求模块axios,vue跨域访问,图片上传,遇到的问题
第三方提供的数据请求模块效果图:axios 的使用 步骤:1、安装 cnpm install axios --save2、哪里用哪里引入 import Axios from ‘axios’;3、使用App.vue 代码:<template> <div> <button @click="httpGetData()">get...原创 2019-04-03 13:45:58 · 785 阅读 · 0 评论 -
Vue学习11----数据请求模块vue-resource(推荐)
vue-resource 是Vue官方自带的数据请求模块参考文档:https://www.npmjs.com/package/vue-resourcehttps://github.com/pagekit/vue-resource/blob/HEAD/docs/http.md下面我写了一个例子效果图:项目结构:使用vue-resource请求数据的步骤1、需要安装vue-reso...原创 2019-04-03 13:40:56 · 269 阅读 · 0 评论 -
Vue学习10----Vue中生命周期函数/生命周期钩子
官方文档:https://cn.vuejs.org/v2/guide/instance.html生命周期函数/生命周期钩子:组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法 这些方法就叫做生命周期函数mounted() 模板编译完成执行的函数,请求数据,操作dom , 放在这个里面beforeDestroy() 页面销毁的时候要保存一些数据,就可以监听这个销毁的生命周期函数...原创 2019-04-02 14:17:20 · 293 阅读 · 0 评论 -
Vue学习9----Vue中创建组件以及使用组件
效果图:项目结构:IHeader.vue是自己创建的组件App.vue是父组件IHeader.vue中<!--模板,里面写html--><template> <!--根组件,只能有一个根组件--> <div> <div @click="myHead" class="head">{{msg}}</div...原创 2019-04-02 14:08:37 · 522 阅读 · 0 评论 -
Vue学习8----demo练习,todolist使用localStorage实现数据的永久存储
ocalStorage 是es5提供的:ocalStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。ocalStorage 存储字符串。常见用法:存储数据localStorage.setItem(key,value);拿到数据localStorage.getItem(key);删除数据localStorage.removeItem(key);效果...原创 2019-04-01 14:22:24 · 378 阅读 · 0 评论 -
Vue学习7----demo练习,实现todolist效果2
效果图:源码(复制即可运行)App.vue<!--demo练习1,实现todolist效果1--><template> <div id="app"> <input type="text" v-model='todo' /><button @click="add()">增加</button> &l...原创 2019-04-01 11:11:40 · 243 阅读 · 0 评论 -
Vue学习6----demo练习,实现todolist效果1
效果图:源码:复制即可运行App.dev<!--demo练习1,实现todolist效果1--><template> <div id="app"> <!--v-model把把输入框中的数据绑定到todo变量--> <input type="text" v-model="todo"> <butto...原创 2019-04-01 10:12:13 · 199 阅读 · 0 评论 -
Vue学习5----Vue点击事件,方法,获取数据,改变数据,事件对象及自定义属性
效果图:源码(复制即可运行)App.vue<!--06Vue点击事件,方法,获取数据,改变数据,事件对象及自定义属性--><template> <!--渲染--> <div id="app"> <div>{{this.msg}}</div> <button v-on:click="ime...原创 2019-04-01 10:02:01 · 6900 阅读 · 0 评论 -
Vue学习4----Vue及双向数据绑定,v-model,v-on:click,以及ref获取dom节点
效果图:源码,复制即可运行App.vue文件<!--05 Vue及双向数据绑定,v-model,v-on:click,以及ref获取dom节点--><template> <div id="app"> <div>{{msg}}</div> <!--input里面的值改变,影响了msg--> ...原创 2019-04-01 09:56:51 · 571 阅读 · 0 评论 -
Vue学习3----Vue绑定属性,绑定html,绑定class,绑定style
效果图:源码(复制即可使用)App.vue 文件<!--04Vue绑定属性,绑定html,绑定class,绑定style--><template> <!--根节点--> <div id="app"> <div>{{msg}}</div> <!--绑定属性--> <im...原创 2019-04-01 09:49:15 · 343 阅读 · 0 评论 -
Vue学习2----绑定数据,循环数组
把data中的数据渲染到html标签中例子如下(复制即可运行):App.vue文件:<!--03绑定数据,循环数组--><template> <!--只能有一个根节点,所有组件都卸载根节点中--> <div id="app"> <!--显示 data 中定义的变量--> <!--字符串--> ...原创 2019-04-01 09:23:02 · 732 阅读 · 0 评论 -
Vue学习1----环境搭建,运行项目,常见问题
搭建vue的开发环境:https://cn.vuejs.org/v2/guide/installation.html1、必须要安装nodejs2、搭建vue的开发环境 ,安装vue的脚手架工具 官方命令行工具npm install --global vue-cli / cnpm install --global vue-cli (此命令只需要执行一次)3、创建项...原创 2019-04-01 09:15:05 · 232 阅读 · 0 评论