vue | 易学教程

vue项目（一）小随笔

阅读更多关于 vue项目（一）小随笔

今天是一个被bug缠身的周末，上周五导师给我指导项目纠错，很是惭愧，加班搞搞我的vue，得做好这个项目。一、补充知识点登陆界面搞出来后，和后端竟然连不上，然后一番调整，可好，bug太气人，我重新建项目，发现遗漏知识点，就补上吧！也是为了自己以后方便复习。 1.npm更新命令 npm -g install npm 更新后，就可以了（登陆页面已经提前编写好）来源： CSDN 作者： Mamie04551 链接： https://blog.csdn.net/weixin_42579598/article/details/104732870

使用form-create动态生成vue组件

阅读更多关于使用form-create动态生成vue组件

使用form-create动态生成vue自定义组件和嵌套表单组件 [github] | [说明文档] 示例 let rule = [ { type:'row', children:[ { type:'i-col', props:{ span:12 }, children:[ formCreate.maker.input('商品名称','goods_name','iphone'), formCreate.maker.number('商品加个','goods_price',8688) ] }, { type:'i-col', props:{ span:12 }, children:[ formCreate.maker.dateTime('创建时间','create_at'), formCreate.maker.radio('是否显示','is_show').options([ {value:1,label:'显示'}, {value:0,label:'不显示'} ]) ] } ] } ] maker.create 通过建立一个虚拟 DOM的方式生成自定义组件生成 Maker let rule = [ formCreate.maker.create('i-button').props({ type:'primary', field:'btn' loading:true }) ] $f

在Vue中对外部资源进行访问

阅读更多关于在Vue中对外部资源进行访问

1.fetch fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住 fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。 fetch的优点： 1.符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里 2.更好更方便的写法具体的用法是： fetch('http://localhost:8181/messageBoard/messages', {method: 'GET', headers: {'content-type': 'application/json'}}) .then(response => response.json()) .then(json => { 　　console.log(json); }) 1.axios Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax，想必让axios进入了很多人的目光中。 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征： 1.从浏览器中创建

Vue Router路由

阅读更多关于 Vue Router路由

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；首先我们来学习三个单词（route，routes，router）：　　 route ：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由；　　 routes ：它是个复数，表示多个的集合才能为复数；即我们可以理解为多个路由的集合，JS中表示多种不同状态的集合的形式只有数组和对象两种，事实上官方定义routes是一个数组；所以我们记住了，routes表示多个数组的集合；　　 router ：译为路由器，上面都是路由，这个是路由器，我们可以理解为一个容器包含上述两个或者说它是一个管理者，负责管理上述两个；举个常见的场景的例子：当用户在页面上点击按钮的时候，这个时候router就会去routes中去查找route，就是说路由器会去路由集合中找对应的路由；详细描述请参考官方文档 https://router.vuejs.org/zh/guide/essentials/nested-routes.html 安装和引用 npm install --save vue-router 在安装脚手架之后就生成了router/index.js 修改router

vue学习笔记day18 vue动画

阅读更多关于 vue学习笔记day18 vue动画

一 vue的过渡（动画） 1> 利用class 名称 2》利用css动画库 (animal.css) 3》利用钩子函数 4》利用第三方js库在vue 提供组件 transition实现过渡在进入/离开的过渡中，会有 6 个 class 切换。 v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。 v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。案例1 <!DOCTYPE html> <html

VUE实现Studio管理后台（十一）：下拉选择列表（Select）控件，输入框input系列

阅读更多关于 VUE实现Studio管理后台（十一）：下拉选择列表（Select）控件，输入框input系列

