vue

今天下了Vue，想试一试前后端分离的实现，没想到坑还不少，这里就记录一下我遇到的坑和我的代码： 一、Vue的下载安装：从网上找就好了，没什么问题，除了下载以后，要把镜像库改成淘宝的，要不然太慢了。 二、推荐一个很好用的软件 HBuilder X，可以在上面写前端的项目，直接就能打开浏览器看到效果，还可以自动下载依赖。 三、前端代码： 首先，先创建一个Vue项目，新建以后项目自带的程序结构如图： 　　　　　　　　　　 因为我也是刚刚接触vue，对里面的东西也不是很了解，只是从网上找了一些项目，边看边学，感觉里面重要的就是main.js、router还有components这三个，当然config里应该是配置文件，也很重要，但在这个初学的项目里，并没有涉及太多里面的东西。 首先，先看一下main.js里面的东西： 　　　　　　 里面的东西不多，可以看到大多数都是添加依赖,使用Vue.use()指定全局使用的包之类的功能。 这里一定要注意，比如这个程序添加了ElementUI这样的外部依赖，那么一定要在这里用Vue.use()使用起来，表示全局都载入了这个库，否则的话，在页面显示的时候，没有内容，使用F12查看网页代码，会出现： 　　Unknown custom element: <xxx> - did you register the component correctly? For

Vue使用clipboard复制url clipboard是一个轻量级的框架，不依赖flash, 不依赖其他框架，实现了纯JavaScript的浏览器内容复制到系统剪贴板的功能。 1.安装cliboard npm install clipboard -- save 2.引入vue项目并注入 import clipboard from 'clipboard' Vue.prototype.ClipboardJS = clipboard; 3.button按钮 < Button @click = " share() " id = " copyUrl " data-clipboard-action = " copy " > < Icon type = " md-share-alt " /> 分享 </ Button > 4.事件调用 share ( ) { var _val = window . location . href ; new this . ClipboardJS ( '#copyUrl' , { text : function ( ) { return _val ; } } ) ; } 这里CliboardJS第一个参数是选择器（ DOM选择器, HTML 元素, 或者 HTML元素列表.），第二个参数是返回的文本。 来源： CSDN 作者： 流光之中 链接： https:/

** 安装element： ** npm i element-ui -S main.js中引用： import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' Vue.use(ElementUI) 页面引用组件： <div class="staff-border-bottom"> <i class="el-icon-edit"></i> <i class="el-icon-share"></i> <i class="el-icon-delete"></i> <el-button type="primary" icon="el-icon-search">搜索</el-button> </div> ** 运行项目： ** npm run dev 展示： 过程中遇到一个BUG ： import 'element-ui/lib/theme-default/index.css’报错 ，参考了网上的前辈发现有和我一样的错误，发现教程上是import 'element-ui/lib/theme-default/index.css’这样引用文件，但是最新版本的elementui的这个文件夹改名了。。。。。 我们把main.js引入路径改为import ‘element-ui/lib/ theme

友情提示： 想要更好的理解JS继承方式，须了解构造函数、原型对象、实例化对象、原型链等概念 第一种：原型链继承 利用原型链的特点进行继承 function Parent(){ this.name = 'web前端'; this.type = ['JS','HTML','CSS']; } Parent.prototype.Say=function(){ console.log(this.name); } function Son(){}; Son.prototype = new Parent(); son1 = new Son(); son1.Say(); 以上例子解释： ①创建一个叫做Parent的构造函数，暂且称为父构造函数，里面有两个属性name、type ②通过Parent构造函数的属性(即原型对象)设置Say方法，此时，Parent有2个属性和1个方法 ③创建一个叫做Son的构造函数，暂且称为子构造函数 ④设置Son的属性(即原型对象)值为父构造函数Parent的实例对象，即子构造函数Son继承了父构造函数Parent，此时Son也有2个属性和1个方法 ⑤对Son构造函数进行实例化，结果赋值给变量son1，即son1为实例化对象，同样拥有2个属性和1个方法 ⑥输出son1的Say方法，结果为"web前端" 优点：可以实现继承 缺点： ①因为Son.prototype

v-show: 根据表达值真假,切换元素的显示和隐藏(本质是改变display) < body > < div id = "app" > < h1 v - show = "isShow" > { { msg } } < / h1 > < button @click = "changeShow" > isShow < / button > < / div > < ! -- 开发环境版本，包含了有帮助的命令行警告 -- > < script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script > var app = new Vue ( { el : "#app" , methods : { changeShow : function ( ) { this . isShow = ! this . isShow ; } } , data : { msg : "VVVV-show!!" , isShow : true , } } ) < / script > < / body > 点击后 v-if(和v-show类似) v-show操纵样式 v-if操纵dom v-bind(设置元素属性)v-bind可省略 < body > < div id = "app" > < img v - bind

