vue | 易学教程

web前端开发学，新手学习前端应该先学vue还是react？

阅读更多关于 web前端开发学，新手学习前端应该先学vue还是react？

新手学vue还是react？下面本篇文章给大家分析一下。有一定的参考价值，正在学习或者有需要的朋友可以参考一下，希望对大家有所帮助。出身背景： react是facebook团队开发，2013.3月发布。目前版本15.5.4（初始版本是13开头），社区较成熟，拥有更大的生态圈 vue是Evan You个人开发，2014年2月发布 vue2.0版本，生态圈较小优势： react官网推荐的三个特点如下：状态机 —轻松创建交互界面基于组件 —封装组件，管理状态学习一次，到处使用 —跨平台更大的规模、更多的使用者、更好的可测试性 Web和原生APP 能提供更多支持和工具的更大的生态系统 vue 官网推荐的三个特点易用，—会html、css、js即刻开始使用灵活，渐进式技术栈性能，17kb (min+gzip)，渲染速度更快，体积更小模板或渲染的灵活选项语法以及项目设置的简单缺点： react：需要转换开发模式（函数式编程）学习新的概念和语法（jsx、es5/6等）需要其他类库支持 (redux) vue：个人维护框架，风险可能会更大社区不成熟，部分依赖开发人员更新资源较少适合场景 react：大型复杂应用程序同时适用于web端和原生APP 周期长，不断迭代的需求 vue：模板搭建开发模式周期短、小型应用程序 React和Vue都是优秀的UI库

Vue.js中过滤器（filter）的使用

阅读更多关于 Vue.js中过滤器（filter）的使用

