思路：父组件通过props传值给子组件，子组件通过 $emit 来通知父组件修改相应的props值，具体实现如下： import Vue from vue const component = {props: [value],template: `<div><input type="text" @input="handleInput" :value="value"></div>`,data () {return{}},methods: {handleInput (e) {this.$emit(input, e.target.value)}} } new Vue({components: {CompOne: component},el: #root,template: `<div><comp-one :value1...
marquee标签已经废弃了，只能手动实现文字走马灯样式基于vue组件开发 <template><div class="wrap"> // 外框，固定宽度<div id="box"> // 内部滚动框<div id="marquee">{{text}}</div> //展示的文字<div id="copy"></div> // 文字副本，为了实现无缝滚动</div><div id="node">{{text}}</div> //为了获取text实际宽度</div> </template> <script> export default {name: Marquee,props: [lists], // 父组件传入数据， 数组形式 [ "连...
具体代码如下所示：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="bower_components/vue/dist/vue.js"></script><style></style> </head> <body><div id="box"></div><script>var Aaa=Vue.extend({//继承出来一个Vue类Aaatemplate:<h3>我是标题3</h3>});var a=new Aaa();//a跟vm一样console.log(a);var vm=new Vue({el:#box,data:{bSign:true}});</script> </body> </html> ...
废话少说，代码如下所述： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue实例中的数据,事件和方法</title> </head><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body><div id="root"><h1 v-text="number"></h1></div><script type="text/javascript">new Vue({ el:"#root",data:{msg: "world",number:123}})</script> </body> </html>显示123 <!DOCTYPE html> <html lang=...
1 动态设置页面标题 页面标题是由 <title></title> 来控制的，因为 SPA 只有一个 HTML，所以当切换到不同的页面时，标题是不会发生变化的。必须通过 JavaScript 来修改 <title></title> 中的内容： window.document.title ='xxx'有一种思路是在每个页面的 *.vue 的 mounted 钩子函数中，通过 JavaScript 来修改 <title></title> 中的内容。这种方式固然可行，但如果页面很多，就会显著增加维护成本，而且修改逻辑都是一样的。有没有...
axiosAxios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库；封装axios，一方面为了以后维护方便，另一方面也可以对请求进行自定义处理安装npm i axios封装我把axios请求封装在http.js中，重新把get请求，post请求封装了一次首先，引入axiosimport axios from axios设置接口请求前缀一般我们开发都会有开发、测试、生产环境，前缀需要加以区分，我们利用node环境变量来作判断，if (pro...
具体代码如下所示：<template><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="float:right;"></el-pagination> </template> <script type="text/ecmascript-6"> export default {components: {},data() {return {}},props: {pageSize: {type: Number,defa...
一、场景描述： 曾经有个电商项目，其中有个“老带新”模块，而且该模块新增的入口很多，但是新增后展示效果还不一样，当时就考虑将新增的组件单独拿出来，其实就是一个子组件向父组同步数据的过程。 当然，背景不重要了，关键是看实现的方式。 二、场景展示效果 （PS：展示效果请忽略美感） 三、如何实现 注意：Vuejs架构通过vue-cli 3.X搭建的项目，版本无所谓。 1、先看下目录体系，下图子组件放在components文件夹内，模拟子...
当我们向后台请求大量数据的时候，并要在页面展示出来，请求的数据可能上百条数据或者更多的时候，并不想在一个页面展示，这就需要使用分页功能来去完成了。 1.本次所使用的是vue2.0+element-ui实现一个分页功能，element-ui这个组件特别丰富，分页中给我提供了一个Pagination 分页，使用Pagination 快速完成分页功能 最终效果展示<div class="deit"><div class="crumbs"><el-breadcrumb separator="/"><el-breadcrumb-item><i cla...
首先安装better-scroll npm i better-scroll -S goods页面模板 <template><div class="goods"><div class="menu-wrapper" ref="menuWrapper"><ul><li v-for="item in goods" class="menu-item"><span class="text border-1px"><span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}</span></li></ul></div><div class="foods-wrapper" ref="foodsWrapper"><ul><li v-for="item in goods" ><...
下面通过一段代码给大家介绍Vue axios全局拦截 get请求、post请求、配置请求，具体代码如下所述：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="../node_modules/vue/dist/vue.js"></script><script src="../node_modules/axios/dist/axios.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="...
vuex 渐进式教程，从入门级带你慢慢深入使用vuex。 Vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态， 并以相应 的规则保证状态以一种可预测的方式发生变化。 vuex官网： vuex.vuejs.org/zh/guide/ 安装 安装vue-cli:cnpm install -g vue-clivue init webpack vuex安装vuexcnpm i vuex --save 1.初级使用方法// main.jsimport Vue from vue import App from ./App im...
Vue-touch的使用 有时候我们不止需要有返回键，也要有手势滑动切换页面的功能时，这个时候vue-touch就派上用场了 API地址： https://github.com/vuejs/vue-touch/tree/next 安装 npm insall vue-touch@next --save //main.js中引入： import VueTouch from vue-touch Vue.use(VueTouch, {name: v-touch})用法如下： //html代码 <template><v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper"><di...
具体代码如下所示： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" > </head> <body > <div id="app"><!--此处model的abc 要是下面input 绑定的对象名称, ref 要和提交按钮的submit参数 名称要一致--><el-form size="mini" :model="abc" ref="validateRef"><!--此处的prop 和...
介绍VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。 由 VuePress 生成的每个页面，都具有相应的预渲染静态 HTML，它们能提供出色的加载性能，并且对 SEO 友好。然而，页面加载之后，Vue 就会将这些静态内容，接管为完整的单页面应用程序(SPA)。当用户在浏览站点时，可以按需加载其他页面。 前两天接触到了 Vuepres...