这次Github上传错了，标题中的序号不对，我想这样：《VUE实现Studio管理后台（十一）：下拉选择列表（Select）控件，输入框input系列》实际传成了这样《VUE实现Studio管理后台（九）：下拉选择列表（Select）控件，输入框input系列》，很无奈的错误，我也不知道怎么修正，下载代码的时候注意分别吧。这次分享下拉列表输入组件（Select），效果如下：一如既往，取个好听的名字RxSelect，正常的调用代码应该是这样的： <RxSelect :defaultValue = "defaultValue" :list= "list" v-model = "inputValue" > </RxSelect> list代码： list:{ white:'白色', black:'黑色', red:'红色', green:'绿色', dntknow:'不知道什么色', }, 上一篇作文，已经介绍过，我们的项目是要通过Json数据，动态构建输入界面，所以只需要在测试代码中加入以下代码： { label:'颜色', value:'white', defaultValue:'black', inputName:'RxSelect', props:{ list:{ white:'白色', black:'黑色', red:'红色', green:'绿色', dntknow:

vue项目安装插件配置

阅读更多关于 vue项目安装插件配置

目录 vue安装ajax插件：axios CORS跨域问题（同源策略） Vue配置 ElementUI Vue配置jQuery + bootstrap vue安装ajax插件：axios 安装插件在项目目录下安装 cnpm install axios 在main.js中配置 import axios from 'axios' Vue.prototype.$axios = axios 在一个组件的逻辑中发送ajax请求 // 完成ajax请求后台，获取数据库中的数据 this.$axios({ url: this.$settings.base_url + '/cars/', method: 'post', params: { // url拼接参数：任何请求都可以携带 a:1, b:2, c:3 }, data: { // 数据包参数：get请求是无法携带的 x: 10, y: 20 } }).then(response => { // console.log(response); this.cars = response.data; }).catch(error => { console.log(error); }) CORS跨域问题（同源策略）同源：http协议相同、服务器ip地址相同、app应用端口相同跨域：协议、ip地址、应用端口有一个不同，就是跨域

vue router.push(),router.replace(),router.go()

阅读更多关于 vue router.push(),router.replace(),router.go()

1.router.push(location)=====window.history.pushState 想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。 1 2 3 4 5 6 7 8 9 10 11 // 字符串 router.push( 'home' ) // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user' , params : { userId: 123 }}) // 带查询参数，变成 /register?plan=private router.push({ path: 'register' , query: { plan: 'private' }}) 2.router.replace(location)=====window.history.replaceState 跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录 3.router.go(n)====window.history.go 1 2 3 4 5 6 7 8 9 10 11 12 //

VUE实现Studio管理后台（十）：OptionBox，一个综合属性输入界面，可以级联重置

阅读更多关于 VUE实现Studio管理后台（十）：OptionBox，一个综合属性输入界面，可以级联重置

为了便于阅读代码，已经把测试数据分离出来，放在了mock目录下：阅读代码的话，稍微留意一下就好。本次介绍RXEditor界面最重要的部分，属性输入组件，该组件可以显示是否有数据被修改，还可以批量重置到缺省值，效果如下：这个界面是动态构建的，根据Json数据，动态构建输入界面。我之前做过一个PHP larvel+Vuetify的框架，也是用这个原理，PHP段代码构造JSON数据，VUE代码根据数据动态构造输入界面。我用那个框架做了好几个网站和公司自己的订单管理系统，但是代码需要优化的地方不少，我自己用起来很方便，离开源发布还有些距离，框架的名字叫Vular，GIthub地址：https://github.com/vularsoft/vular，感兴趣的可以看看，等完成RXEditor，就继续这个框架，给自己加的工作太多了，时间不够。本次实现的要比这个框架简单好多，原理相同。要理解代码，需要明白页面元素的结构及命名：整个输入组件叫OptionBox，这个控件可以输入各种属性。OptionBox下包含若干OptionGroup，每个OptionGroup就是一个手风琴折叠的子项，OptionBox是一个手风琴式折叠控件（该控件的实现方式，请参看以前的文章），OptionGroup下包含多个RxInputRow，每个RxInputRow包含一个输入控件跟一个标签

20200308-学习MVVM思想

阅读更多关于 20200308-学习MVVM思想

1.在学习Vue的过程中。发现后天的webpack都是配置，想提高开发效率，所以中断了Vue的学习进程（有兴趣的时候再去看吧） 2.这两天也是隔离的最后两天。于是3分热度的又想探索Vue是怎么实现双向绑定的。所以花了点时间学习了Vue MVVM的实现简单实现过程。https://www.bilibili.com/video/av54530725?t=2678&p=2 3.发现这个老师挺牛逼。手动实现，思路也挺清晰。 4.个人理解能力不强，看到第二个课程的时候跟不上了。没怎么明白是怎么实现双向绑定的。于是傻乎乎的跟着敲完实现了同样的功能。 5.我还是想弄清楚是一个怎么样的调用过程。于是乎花了几个小时的时间进行剖析代码执行总的来说， 1.修改data中的对象声明方式。使用definepropery这个函数进行重新定义。使用这个函数的好处是，当数据发生改变的时候会触发get，set方法 Object.defineProperty(obj,key,{ get(){ //创建watcher时，会取到对应的target内容 //取的时候存放这个watcher Dep.target && dep.addSub(Dep.target) return value; },set: (newVal)=>{ //{{persson.name}} = {} if(value != newVal){

订阅 vue