有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。 如果按照他解释的这么简单的话，完全可以在根组件app.vue里直接引入sidebar组件，注册，渲染。没必要多此一举。既然可以在route.config.js里面灵活...
脚手架vue-cli 搭建的项目，build后放于服务器上，发现其他资源全部变成静态加载成功，但路由视图为空，最初以为是webpack打包的问题，找了好久发现是路由配置问题。 解决办法如下： Vue.use(VueRouter) const router = new VueRouter({mode: history, base: /system/, //添加根目录scrollBehavior: () => ({ y: 0 }),routes })比如我是将打包后的dist和index.html放在tomcat上的system下，router 的根目录就是system。 方法很简...
Vue数据响应原理 官方的解释很清晰： 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因。 用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题...
参数：target：要更改的数据源(可以是对象或者数组) key：要更改的具体数据(可以是字符串和数字) value ：重新赋的值 用法：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。 例： data:{namelist:[{message:"叶落森",id:"1"},{message:"姜艳霞",id:"2"},{message:"姜小帅",id:"3"}] }, Vue.set(this.namelist,1,{message:"yeluosen",id:"1"}) 注：Vue.set()在methods中也可以写成this.$set() Vue.s...
引文 vue文档列表渲染中有条注意事项：这里提到的两种情况实际改变了数据但是没有触发视图更新。 由此引出Vue.set()，先上文档API： this.$set()和Vue.set()本质方法一样，前者可以用在methods中使用。 set方法调用时，可以触发页面全部重新渲染。 比如在vue中有个data数组arr：//arr=[1,2,3]arr[1]=bconsole.log(arr) // [1,2,3]Vue.set(arr,2,c)console.log(arr) // [1,b,c]可以看出set触发了整个页面的重新渲染，连arr[1]=b的效...
我们有时候常碰到vue中明明修改了数据，但是视图无法更新，因此我总结了一点点碰到此类的情况： 1、v-for遍历的数组，当数组内容使用的是arr[0].xx =xx更改数据，vue无法监测到 数组数据变动：我们使用某些方法操作数组，变动数据时，有些方法无法被vue监测，有些可以 Vue包装了数个数组操作函数，使用这些方法操作的数组去，其数据变动时会被vue监测： push() pop() shift() unshift() splice() sort() reverse() vue2.0还增加个...
说明：vue-router的几个文章中例子是连贯的，因此对哪块有疑问请翻阅按发表时间排序的其他文章。 一、概述 给路由定义不同的名字，根据名字进行匹配给不同的router-view定义名字，router-link通过名字进行对应组件的渲染。二、代码展示： 目录视图1、命名路由 2、命名视图 index.js import Vue from vue import Router from vue-router import Goodlists from @/Goodlists/goods import Title from @/Goodlists/title import Img ...
前言：前面我们把动态路由、嵌套路由等讲完了，说道完命名路由和命名视图，vue-router的基本使用方法就算是完篇了，还想仔细探究的同学可以去官网翻阅，加深理解。1.首先来说说什么是命名路由？ ① 官方文档的解释：https://router.vuejs.org/zh/guide/essentials/named-routes.html就是在routers配置路由名称的时候给路由定义不同的名字，这样的好处就是可以在使用router-link的to属性跳转路由的时候传一个对象从而实现与router.p...
利用简单的树形视图实现，熟悉了组件的递归使用 这是模拟的树形图数据 let all={ name:all, children:{ A:{ name:A, children:{ a1:{ name:a1, children:{ a11:{ name:a11, children:null }, a12:{ name:a12, children:null } } }, a2:{ name:a2, children:{ b21:{ name:b21, children:null } } } } }, B:{ name:B, children:{ b1:{ name:b1, children:{ b11:{ name:b11, children:null }, b12:{ name:b12, children:null } }...
常规情况下我们在vue实例的data中设置响应数据。但当数据为对象，我们增加或删除对象属性值时，视图并不触发更新，如何解决这个问题呢？ 实例代码如下： let vm = new Vue{el: #app,data: {obj: {k: v}},... } 有三种解决方案： 方案一：利用Vue.set(object,key,val) 例：Vue.set(vm.obj,k1,v1) 方案二：利用this.$set(this.obj,key,val) 例：this.$set(this.obj,k1,v1) 方案三：利用Object.assign({}，this.obj)创建新对象 例： t...
什么是数据驱动 数据驱动是vuejs最大的特点。在vuejs中，所谓的数据驱动就是当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom。 比如说我们点击一个button，需要元素的文本进行是和否的切换。在jquery刀耕火种的年代中，对于页面的修改我们一般是这样的一个流程，我们对button绑定事件，然后获取文案对应的元素dom对象，然后根据切换修改该dom对象的文案值。 而对于vuejs实现这个功能的流程，只需要在b...
1、使用v-model指令,使得视图和数据实现双向绑定。v-model主要用在表单的input输入框，完成视图和数据的双向绑定。2、JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type="text/javascript"> window.onload = function() { vm = new Vue({ el: #app, data: { message: Hello World, } }); } </script> 3、Html的页面代码 <div id="app" class="container"> <input type="text" v-mo...
前言 在 Vue 核心中除了响应式原理外，视图渲染也是重中之重。我们都知道每次更新数据，都会走视图渲染的逻辑，而这当中牵扯的逻辑也是十分繁琐。 本文主要解析的是初始化视图渲染流程，你将会了解到从挂载组件开始，Vue 是如何构建 VNode，又是如何将 VNode 转为真实节点并挂载到页面。 挂载组件($mount) Vue 是一个构造函数，通过 new 关键字进行实例化。 // src/core/instance/index.js function Vue (options) {if (process.en...
如何在Vue中实现以下内容？ Psuedo代码：<div v-context="getPerson(id)"><p>Name: {{ $data.name }}</p><p>Age: {{ $data.age }}</p> </div>解决方法:看起来你正在返回一个对象,所以你可以实际采用该方法并使用v-for迭代,如下所示：<div><p v-for=" (val, key) in getPerson(id)">{{key}}: {{val}}</p> </div>该文档有更多信息：https://vuejs.org/v2/guide/list.html#Object-v-for
我们可能经常会在处理vue项目的时候，遇到数据变化，但是视图并没有实时渲染的情况 vue视图为什么不渲染页面的原因 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器划重点！！！！这些 getter/setter 对用户来...