现成MVVM 菜单教程 <!DOCTYPE html> <html><head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://unpkg.com/vue/dist/vue.js"></script> </head><body><div id="app"><input type="text" v-model="message"><p>{{ message }}</p></div><script>let vm = new Vue({el: #app,data: {message: Hello Vue.js!}})</script> </body></html>视图影响数据数据影响视图项目构架 <!DOCTYPE ...
前言 前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。 一、什么是跨域？ 1.什么是同源策略及其限制内容？ 同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到 XSS、CSFR 等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源。同源策略限制内容有： Cookie、LocalStorage、IndexedDB 等存储...
本文实例讲述了JavaScript模板引擎应用场景及实现原理。分享给大家供大家参考，具体如下： 一、应用场景 以下应用场景可以使用模板引擎： 1、如果你有动态ajax请求数据并需要封装成视图展现给用户，想要提高自己的工作效率。 2、如果你是拼串族或者数组push族，迫切的希望改变现有的书写方式。 3、如果你在页面布局中，存在共性模块和布局，你可以提取出公共模板，减少维护的数量。 二、实现原理 不同模板间实现原理大同小异，各有...
本文实例讲述了JavaScript模板引擎实现原理。分享给大家供大家参考，具体如下： 1、入门实例 首先我们来看一个简单模板：<script type="template" id="template"><h2><a href="{{href}}" rel="external nofollow" >{{title}}</a></h2><img src="{{imgSrc}}" alt="{{title}}"></script>其中被{{ xxx }}包含的就是我们要替换的变量。 接着我们可能通过ajax或者其他方法获得数据。这里我们自己定义了数据，具体如下： var data = [{ti...
前言 在日常开发中 动画是必不可少的一部分 不仅能让元素直接的切换显得更加自然 同时也能极大的增强用户体验 因此 在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡效果 同时也是支持JS的 不过在这个文章中讲述的都是如何利用CSS来实现过渡动画、keyframes动画以及实现的原理 过渡动画实现的原理 1.首先最基础的一点在于 如果你想要在单元素/单个组件之中实现过渡动画 那么 你需要在元素/组件所在的...
React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。本文从两个方便来解析 react-router 实现原理。一：介绍 react-router 的依赖库history；二：使用 history 库，实现一个简单的 react-router 路由。 history 介绍history 是一个 JavaScript 库，可让您在 JavaScript 运行的任何地方轻松管理会话历史记录。history 抽象出各种环境中的差异，并提供最小的...
React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同: React事件绑定属性的命名采用驼峰式写法，而不是小写。如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)并且 React 自己内部实现了一个合成事件，使用 React 的时候通常你不需要使用 addEventListener 为一个已创建的 DOM 元素添加监听器。你仅仅需要在这个元素初始渲染的时候提供一个监听器。 我们看一下这是怎么实现的...
vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 keep-aliv是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。 它有两个生命周期： activated: keep-alive组件激活时调用deactivated: keep-alive组件停用时调用它提供了include与exclude两个属性，允许组件有条件地进行缓存。 keep-alive key...
加载css需要用到css-loader和style-loader css-loader将@import 和 url 处理成正规的ES6 import ,如果@import指向的是一个外部资源，css-loader会跳过，而只会对内部资源做处理。css-loader处理之后，style-loader会将输出的css注入到打包文件中。css默认是inline模式，且实现了HMR接口。但inline不太适用于生产环境(全部输出在页面上)。还需要用extracttextplugin生成一个单独的css文件，但先一步一步来。 一，样式打包 1.安装css...
路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到这样 http://www.xxx.com/login 大致流程可以看成这样： 浏览器发出请求服务器监听到80端口（或443）有请求过来，并解析url路径根据服务器的路由配置，返回相应信息（可以是 html 字串，也可以是 json 数据，图片等）浏览器根据数据包的 Content-Type 来决定如何解析数据简单来说路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资...
何为scoped？ 在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。 scoped的实现原理 vue中的scoped属性的效果主要通过PostCSS转译实现，如下是转译前的vue代码： <style scoped> .ex...
写在前面：通常 SPA 中前端路由有2种实现方式： window.historylocation.hash下面就来介绍下这两种方式具体怎么实现的一.history1.history基本介绍window.history 对象包含浏览器的历史，window.history 对象在编写时可不使用 window 这个前缀。history是实现SPA前端路由是一种主流方法，它有几个原始方法： history.back() - 与在浏览器点击后退按钮相同history.forward() - 与在浏览器中点击按钮向前相同history.go(n) - 接受一个...
前言: 之前使用ES6写代码,webpack打包后上线,一点问题没有,也看过打包后的代码,长的很乱,也没敢看看咋回事,加载后就是能运行! 今天通过个例子理解一下打包前,和打包后的代码! 1.创建文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个 index.html 文件）。接下来我们再创建三个...
前言最近在研究 剖析Vue原理&实现双向绑定MVVM 这篇文章，一边学习一边总结一下自己的思考。 Vue是一个典型的MVVM框架，模型（Model）只是普通的JavaScript对象，修改它则视图（View）会自动更新。这种设计让状态管理变得非常简单而直观。那么Vue是如何把模型和视图建立起关联的呢？ 实现原理概述这是前言提到的文章里的代码，一段典型的体现了Vue特点的代码： <div id="mvvm-app"><input type="text" v-model="word"><p>{{word}}<...
授权，也叫访问控制，即在应用中控制谁能访问哪些资源（如访问页面/编辑数据/页面操作等）。在授权中需了解的几个关键对象：主体（Subject）、资源（Resource）、权限（Permission）、角色（Role）。主体主体，即访问应用的用户，在Shiro中使用Subject代表该用户。用户只有授权后才允许访问相应的资源。资源在应用中用户可以访问的任何东西，比如访问JSP页面、查看/编辑某些数据、访问某个业务方法、打印文本等等都是资源。用户只要...