条件渲染v-if、v-show<template><div><a v-if="isPartA">partA</a><a v-show="!isPartA">partB</a><button v-on:click="toggle">toggle</button></div>
</template><script>export default {data () {return {isPartA: true}},methods: {toggle () {this.isPartA = !this.isPartA}}}
</script><style>html {height: 100%;}
</style>
点击按钮前点击按钮后v-if和v-show区别：v-if删除v-show用css控制 v-if、v-else<template><div><a...
Vue 2.0 开始支持服务端渲染的功能，所以本文章也是基于vue 2.0以上版本。网上对于服务端渲染的资料还是比较少，最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news。本人在公司做Vue项目的时候，一直苦于产品、客户对首屏加载要求，SEO的诉求，也想过很多解决方案，本次也是针对浏览器渲染不足之处，采用了服务端渲染，并且做了两个一样的Demo作为比较，更能直观的对比Vue前后端的渲染。话不多说，我们分别来看两个Demo:（欢迎st...
最近在开发中遇到一个在form表单对象里，有个图片上传的组件，上传成功后返回数据赋值后，图片没有展示出来 当我上传图片成功后给form.imgUrl赋值后，页面并没有出现图片的缩略图该怎么解决呢：方法1.$set// 上传成功回调函数
handleAvatarSuccess(res, file) {this.$set(this.form,‘imgUrl‘,res.data);
},
方法2.$forceUpdatehandleAvatarSuccess(res, file) {this.form.imgUrl = res.data;this.$forceUpdate();
},
$set官方ap...
<style type="text/css">[v-cloak] {display: none;}
</style>
<div id="app" v-cloak><h1>{{message}}</h1><h1>{{name}}</h1>
</div>
原因：由于JavaScript去操作DOM，都会等待DOM加载完成（DOM ready）。对于vuejs、angularjs这些会在DOM ready完会才回去解析html view Template，原文：https://www.cnblogs.com/woshidouzia/p/9308784.html
nuxt-cnode基于vue的nuxt框架仿的cnode社区服务端渲染，主要是为了seo优化以及首屏加载速度线上地址 http://nuxt-cnode.foreversnsd.cngithub地址 https://github.com/Kim09AI/nu...技术栈vuevue-routervuexnuxtaxiossimplemdeES6/7stylus目录结构
├─npm-shrinkwrap.json
├─nuxt.config.js # nuxt配置文件
├─package.json
├─README.md
├─utils
| ├─axios.js # axios封装
| ├─in...
什么是服务器端渲染前端渲染：html页面作为静态文件存在，前端请求时后端不对该文件做任何内容上的修改，直接以资源的方式返回给前端，前端拿到页面后，根据写在html页面上的js代码，对该html的内容进行修改。服务端渲染：前端发出请求后，后端在将HTML页面返回给前端之前，先把HTML页面中的特定区域，用数据填充好，再将完整的HTML返回给前端。在SPA场景下，服务端渲染都是针对第一次get请求，它会完整的html给浏览器，浏览器直接...
1.列表渲染1.1 v-for<!DOCTYPE html>
<html><head><meta charset="utf-8"> <style></style><script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script></head><body><div ><ul><li v-for="item in items" :key="item.id">{{item.message}}</li></ul></div><script>var vm = new Vue({el: ‘#app‘,data: {items: [{id: 1, message: ‘Foo‘},{id: 2, message: ‘Bar‘}]}});</script></body>
</html>
我们可以...
概述本节内容是在上一篇的基础上，实现对象类型的数据渲染，渲染到真实页面中难点有：如何知道单个vnode中有那些模板语法如何实现知道模板语法对应的值如何实现数据的替换，实现页面渲染流程概览图示找到模板语法在上文中我们实现了模板和vnode之间的相互映射，且用Map对象保存，所以可通过Map的内置方法实现代码实现 /*** 渲染虚拟DOM* @param {*} vm* @param {*} vnode*/function renderVNode(vm, vnode) {if (vnode.nodeType =...
在vue中，推崇的是数据驱动也就是数据更新进而使组件得以重新渲染；在某些情况下，我们想要在数据不改变的情况下，重新渲染组件；我遇到的一个情况是：同一个页面，两个tab页分别为tab1和tab2，公用了一个组件，在tab1页修改了数据，再去tab2页查看的时候，发现tab1修改的数据会在tab2中的组件中显示，为了能够使得公用的组件重新渲染，可以使用v-if指令进行合理处理。原文：https://www.cnblogs.com/llcdxh/p/9357661.html
问题：<img :src="item.image ? `../../assets/image/${item.image}` : ‘‘" alt="image"/> 解决方法： 加上require() 即可 <img :src="item.image ? require(`../../assets/image/${item.image}`) : ‘‘" alt="image"/>' )不显示 踩坑' ref='nofollow'>vue 之img的src是动态渲染时(即 :src=' ' )不显示 踩坑原文：https://www.cnblogs.com/corgisyj/p/12025012.html
问题：vue里面当通过索引值获取数据时，ajax数据成功返回，但是在火狐下不渲染解决：原文：https://www.cnblogs.com/zjp-/p/10306665.html
业务场景：在管理后台，在执行完，增，删，改，操作的时候。我们需要刷新一下页面，重载数据。在JQ中我们会用到location.reload()方法，刷新页面；在vue中，这里需要用到一个 provide / inject 这对用例。（其他方法：this.$router.go(0)，会强制刷新，出现空白页面体验不好）；原理是：通过控制router-view 的显示与隐藏，来重渲染路由区域，重而达到页面刷新的效果。代码如下：1：在父组件中加入<template><div id="app"><router...
很多时候，我们习惯于这样操作数组和对象: data() { // data数据return {arr: [1,2,3],obj:{a: 1,b: 2}};},// 数据更新 数组视图不更新this.arr[0] = ‘OBKoro1‘;this.arr.length = 1;console.log(arr);// [‘OBKoro1‘];// 数据更新 对象视图不更新this.obj.c = ‘OBKoro1‘;delete this.obj.a;console.log(obj); // {b:2,c:‘OBKoro1‘}
由于js的限制，Vue 不能检测以上数组的变动，以及对象的添加/删除，很多人会因为像上面这...
问题：vue渲染时对象里面的对象的属性提示undefined;Vue怎么根据后台数据渲染无限层级的列表？错误写法： 报错：解决办法添加一个：v-if原文：https://www.cnblogs.com/liangru/p/9040536.html
1. v-for遍历数组//item=>值，index=>索引
<ul id="example-2"><li v-for="(item, index) in items">{{ index }} - {{ item.message }}</li>
</ul>var example2 = new Vue({el: '#example-2',data: {items: [{ message: 'Foo' },{ message: 'Bar' }]}
})//结果
0-Foo
1-Bar遍历对象//完整模式，value=>值，key=>键名，index=>索引
<div v-for="(value, key, index) in object">{{ index }}. {{ key }}: {{ value }}
</div>new Vue(...
