原文： 简书原文：https://www.jianshu.com/p/1af9b72cf86e大纲 1、安装NodeJs 2、安装vue-cli 3、创建项目 4、启动项目 5、打包项目 6、项目实例1、安装NodeJs NodeJs安装好之后会连带着安装一个npm，nodeJs的安装流程很简单，按着步骤一步一步下来即可。 安装完成之后在控制台上输入npm -v 以及 node -v若成功则会输出对应版本，并且已经将npm和node部署到了全局的环境变量。2、安装vue-cli 安装完...
Vue组件组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。是可复用的Vue实例。组件的注册// html 代码 <div id="app"><my-component></my-component> </div> // js 代码 Vue.component(‘my-component‘, {template: ‘<div>A component!</div>‘ }) var app = new Vue({el: ‘#app‘,data: {} });全局注册// html 代码 <div id="app"><my-component></my-component> </div> // js 代码 ...
#### 在写vue项目时，所用的过滤器很多时，把所有的过滤器方法封装在一个文件中，然后导出，并绑定在vue实例上1.在src下创建filters文件夹，并新建index.js文件2. index.js里面的代码import moment from 'moment' const dateFormat = (input, fmtstring) => {// 使用momentjs这个日期格式化类库实现日期的格式化功能return moment(input).format(fmtstring); }const moneyFormat = value => {if (!value) return '0.00';/原来用的是...
1.css样式操作<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.classA {background-color: hotpink;}.classB {color: lawngreen;}.classC {font-size: 80px;}/* 1、类的操作2、style的操作*/</style></head><body><div id="root"><!-- 操作类 --><!-- 当我不知道这个标签类到底是谁，那么就得动态获取 --><p ...
一、准备工作： 程序员必备环境：Node.js和Git node.js地址 https://nodejs.org/en/download/ git地址 https://git-scm.com/downloads https://git-for-windows.github.io/二、开始工作： 1.执行命令 $ npm install -g vue-cli 注：-g为全局安装，如果是mac按如下写法：sudo npm install -g vue-cli vue-cli提供了几种模板，如下三种模式： Simple（太简单，就一个index.html文件）、we...
一、vue-draggable 安装使用npm地址：https://www.npmjs.com/package/vuedraggable二、表格拖拽使用， 举例： <table ><thead><tr><th>视频ID</th><th>名称</th><th>作者</th><th>创建时间</th><th>时长</th><th>操作</th></tr></thead><draggable element="tbody" v-model="tableData"><tr v-for="(item,index) in tableData" :key="‘item‘+index"><td>{{item.videoId}}</td><td>{{item.name}}</td><td>{{item.author.na...
1:在public文件夹新建config.js 2在vue.config.js 3：在index.html中通过script标签引入 4在项目中使用import gConf from ‘gConf‘原文：https://www.cnblogs.com/binglove/p/11669642.html
//html <div id="app"> {{message}} </div>//scriptnew Vue({el:"#app",router,template:"<App/>",data(){return {message}}, mounted(){ console.log(this.message)//问题：为什么可以通过this.message这种方式来访问data中的数据呢 } }) 在vue源码中，可以发现数据data是定义在初始化对象$options中的，要想访问到data中的key字段，正常来说是通过vm.$options.data.key来访问的。那么，在vue中是怎么实现利用vm....
在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理,方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有三个参数,Object.defineproperty(obj,‘val‘,attrObject), 参数1: obj是属性所在的对象,参数2: ‘val‘,属性名,它是一个string类型,参数3: {}属性所描述的对象详情可以看Object.defineproperty的文档下面直接上demo,html代码: <input type="text" id="inp1"><br>你...
安装vue脚手架npm install -g vue-cli创建工程vue init simulatedgreg/electron-vue electron-vue-start进入工程安装依赖cd electron-vue-start yarn启动开发模式yarn 原文：https://www.cnblogs.com/418836844qqcom/p/14731776.html
在Jquery中on()方法做事件委托是非常方便的。在vue中数据和视图分离，不需要像jquery那样频繁操作dom元素，所以在vue中引入jquery库就不是那么必要。但是有时候我们依然需要做事件代理，下面用原生js来封装一个事件代理的全局方法： 之前看到其他博客上提供的方法(这种方法并不合适): 在父元素上绑定点击事件<div class="panel" @click="rowClick1($event)"><li>1</li><li>2</li><li>3</li><li>4</li><a href="#"></a></div>...
vue 3.x 增加了v-slot的指令来代替原来2.6的slot，slot-scope属性原因：这里引用了官方的说法，我们计划统一插槽类型，因此不再需要（从概念上）区分作用域插槽和非作用域插槽。一个插槽可能会或可能不会接收道具，但它们全都是插槽。有了这个概念上的统一，具有slot和slot-scope在两个特殊属性似乎没有必要，这将是很好的统一语法的单个构建下也是如此（统一插槽属性，便于学习）之前也写过有关slot属性的使用，现在以新旧比较的方...
1、概述??本项目是一个基于SpringBoot2.x+vue2.X的分布式微服务架构项目，项目会不断进行迭代更新。 该项目后端利用SpringCloudAlibaba微服务架构解决方案进行重构。项目前端利用vue框架开发，页面展示主要为pc端和手机端（微信公众号）。2、开发环境开发工具：IntellijIDEA、VSCodeJava SDK版本：1.8以上数据库：mysql 8.XNoSql：Redis、MongoDB统一编码：UTF-83、部署环境操作系统：CentOS Linux 7虚拟化技术：VMware+Docker4、项...
参考官网资料解决： 原文：https://www.cnblogs.com/xiaojitui/p/12966224.html
//html <div id="app"><input type="button" value="ok" v-bind:title="msg" v-on:click="show" /> <input type="button" value="OK" :title="msg" @click="show" />//对应的v-bind和v-on的简写</div> //script <script>var vm =new Vue({el:‘app‘,data:{msg:‘点击一下‘}, methods:{//methods中定义了当前vue实例中所有可用的方法show:function(){ alert(‘hello‘) } }}) </scrip...