MVC是后端的编程模式 MVC（Model View Controller)分为三部分: 1. Model （模型）表示应用程序核心。 2. View （视图）显示数据。 3. Controller （控制器）处理输入。 其中的Model层是" M "、View层为“ V ”，而router.js和Controller合并为“ C ”。 说明: 1.app.js并没有路由分发的功能，需要调用router.js模块进行路由的分发处理。 2.为了保证职能单一，router.js只负责分发路由，不负责具体业务逻辑的处理。 3.如果涉及到了业务逻辑处理操作，只能调用Controller模块进行业务逻辑处理。 4.在Controller业务逻辑处理层封装了一些具体业务逻辑处理的逻辑代码，但是为了保证职能单一，此模块只负责处理业务，不负责处理数据的CRUD。 5.如果涉及到了数据的CRUD，需要调用Model层。 6.Model层为了职能单一也只能负责操作数据库，进行数据的CRUD。 7.CRUD是指 C:create R:read U:update D:delete MVVM是前端的编程模式 MVVM(Model-View-ViewModel)分为 M 、 V 和 VM 三部分: 说明: 1.MVVM是前端试图层的分层开发思想，主要把每个页面分成了 M 、 V 和 VM

什么是框架 框架（Framework）是整个或部分系统的可重用设计，表现为一组抽象构件及构件实例间交互的方法;另一种定义认为，框架是可被应用开发者定制的应用骨架。前者是从应用方面而后者是从目的方面给出的定义。 可以说，一个框架是一个可复用的设计构件，它规定了应用的体系结构，阐明了整个设计、协作构件之间的依赖关系、责任分配和控制流程，表现为一组抽象类以及其实例之间协作的方法，它为构件复用提供了上下文(Context)关系。因此构件库的大规模重用也需要框架。 构件领域框架方法在很大程度上借鉴了硬件技术发展的成就，它是构件技术、软件体系结构研究和应用软件开发三者发展结合的产物。在很多情况下，框架通常以构件库的形式出现，但构件库只是框架的一个重要部分。框架的关键还在于框架内对象间的交互模式和控制流模式。 框架比构件可定制性强。在某种程度上，将构件和框架看成两个不同但彼此协作的技术或许更好。框架为构件提供重用的环境，为构件处理错误、交换数据及激活操作提供了标准的方法。 应用框架的概念也很简单。它并不是包含构件应用程序的小片程序，而是实现了某应用领域通用完备功能（除去特殊应用的部分）的底层服务。使用这种框架的编程人员可以在一个通用功能已经实现的基础上开始具体的系统开发。框架提供了所有应用期望的默认行为的类集合。具体的应用通过重写子类(该子类属于框架的默认行为)或组装对象来支持应用专用的行为。

vue跳转时路由相同但参数不同 问题 解决 方案一：watch 方案二：beforeRouteUpdate 问题 在开发vue项目中遇到一个问题：两个导航共用一个显示界面，我打算通过路由传参的形式进行区别，利用vue的钩子，调用不同的查询接口： // 错误示范 this . $router . push ( { //导航一 path : "/logindex" , name : 'logindex' , params : { logType : 1 } } ) ; this . $router . push ( { //导航二 path : "/logindex" , name : 'logindex' , params : { logType : 2 } } ) ; 但是我发现在两个导航之前切换时，vue不会重新加载组件，进而无法调用生命周期中的钩子，就导致页面数据无法更新。 解决 方案一：watch 第一步：改造路由 { path : '/logindex/:logType' , name : 'logindex' , component : ( ) => import ( '@/page/Logindex.vue' ) } 跳转 this . $router . push ( { //导航一 path : "logindex:logType" , name :

我们实际开发中发现，在data中定义的所有数据，后续无论是在template中使用，还是在methods中使用，都能随着数据的变化而变化。为了理解这其中的原理，研究源码后整理出这篇文章，欢迎大家及时指正。 第一步：数据注册监听 vue 2.x 版本使用的是 Object.defineProperty 详细API文档见Object.defineProperty 用于绑定Object类型数据，比如定义一个person: let person = { name: ‘usm’, age: 12 } 复制代码现在希望person的name和age发生改变时，可以触发一些操作，就可以通过 Object.defineProperty 实现： Object.defineProperty(person, ‘name’, { enumerable: true, configurable: true, get() { console.log(‘get name’s value’); }, set(val) { console.log( set value ${val} ); } }); person.name // get name’s value person.name = ‘new’ // set value new 复制代码其中enumerable属性表示此属性设置为可枚举

6款优秀的Vue UI组件库推荐 Vue 是一个轻巧、高性能、可组件化的MVVM库，API简洁明了，上手快。从Vue推出以来，得到众多Web开发者的认可。 在公司的Web前端项目开发中，多个项目采用基于Vue的UI组件框架开发，并投入正式使用。 开发团队在使用Vue.js框架和UI组件库以后，开发效率大大提高，自己写的代码也少了，很多界面效果组件已经封装好了。 在选择Vue UI组件库的过程中，通过GitHub上根据star数量、文档丰富程度、更新的频率以及维护等因素，也收集整理了一些优秀的Vue UI组件库。 PS：国内的UI组件大部分都只有一部分的，常用的头部导航，底部导航，listview，grid表格很多都是没有的。 后面才发现，基于Vue的Quasar Framework 介绍 这个框架UI组件很全面，准备下次使用这个框架了 基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarframework/quasar: Quasar Framework https://github.com/quasarframework/quasar Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的开源框架（基于Vue），可帮助Web开发人员创建： 响应式网站 PWA（Progressive Web App）