随笔分类 - vue.js
vue.js学习总结
摘要：1、熟悉项目开发流程 需求分析——>脚手架工具——>数据mock——>架构设计——>代码编写——>自测——>编译打包。 2、熟悉代码规范 从架构设计、组件抽象、模块拆分，到代码风格统一、CSS代码规范和JavaScript变量命名规范，以标准写代码，开发出扩展性、通用性强的优质代码。 3、掌握Vue
阅读全文
摘要：案例需求： 创建一个品牌展示表格，表头有编号（id），品牌名称（name），创建时间（time）和操作，需要实现的功能是对数据的增删操作，和时间的格式化。 思路分析：在开发之前需要想清楚要用到Vue中的什么方法或者特性来实现所要的功能，把案例分成以下几个部分来开发： 展示数据，需要使用v-for指令
阅读全文
摘要：计算属性是一个很邪门的东西，只要在它的函数里引用了data中的某个属性，当这个属性发生变化的时候，函数仿佛可以嗅探到这个变化，并自动重新执行。 上代码会源源不断的打印出a的值。如果希望b依赖data中的x而变化，只需要保证b函数中有this.x即可。如果函数中没有出现data中的属性，那么无论dat
阅读全文
摘要：Vue.js最核心的功能有两个，一个是响应式的数据绑定系统，另一个是组件系统。本文仅仅探究双向绑定是怎样实现的。先讲涉及的知识点，再用简化的代码实现一个简单的hello world示例。 一、访问器属性 访问器属性是对象中的一种特殊属性，它不能直接在对象中设置，而必须通过defineProperty
阅读全文
摘要：前言 一般地，当模板内容比较简单的时候，使用data选项配合表达式即可。涉及到复杂逻辑时，则需要用到methods、computed、watch等方法。本文将详细介绍Vue实例对象的数据选项。 data data是Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter，
阅读全文
摘要：实现商品购买列表页面 步骤一：新建goodslist.vue文件 <template> <div id="tml"> <!--利用mui中的图文表格组件实现--> <div id="mui-content" class="mui-content" style="background-color:#f
阅读全文
摘要：实现图片分享列表 步骤一：新增图片列表文件photolist.vue <template> <div id="tml"> 图片分享页面 </div> </template> <script> </script> <style> </style> 步骤二：配置入口文件main.js的路由规则 //导入
阅读全文
摘要：实现新闻咨询页面 目录结构 步骤一：创建newslist.vue文件 <template> <div id="tml"> <!--使用mui框架，实现新闻资讯列表样式--> <ul class="mui-table-view"> <li v-for="item in list" class="mui
阅读全文
摘要：实现根组件通用的头部和底部样式 明白由webpack搭建起来的Vue项目的执行流程，那么就可以知道实现这个需要只要在根组件和入口文件上做“手脚”即可 <!--以后项目的根组件--> <template> <div> <!--利用mint-ui中的header组件实现整个系统的头部--> <mt-he
阅读全文
摘要：利用webpack解析和打包.vue组件页面 相关知识： vue项目中的每个页面其实都是一个.vue的文件，这种文件，Vue称之为组件页面，必须借助于webpack的vue-loader才能运行，所以必须安装相关的包。 【注意】 从webpack2.0开始，在webpack.config.js中添加
阅读全文
摘要：了解webpack的魔力： 项目结构以及开发环境 webpack初体验之打包文件 1、首先创建三个文件，分别是index.html、main.js和calc.js index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t
阅读全文
摘要：watch和computed均可以监控程序员想要监控的对象，当这些对象发生改变之后，可以触发回调函数做一些逻辑处理 watch监控自身属性变化 watch监控路由对象 计算属性computed的特点 计算属性会依赖于他使用的data中的属性，只要是依赖的属性值有改变，则自动重新调用一下计算属性； 如
阅读全文
摘要：前置知识请戳这里 vue-routerCDN地址：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js vue-router下载地址：https://github.com/vuejs/vue-router/tree/dev/dist vue2.0
阅读全文
摘要：前置知识请戳这里 获取DOM对象以及组件对象
阅读全文
摘要：本文只是结合一些代码和图片加强对Vue动画的理解，更多资料请戳这里 结合原生CSS实现动画 下面是一张图片，简单清晰明了是吧^-^ 下面是一段代码 结合animate.css实现动画 使用钩子函数实现动画效果
阅读全文
摘要：什么是钩子？ 大白话就是一系列的内部方法 下面是一张生命周期钩子的说明图 下面是一段代码测试 执行结果
阅读全文
摘要：Vue可以借助于vue-resource来实现Ajax请求 http请求报文 浏览器与服务器数据交互是遵循http协议的，当浏览器要访问服务器的时候，浏览器需要将相关请求数据提交给服务器。 格式分为：请求报文行、请求报文头、请求空行、请求报文体 http响应报文 当浏览器请求服务器的时候，服务器需要
阅读全文
摘要：MVVM拆分解释为： Model：负责数据存储； View：负责页面展示； View Model：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示 MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离，使各自的职责更加清晰，后期代码维护更加简单。以下用图解的形式分析Ajax
阅读全文
摘要：概念 Vue1.0提供了一系列的固定逻辑来使程序员更加容易的实现这些功能，我们称它为系统过滤器。Vue也提供了一个接口用来给程序员定义属于自己的特殊逻辑，Vue称之为自定义过滤器。 自定义私有的过滤器 下面是一个冗余的示范代码 自定义全局过滤器
阅读全文
摘要：v-on注册事件 【更多事件】 差值表达式 vue-text和v-html 用来解决网速过慢而导致一开始渲染出错的问题 v-cloak v-cloak指令保持在元素上直到关联实例结束编译后自动移出，v-cloak和CSS规则如[v-cloak]{display:none;}一起用时，这个指令可以隐藏
阅读全文