直接使用 Vue 构建前端单页面应用，页面源码时只有简单的几行 html，这并不利于网站的 SEO，这时候就需要服务端渲染 2016 年 10 月 25 日，zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js 几小时后，一个基于 Vue.js 的服务端渲染应用框架应运而生，与 Next.js 异曲同工，这就是Nuxt.js 一、快速模板 在已经安装了 vue-cli 的前提下，可以快速创建一个 nuxt 的项目模板 vue init nuxt-community/starter-t...
因为对网页SEO的需要，要把之前的React项目改造为服务端渲染，经过一番调查和研究，查阅了大量互联网资料。成功踩坑。 选型思路：实现服务端渲染，想用React最新的版本，并且不对现有的写法做大的改动，如果一开始就打算服务端渲染，建议直接用NEXT框架来写项目地址：https://github.com/wlx200510/react_koa_ssr脚手架选型：webpack3.11.0 + react Router4 + Redux + koa2 + React16 + Node8.x主要心得：对React的相关知识更加熟悉...
实例如下： //每次页面渲染完之后滚动条在最底部 updated:function(){this.$nextTick(function(){var div = document.getElementById(dialogue_box);div.scrollTop = div.scrollHeight;})} //第一次页面渲染完之后滚动条在最底部 methods:function(){this.$nextTick(function(){var div = document.getElementById(dialogue_box);div.scrollTop = div.scrollHeight;})}以上这篇vue 每次渲染完页面后div的滚动条保持在最底部的方法就...
需要注意的是，Vue之所以能够监听Model状态的变化，是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化。但是，对于数组元素的赋值，却没有办法直接监听，因此，如果我们直接对数组元素赋值： vm.todos[0] = {name: New name,description: New description };会导致Vue无法更新View。 正确的方法是不要对数组元素赋值，而是更新： vm.todos[0].name = New name; vm.todos[0].description = New des...
(用的脚手架vue-cli) 第一步： 在main.js中如下声明使用 import axios from axios; Vue.prototype.$axios=axios; 那么在其他vue组件中就可以this.$axios调用使用 第二步：在webpack配置一下proxyTable(config之下的index.js) dev:{ 加入以下 proxyTable: { /api: { target: http://api.douban.com,//设置你调用的接口域名和端口号别忘了加http changeOrigin: true, pathRewrite:{ ^/api: ///这里理解成用‘/api代替target里面的...
Vue实践分享（三）在实际项目的开发过程中，经常会遇到页面还没渲染完成而插件就已经开始加载的问题，这样就会导致显示和功能出错。 可以通过Vue中的nextTick来解决 Vue.nextTick(function() {//widget });这样就会在页面渲染完成后再执行nextTick内的插件 以上这篇基于Vue渲染与插件的加载顺序的问题详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
添加css [v-cloak] { display: none; }给vue对象加上v-cloak <div v-cloak> {{ message }} </div> 以上这篇快速处理vue渲染前的显示问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
今天在学习vue的过程中，发现一个有趣的现象。 在某一组件下的某一数据通过点击事件被动态修改的时候，对应view中的数据同步的进行了修改，没错，这不是废话吗，vue的一大特色就是数据的双向绑定。可有趣的是，该组件下我写的另一个用Math.random()的data值对应的值和视图也发生了变化 这就让我这个刚入门的小白有点奇怪了，我修改一个，怎么变了两个？？？？脑洞放开一想，会不会数据在双向同步的时候，发生了什么，比如。是不是只...
本文采用nuxt进行服务端渲染https://zh.nuxtjs.org/Nuxt.js 十分简单易用。一个简单的项目只需将 nuxt 添加为依赖组件即可。Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统，受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发，我们正在使用的简书，便是基于Vue来构建的。 我们知道，SPA前端渲染存在两大痛点：（1）SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息，使网站无法在搜索...
微信小程序的界面程序支持html语法，多加了一部分标签，如view、block、templete等。 模版渲染 index.wxml <view><p>{{helloWord}}</p> </view> 其中{{}}里面包含的内容你可以理解为一个变量，怎么让程序解析出{{helloWord}}变量 在index.js 中注册这个变量 var json = {data:{"helloWord" : "hello world"} };page(json) 然后我们运行小程序，就可以发现显示的就是hello world，即所有的变量都需要包含在注册界面的data中 有的人...
前言最近在写 koa 的时候想到，如果我部分代码提供api，部分代码支持ssr，那我应该如何写呢？（不想拆成 2个服务的情况下） 而且最近写的项目里面也用过一些服务端渲染，如nuxt，自己也搭过next的项目，确实开发体验都非常友好，但是友好归友好，具体又是如何实现的呢，诸位有没有考虑过？ 本着求真务实的折腾态度，选了react作为研究对象（主要是vue写的有点多，恶心了），那下面就简单就以最小成本写一个react的服务端渲染 demo用...
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题，具体内容如下一. 异常描述 本来使用的是vue-router的hash模式，但是hash模式下url需要带“#”符号，不仅看起来不舒服，而且有些场景下是会破坏路由中的"#"（微信分享页面就会把"#"后边的内容处理掉），所以就需要使用history模式，然后就让后端改下nginx配置： location / { try_files $uri $uri/ /index.html; }vue-router使用history模式+使用嵌套路由： ...
关于SSR的文章网上很多，一开始看得我云里雾里。然后去Vue.js 服务器渲染指南和nuxt官网看了看，发现文章大多都是搬运官网的内容，真正讲的清晰明了的很少。所以想写篇文章学习下SSR，希望能够帮助大家快速理解Vue SSR。 什么是SSR？SSR，即服务器渲染，就是在服务器端将对Vue页面进行渲染生成html文件，将html页面传给浏览器。 优点： SEO 不同于SPA的HTML只有一个无实际内容的HTML和一个app.js，SSR生成的HTML是有内容的，这让搜...
本文介绍了vue watch自动检测数据变化实时渲染的方法，分享给大家，具体如下:首先确认 watch是一个对象，一定要当成对象来用。 对象就有键，有值。 键：就是你要监控的那个家伙，比如说$route，这个就是要监控路由的变化。或者是data中的某个变量。 值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。 值也可以是函数名：不过这个函数名要用单引号来包裹。 第三...
React 组件化思想受到越来越多开发者的关注，组件化思想帮助开发者将页面解耦成一个一个组件，代码更加模块化, 更易扩展。而目前流行的后端模板引擎如 ejs, swig, jade, art 共同的问题是： 需要学习各类模板引擎定义的语法，如 {{if}}, {{loop}}对组件化支持不够强，实现复杂，不易用针对以上痛点，笔者基于 React 造出了 noox 这样一个工具，专注于后端模板的解析，让模板解析更加简单，易用。 使用方法 安装 npm install noox简...