Vue.js 过滤器的基本使用（filter） vue中的过滤器分为两种：局部过滤器和全局过滤器 1、定义无参全局过滤器 Vue.filter('msgFormat', function(msg) { // msg 为固定的参数即是你需要过滤的数据 return msg.replace(/单纯/g, 'xxx') }) 完整示例 <div id="app"> <p>{{ msg | msgFormat}}</p> </div> <script> // 定义一个 Vue 全局的过滤器，名字叫做 msgFormat Vue.filter('msgFormat', function(msg) { // 字符串的 replace 方法，第一个参数，除了可写一个字符串之外，还可以定义一个正则 return msg.replace(/单纯/g, 'xx') }) </script> 2、定义有参全局过滤器 <div id="app"> <p>{{ msg | msgFormat('疯狂','--')}}</p> </div> <script> // 定义一个 Vue 全局的过滤器，名字叫做 msgFormat Vue.filter('msgFormat', function(msg, arg, arg2) { // 字符串的 replace 方法，第一个参数，除了可写一个字符串之外

05-Vue入门系列之Vue实例详解与生命周期

阅读更多关于 05-Vue入门系列之Vue实例详解与生命周期

原文地址 http://www.cnblogs.com/fly_dragon/p/6220273.html 05-Vue入门系列之Vue实例详解与生命周期 Vue的实例是Vue框架的入口，其实也就是前端的ViewModel，它包含了页面中的业务逻辑处理、数据模型等，当然它也有自己的一系列的生命周期的事件钩子，辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。 5.1. Vue实例初始化的选项配置对象详解前面我们已经用了很多次 new Vue({...}) 的代码，而且Vue初始化的选项都已经用了 data 、 methods 、 el 、 computedd 等,估计您看到这里时，应该已经都明白了他们的作用，我们就详细讲解一下他们的使用情况。更详细的请参考官网内容 5.1.1. Vue实例的的data对象介绍 Vue的实例的数据对象data 我们已经用了很多了，数据绑定离不开data里面的数据。也是Vue的核心属性。它是Vue绑定数据到HTML标签的数据源泉，另外Vue框架会自动监视data里面的数据变化，自动更新数据到HTML标签上去。本质原理是：Vue会自动将data里面的数据进行递归抓换成getter和setter，然后就可以自动更新HTML标签了，当然用getter和setter所以老的浏览器Vue支持的不够好。 data对象的类型：

vue学习写的demo

阅读更多关于 vue学习写的demo

因为最近 vue 火热，所以自己也自学了一下 vue ，看了下官网的 api ，也看了网上的教程，自己结合所学的，写了个 demo ，以下是我学习时遇到的问题，和 demo 中涉及的知识点。 1. 这个 demo 用的是官网的配置方法，基于 node,webpack,vue-cli 的脚手架。具体步骤大家可以去官网教程查看，写的很详细。 2. 下面是这个 demo 的显示效果和目录环境这个 demo 中涉及的都是基础的知识点，希望对于初学者能有帮助，首先我们根据步骤一步一步看代码。首先运行完 index.html 之后，就会进入到 main.js 这里会从 main.js 进入到 app.vue 中这个就是首页，看结构可以看出，我们上面的两个板块，用到了vue-link 组件，这个组件就相当于 a 链接，他会通过 to 后面的相对路径找到对应的页面。然后页面的内容，会显示在 router-view 中但首先你的 vue 项目要支持路由，然后看一下router文件夹下 index.js 中的代码我们把要跳转的两个页面路径配置在index.js 中，其中第一个配置的就是默认进来路径展示是哪个版块。板块中的数据是调用的 mock 假接口。这里说说，怎么在 vue 里面使用假接口。首先在 index.html 下新建一个 data.json 。里面写你要模拟的 json 数据。

vue入门

阅读更多关于 vue入门

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app">  {{message}} </div> <script src="vue.min.js"></script> <script> // 创建一个vue对象 new Vue({ el: '#app',//绑定vue作用的范围 data: {//定义页面中显示的模型数据 message: 'Hello Vue 哈哈!' } }) </script> </body> </html> 来源： https://www.cnblogs.com/liuyi13535496566/p/12578822.html

如何改造vue-cli,将mockjs嵌入到webpack

阅读更多关于如何改造vue-cli,将mockjs嵌入到webpack

最近准备开发一款 web app，是前后端并行开发的场景，因此需要 mock 一些数据，但是 vue 官网上发现没有跑在webpack上的例子。案例数据来自网上。一、安装 vue 脚手架并初始化 webpack 项目 //全局安装 vue-cli npm install vue-cli -g //创建一个基于 webpack 模板的新项目 vue init webpack mock-server-demo //切换至mock-server-demo目录 cd mock-server-demo 二、安装依赖 //我们使用axios来发起http请求 npm install axios --save //安装依赖mockjs npm install mockjs --save-dev 三、在项目根路径下创建mock文件夹 3-1 新建一个 index.js 文件，公共一个 get 请求 3-2 新建一个 util.js 文件，用来读取指定的 json 文件 3-3 新建一个 userInfo.json 文件，用来保存随机生成的一些数据 //index.js const Mock = require('mockjs');//mockjs 导入依赖模块 const util = require('./util');//自定义工具模块 //返回一个函数 module.exports =

webpack 的安全问题

阅读更多关于 webpack 的安全问题

vue应用，大部分会使用webpack进行打包，如果没有正确配置，就会导致vue源码泄露。 webpack是一个JavaScript应用程序的静态资源打包器（module bundler）。它会递归构建一个依赖关系图（dependency graph）,其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。可以直接使用浏览器的F12调试模式进行查看，我们对vue的源码泄露并没有什么兴趣，感兴趣的是泄露的各种信息如API、加密算法、管理员邮箱、内部功能等等。下图泄露了全部的API。很多vue应用都是先渲染页面再判断是否登陆！根据这个小缺陷，我们首先可以查看相关功能，或者利用 Burpsuite 修改验证用户的返回包，然后爬虫爬一下API，分析一下参数，偶尔会遇到没有权限验证的接口，或者会有注入、XSS之类的漏洞。参考文章： https://www.codercto.com/a/57536.html 来源： https://www.cnblogs.com/zpchcbd/p/12577610.html

Vue项目页面跳转时，窗口上方显示进度条

阅读更多关于 Vue项目页面跳转时，窗口上方显示进度条

在vue项目中，为了减少首屏加载的时间，通常会开启路由的懒加载。路由懒加载配合gizp确实能帮助我们大大的加快首屏的加载时间。然而，路由懒加载会使得我们在第一次打开一个新页面的时候，会有一个加载时间。如果在这个时候我们没有一个提示的话，给人的感觉会是好像我点了页面跳转但是没反应。所以，这个时候我们可以加一个进度条来告知用户。具体实现，我们使用NProgress这个滚动条效果插件。 1.安装： cnpm install --save nprogress 2.在main.js中引入： 1 import NProgress from 'nprogress' 2 import 'nprogress/nprogress.css' 3.在main.js中进行配置： 1 NProgress.configure({ 2 easing: 'ease', // 动画方式 3 speed: 500, // 递增进度条的速度 4 showSpinner: false, // 是否显示加载ico 5 trickleSpeed: 200, // 自动递增间隔 6 minimum: 0.3 // 初始化时的最小百分比 7 }) 4.在main.js中对路由钩子进行设置： //当路由进入前 router.beforeEach((to, from , next) => { // 每次切换页面时，调用进度条

417 vue双向数据绑定指令

阅读更多关于 417 vue双向数据绑定指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <div>{{msg}}</div> <div> <input type="text" v-model='msg'> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 双向数据绑定 1、从页面到数据 2、从数据到页面 */ var vm = new Vue({ el: '#app', data: { msg: 'Hello Vue' } }); </script> </body> </html> 来源： https://www.cnblogs.com/jianjie/p/12572888.html

vue静态资源放在src/assets与static目录下的区别

阅读更多关于 vue静态资源放在src/assets与static目录下的区别

assets 为了回答这个问题，我们首先需要了解Webpack如何处理静态资产。在 *.vue 组件中，所有模板和CSS都会被 vue-html-loader 及 css-loader 解析，并查找资源URL。例如，在 <img src="./logo.png"> 和 background: url(./logo.png) 中， "./logo.png" 是相对的资源路径，将由Webpack解析为模块依赖。因为 logo.png 不是 JavaScript，当被视为模块依赖时，需要使用 url-loader 和 file-loader 处理它。vue-cli 的 webpack 脚手架已经配置了这些 loader，因此可以使用相对/模块路径。由于这些资源可能在构建过程中被内联/复制/重命名，所以它们基本上是源代码的一部分。这就是为什么建议将Webpack 处理的静态资源放在 /src 目录中和其它源文件放一起的原因。事实上，甚至不必把它们全部放在 /src/assets ：可以用模块/组件的组织方式来使用它们。例如，可以在每个放置组件的目录中存放静态资源。 static 相比之下， static/ 目录下的文件并不会被 Webpack 处理：它们会直接被复制到最终目录（默认是 dist/static ）下。必须使用绝对路径引用这些文件，这是通过在 config.js

订阅 vue