最近在做vue项目时用到了Element，发现这玩意儿用起来很舒服，很新颖，上手也很快，而且效果足够酷炫。但是后面发现一个很大的问题，那就是Element的样式有限，这极大地限制了项目的应用广度，所以我们有必要对Element内部的CSS进行一定的覆盖，来改变其样式。在修改Element样式时，遇到了一些问题，这里简单做一些记录，便于以后查阅。 我在用el-switch做开关切换时，使用默认样式：代码如下：效果： 现在我想把蓝色字体改为...
部署Vuedist文件夹首先拿到服务器的公网IP使用putty.exe工具获取到宝塔linux面板putty需要root用户名和密码输入成功继续输入bt default以下是宝塔页面（注意：dist文件夹里面的所有文件都要拖到公网IP根目录里面）原文：https://www.cnblogs.com/yumengcode/p/14846456.html
1.插槽的基本使用子：<template><div> <span>插槽的基本使用</span><slot></slot></div><template>父：<cpn><button>按钮</button></cpn> 2.插槽有默认值（有多个值同事放入，整体替换）子：<template><div> <span>插槽的基本使用</span> <slot><button>按钮</button></slot> </div><template>父：<cpn></cpn><cpn><span>文字</span></cpn><cpn> <span style="display:block">文字</span> <p>...
在vue项目中，我们可以自定义组件，像element-ui一样使用Vue.use（）方法来使用，具体实现方法：1.首先新建一个Cmponent.vue文件// Cmponent.vue<template> <div> 我是组件 </div></template><script> export default { }</script><style scoped> div{ font-size:40px; color:#fbb; text-align:center; }</style>2.其次在同一目录下建立index.js文件,在这个文件中使用install方法来...
转: https://www.cnblogs.com/xiaohuochai/p/7554127.html前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue提供了vuex。本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时，一个 Vue 实例只是简单的代理访问。所以，如果有一处需要被多个实例间共享的状态，可以简单地通过维护一份数据来实现共享const sourceOfTruth = {} const vmA = new Vue({data: ...
什么是 Vue.js? Vue.js 自身不是一个全能框架----它只聚焦于视图层，它是一个构建数据驱动的web 界面的库,即 Vue.js 是 MVVM 的一个库。Vue.js 的目标是通过尽可能简单的 API 实现 响应的数据绑定和组合的视图组件。 好，不多说，直接上代码： 双向绑定： <div id="app"><p>{{ message }}</p><!--//双向绑定，当 input 改变时 p 内也会改变 但是，当花括号里加上 * 后就变成了单向绑定{{* message }}--><input v-model=‘messag...
1、插槽（1）插槽内容像 HTML 元素一样，我们常常需要给组件传递内容比如在下面的例子中，我们给自定义组件 prompt-info 传入 出错啦 的文本<!DOCTYPE html> <html><head><title>Demo</title><script src="https://cdn.jsdelivr.net/npm/vue"></script> </head><body><div id="app"><prompt-info>出错啦</prompt-info></div><script>Vue.component('prompt-info', {template: `<div><h3>提示信息</h3></div>`})new Vue({el: '#app'...
vue(chrome)调试工具vue-devtools安装谷歌浏览器chrome的vuejs devtools 插件的安装原文：https://www.cnblogs.com/hool/p/12168029.html
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>vue</title><link rel="stylesheet" href=""><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- <script type="text/javascript" src="../js/vue.js"></script> --></head> <body><div ><input type="text" v-model="n1">+<input type="text" v-model="n2">=<input type="text" v-mode...
------------恢复内容开始------------1、什么是变化侦测Vue.js会自动通过状态生成Dom，并输出到页面上进行显示，这过程称为渲染，当状态发生变化时vue能立刻感知到哪些状态改变了，并进行更新2.如何追踪状态变化js里面侦测对象的变化有两种，一种是Object.defineProperty和Es6的proxy function defineReactive(data,key,val) { Object.defineProperty(data,key,{ enumerable:true,//可枚举 configurable:tru...
vue入门学习总结：vue的一个组件包括三部分：template、style、script。vue的数据在data中定义使用。数据渲染指令：v-text、v-html、{{}}。隐藏未编译的标签：v-cloak 。控制模块隐藏:v-if（值为false时不会渲染到dom上）、v-show（相当于display属性的show和hide）。事件绑定：v-on、@语法，一般方法写在methods里面，需要操作dom的方法写在mounted里面，此时dom渲染完毕。属性绑定:v-bind、:用法，例如:class= " {red:isRed}"。定...
1.引入的组件：lessstyle-loadercss-loaderless-loader2.main.js引入import ‘!style-loader!css-loader!less-loader!./assets/css/reset.less‘3.App.vue引入：<script>//flexible.js(适配移动端)(function flexible(window,document){var docEl = document.documentElement;var dpr = window.devicePixelRatio || 1;//adjust body font size function setBodyFontSize(){ if(document.body){ document.body.style.fontSize ...
<template> <div class=""> <form action="" method="post" class="upload" ref="upload"> <button class="sign" id="uploadFile">选择文件</button> <input type="file" accept=".ipa,.apk" name="upload" id="file" @change="fileSelect($event)"/> </form> <button type="button" class="btn" id="upfile" @click="submit" v-if="!isSave"> </div></tem...
vue 中的虚拟DOM有什么好处？快！首先了解浏览器显示网页经历的5个过程 1、解析标签，生成元素树（DOM树）2、解析样式，生成样式树3、生成元素与样式的关系4、生成原始的显示坐标5、显示页面 修改真实DOM每修改一个元素，那么这5个过程都要重新走一次。修改10个元素就走10遍。 修改虚拟DOM虚拟DOM存储在内存中，对10个元素的修改是在虚拟DOM中进行，修改完后，比较虚拟DOM和真实DOM的差异，当有差异时，再一次过去更新网页的显示，...
Vue学习 数据绑定 {{ msg }} 双向 {{* msg }} 只绑定一次 {{{ htmlInfo }}} 表示htmlinfo里 有html标签 ，里面的{{}}将不可用 Vue.partial(‘my-partial‘, ‘<p>This is a partial! {{msg}}</p>‘) 可以动态html并包含{{}} {{number+1}} {{ok?‘yes‘:‘no‘}} {{message.split(‘‘).reverse().join(‘‘)}} 支持js表达式，不支持语句，if,支持三元 {{ message | filterA | fi...