Vue
作者介绍
要成为程序员的男人，个人主页：www.pengshiyu.com
-
原创
Vue服务端渲染Nuxt.js实例
nuxtjs： https://zh.nuxtjs.org/ SSR：server side render 1、使用模板新建项目 vue init nuxt-community/starter-template <project-name> cnpm install npm run dev 2、配置axios https://github.com/nuxt-community/axi...2019-11-15 00:20:25 阅读数 34 评论数 0 -
原创
Vue项目中使用继承复用代码
parent.vue 定义了1个方法和2个数据 <template> <div class=""> 这是父组件 {{message}} </div> </template> <script> export default { name: 'Parent', data() { retur...2019-11-14 22:55:08 阅读数 59 评论数 0 -
原创
Vue项目的预渲染与页面元信息配置
测试环境 利用脚手架生成一个vue项目，需要选择 vue-router # 安装 Vue Cli cnpm install -g @vue/cli $ vue --version 3.12.0 # 创建一个项目 vue create vue-demo 一、预渲染 1、安装插件 cnpm install prerender-spa-plugin --save 2、配置预渲染 vue.conf...2019-11-14 22:32:11 阅读数 10 评论数 0 -
原创
Vue子孙三代的三级组件通信
1、首先是一个简单的示例 三个文件 app.vue # 自定义的业务，调用自己封装的组件child.vue child.vue # 自己封装的第三方组件plug.vue，便于上层调用 plug.vue # 第三方组件，提供v-model数据绑定 调用层次结构 app -> child -> plug child在这里起到一个承上启下的桥梁功能 代码 ...2019-11-05 11:13:28 阅读数 22 评论数 0 -
原创
Vue数据双向绑定.sync 和v-model
结论： .sync 和v-model两者的本质都是语法糖， 目的都是实现组件与外部数据的双向绑定。 v-model 是 .sync的一种体现。.sync 比较灵活;v-model较单一 .sync修饰符 父组件 <comp :foo.sync="bar" ></comp> // 等价于, 组件属性名称一致 <comp :foo="bar" @update:foot=...2019-11-04 23:39:05 阅读数 180 评论数 0 -
原创
Vue新窗口打开this.$router
this.$router默认是当前窗口打开 代码示例 let routeData = this.$router.resolve({ path: '/home', query: { id: 1 } }); window.open(routeData.href, '_blank'); 参考 vue中$router.push打开新窗口 ...2019-10-30 16:20:15 阅读数 45 评论数 0 -
原创
Vue深度作用选择器
1、使用 >>> <style scoped> .a >>> .b { } </style> 2、使用 /deep/ <style lang="scss" scoped> /deep/ .upload-demo{ } </style> 参考 Vue scoped CSS 与深度作用选择器 /de...2019-10-23 20:59:55 阅读数 50 评论数 0 -
原创
Vue项目通过scrollIntoView实现锚点滚动
实现代码 this.$el.querySelector(selector).scrollIntoView(); 完整代码实现 <template> <div class="main"> <!-- 菜单 --> <div class="nav"> <a href="javascript:" @click="goA...2019-10-14 16:05:37 阅读数 544 评论数 0 -
原创
Egg.js+Vant前后端实例
前后端环境 $ node -v v10.16.0 前端部分 1、项目环境 # 创建项目 cnpm install -g @vue/cli vue create client && cd client # 安装依赖 cnpm i vant -S # vant cnpm i babel-plugin-import -D cnpm i vue-router --save # 路由...2019-10-14 00:27:31 阅读数 106 评论数 0 -
原创
Egg.js快速入门
Egg.js 基于Node.js和Koa企业级应用开发框架 特性 提供基于Egg的定制上层框架的能力 高度可扩展的插件机制 内置多进程管理 基于Koa开发性能优异 框架稳定，测试覆盖率搞 渐进式开发 涉及内容 vant ui vue-cli3 moment.js Egg.js mysql 前后端联调 开发环境 Egg.js https://eggjs.org/zh-cn/intro/quickst...2019-10-14 00:22:00 阅读数 25 评论数 0 -
原创
Vue重新渲染数据
Vue 不能检测以下数组的变动： 1、当你利用索引直接设置一个数组项时 2、当你修改数组的长度时 3、对象属性的添加或删除 来源： https://cn.vuejs.org/v2/guide/list.html 代码引入vue <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script> 通过索引赋值，...2019-10-09 22:51:48 阅读数 249 评论数 0 -
原创
Vue基于$attrs及$listeners实现隔代通信
所谓隔代通信就是A 与C的通信 A -> B -> C 代码实例 A.vue <template> <div id="app"> <!-- 此处监听了事件，可以在C组件中直接触发 --> <b-child nameToB="nameToB" nameToC="nameToC" @buttonC...2019-09-22 21:50:12 阅读数 32 评论数 0 -
原创
基于Vue实现多标签选择器
实现效果 实现代码 <html lang="en"> <head> <title>Document</title> <!-- 引入本地组件库 --> <link rel="stylesheet" href="static/element-ui/index.css"> <script ...2019-09-22 21:14:31 阅读数 692 评论数 0 -
原创
CDN方式Vue组件注册
代码示例 <div id="app"> <global-child></global-child> <local-child></local-child> </div> <script src="./vue.js"></script> <script> Vue.c...2019-09-21 00:01:29 阅读数 175 评论数 0 -
原创
Vue：从单页面到工程化项目
Vue 模板语法，条件渲染，列表渲染 vue-router vuex vue-cli 用到的网站： https://cn.vuejs.org/v2/guide/ https://cli.vuejs.org/zh/guide/ https://www.bootcdn.cn/ 开发环境 1、IDE webstorm http://www.jetbrains.com/webstorm vscode h...2019-07-07 23:53:38 阅读数 1205 评论数 1 -
原创
前端开发：axios在vue中的使用
Aixos 1、Aixos特性 （1）支持Promise API （2）拦截请求和响应 （3）装换请求数据和响应数据 （4）取消请求 （5）自动转换JSON数据 （6）客户端支持防御XSRF 2、Axios基础用法 get post put等请求方法 3、Axios进阶用法 实例 配置 拦截器 取消请求 4、Axios进一步封装 Axios基础用法 文档：https://www.npmjs.com...2019-07-30 10:58:22 阅读数 590 评论数 0 -
原创
前端开发：vant在vue中的使用
1、安装 # 安装 Vue Cli npm install -g @vue/cli # 创建一个项目 vue create hello-world # 安装vant npm i vant -S # 完整写法：npm install vant --save # 安装插件 npm i babel-plugin-import -D # 完整写法： npm install babel-plugi...2019-07-30 11:04:42 阅读数 2223 评论数 0 -
原创
前端开发：axios在项目中的应用
用到的模块： Vue: https://cn.vuejs.org/v2/guide/ Axios: http://www.axios-js.com/zh-cn/docs/ vant: https://youzan.github.io/vant/#/zh-CN/intro 可参考文章 前端开发：axios在vue中的使用 前端开发：vant在vue中的使用 1、接口配置 server/con...2019-08-09 00:23:04 阅读数 140 评论数 0 -
原创
Vue中父组件与子组件之间的通信
prop 父组件向子组件传递数据, 单向绑定 $refs 父组件调用子组件里的属性和方法 $emit 子组件向父组件传递消息 新建项目 $ vue create demo $ cd demo $ npm run serve 父组件引用子组件 components/Child.vue <template> <h2>子组件</h2> </templa...2019-08-10 19:13:26 阅读数 232 评论数 1 -
原创
Bug：Vue路由不跳转而是刷新页面
问题 Vue路由不跳转而是刷新页面 解决 经过同事的仔细观察，发现点击跳转时，路由中多了一个【问号】并刷新页面没有发生跳转，再次点击才生效 方式一 使用了click.prevent阻止form表单的默认提交事件 <button @click.prevent="onSubmit" >登录</button> 方式二 button默认是submit类型，改成type=“butt...2019-08-20 10:44:03 阅读数 299 评论数 0 -
原创
前端开发：Vuex的基本使用
Vuex 为vue.js应用程序开发的状态管理模式 采用集中式存储管理应用的所有组件状态 以相应的规则保证以一种可预测的方式发生变化 应用场景 读取，多个视图依赖于同一个状态 修改，不同视图的行为需要改变同一个状态 组成部分 State 数据仓库 getter 获取数据 Mutation 修改数据 Action 提交mutation 安装Vuex 1、安装vuex包：npm install vue...2019-08-17 21:55:13 阅读数 100 评论数 0 -
原创
Vue 路由跳转 新窗口打开页面
1、router-link <router-link :to='url' target='_blank></router-link> 2、$router let router = this.$router.resolve( { path: <yourPath>, query: { 'ticket': '123456' ...2019-08-30 10:44:14 阅读数 40 评论数 0 -
原创
vColorPicker基于 Vue 的颜色选择器插件
主页：http://vue-color-picker.rxshc.com/ Github：https://github.com/zuley/vue-color-picker 很不错的插件，支持吸管拾取颜色 安装 $ npm install vcolorpicker -S 使用 在 main.js 文件中引入插件并注册 # main.js import vcolorpicker from 'vc...2019-09-06 13:51:54 阅读数 656 评论数 0 -
原创
Vue:自定义v-model数据双向绑定
示例 age 数据单向绑定 name 数据双向绑定 <template> <div> <h3>单向绑定数据</h3> <p>age: {{ age }}</p> <p>age: <input type="text" :value="age">&l...2019-09-06 14:24:21 阅读数 70 评论数 0 -
原创
CDN方式使用Vue组件通信
代码示例 <div id="app"> <child @buttonclick="buttonClick" :title="title">插槽会显示这段内容</child> </div> <script src="./vue.js"></script> <script> // 定义子组件 V...2019-09-20 23:50:40 阅读数 125 评论数 0 -
原创
Vue：简单使用像引用jQuery一样引用Vue
代码示例 <html> <head> <!-- 引用jQuery --> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <!-- 引用Vue --> <script src="https://cdn.bootcss....2019-06-19 21:30:34 阅读数 172 评论数 0