VueJS
关注
分享
扫一扫
mwwb
这个作者很懒，什么都没留下…
展开
-
VueJs（十五）
今天开始学习webpack 这是当前比较热门的js应用程序的模块打包工具 它依赖于node.js和NPM 前端自动化工程主要解决以下问题： js、css代码的和平和压缩 css预处理：less、sass、Stylus的编译 生成雪碧图（css sprite） ES 6转ES 5 模块划 webpack打包后的代码已经不是你的代码，其中夹杂了更多webpack自身的模块处理代码 这部分内容最重要的是编译这个概念 各种格式的文件通过特定加载器编译后最终统一称为js，css，png等静态资源文件 在webpack原创 2020-08-12 16:28:08 · 98 阅读 · 0 评论 -
VueJs（十四）
vue 2.x和1.x的最大不同在于使用了Virtual Dom（虚拟DOM）来更新DOM节点，提升了渲染性能 Virtual DOM 不是真正意义上的DOM对象，而是一个轻量级Js对象，状态发生变化的时候，会进行Diff运算，来更新只需要被替换的DOM，而不是全部重载 下面是一个普通的DOM节点 <div id="main"> <p>文本内容</p> <p>文本内容</p> </div> 下面是使用Virtual D原创 2020-08-10 15:54:12 · 126 阅读 · 0 评论 -
VueJS（十三）
今天继续时间显示组件的实战 目标是把时间转换成相对时间 确定转换逻辑 1分钟以前，显示“刚刚“” 1分钟~1个小时内，显示“xx分钟前” 1个小时~1天之间，显示“xx小时前” 1天~1个月之间，显示“”xx天“” 大于一个月，显示“xx年xx月xx日” ...原创 2020-08-07 16:32:56 · 123 阅读 · 0 评论 -
VueJS（十二）
今天是自定义指令的实战 开发一个可从外部关闭的下拉菜单 弹出菜单后，点击其他的空白区域，菜单实现自动关闭 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="菜单.css" /> </head> <body&g原创 2020-07-22 17:40:54 · 106 阅读 · 0 评论 -
VueJS（十一）
今天继续学习自定义指令 自定义指令的选项是由几个钩子函数组成的，每个都是可选的 bind：只调用一次，指令第一次绑定到元素的时候调用，这个钩子函数可以定义一个在绑定时执行一次的初始化的动作 inserted：被绑定元素插入父节点时调用 update：被绑定元素所在的模板更新的时候调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新 componentUpdated：被绑定元素所在的模板完成一次更新周期时调用 unbind：只调用一次，指令与元素解绑的时候调用 <div id=原创 2020-07-22 08:39:51 · 101 阅读 · 0 评论 -
VueJS（十）
今天继续第二个组件的学习 标签页组件 一个标签按钮对应一个slot <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body原创 2020-07-16 16:39:03 · 88 阅读 · 0 评论 -
VueJS（九）
今天，终于再次说出这句话，我接着来学习vue了 常用组件的开发，虽然过了十天了，还是记得组件的知识点的吧，就是预先写好的样例，可以复用减少耦合。 开发一个数字输入框组件 数字输入框是对普通的输入框的扩展，普通的输入框就是input这种 数字输入框的要求如下： 1.只能输入数字 2.两个快捷按钮加一和减一 3.能够设置初始值、最大值、最小值，数值改变的时候会触发一个自定义事件来通知父组件 function isValueNumber(value){ return([0-9]).test(value+'');原创 2020-07-15 18:02:39 · 95 阅读 · 0 评论 -
VueJS（八）
上次学到作用域 首先需要明确slot分发的内容是在父组件上的 所谓内容在父组件和子组件的内容之分，就是看在哪里编译 在子组件上绑定的话写在组件注册内容内部，父组件绑定是写在注册vue实例内容中 slot的用法 slot的意思是插槽，用于内容分发，就是混合父组件的内容和子组件的模板 单个slot 在子组件内使用特殊的<slot>元素就可以为这个子组件开启一个slot（插槽） 在父组件模板里面插入在子组件标签内的所有内容将代替子组件的<slot>标签及它的内容 <body>原创 2020-07-04 17:07:02 · 114 阅读 · 0 评论 -
VueJS（七）
今天继续学习组件通信 昨天学到父组件在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件 <body> <div id="app"> <p>总数：{{total}}</p> <my-component @increase="handleGetTotal" @reduce="handleGetTotal"></my-component> </div> <sc原创 2020-07-02 17:35:12 · 91 阅读 · 0 评论 -
VueJS（六）
今天继续学组件 先回顾一下昨天学的组件内容 组件和vue实例一样需要注册，注册完后使用方式和一般的元素标签类似，通过注册里面的内容对标签进行渲染，方法有template等 注册又分为全局注册component和局部注册components，局部注册可以嵌套局部注册，无限套娃 下面是一个局部注册的代码： <body> <div id="app"> <my-qian></my-qian> </div> <script>原创 2020-07-01 17:35:26 · 86 阅读 · 0 评论 -
VueJS（四）
今天继续学习Vue 表单和v-model 表单类的控件主要功能就是承载一个网页数据的录入和交互 包括单选、多选、下拉选择、输入框，使用他们完成数据的录入、校验、提交。 使用v-model进行双向绑定，额，和ng-model好像一模一样 <body> <div id="app"> <input type="text" v-model="message" placeholder="输入...." /> <p>内容为：{{message}}&原创 2020-06-29 17:30:30 · 94 阅读 · 0 评论 -
VueJS（三）
今天接着学指令 v-if 、v-else-if v-else 这个就是判断，和普通的类似 v-if和 v-show的区别是前者如果为false，是直接消失的，不存在，后者即便不显示，也是渲染完成的 所以要说真正的条件渲染，if才是 列表渲染指令 v-for <li v-for="book in books">{{book.name}}</li> ............... data:{ book:[ { name: 'xxx'}, { name: 'yyy原创 2020-06-29 08:07:32 · 90 阅读 · 0 评论 -
VueJS（二）
今天将继续学习vue的基础知识 插值与表达式 使用{{ }}来显示绑定的数据，这一点和我之前学的AngularJS类似，不过ng首先你要创建ng-app对象 <body> <div id="app"> <span v-html="link"></span> </div> <script> var app= new Vue({ el:'#app', data:{ link:'<a原创 2020-06-27 08:51:51 · 166 阅读 · 0 评论 -
VueJS（一）
MVVM模式 模型—视图----视图模型 vue的作用：通过MVVM拆分为视图、数据两部分，并分离 if(showBtn){ var btn = $('<button>Click me</button>'); btn.on('click',function(){ console.log('click'); }); $('#app').append(btn); 如果使用vue的方式来写的话，可以改成： <body>原创 2020-06-24 17:22:51 · 87 阅读 · 0 评论