在IE浏览器渲染原理下Vue2.0中的列表渲染出现未定义KEY

温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
本文转载自zhmig
&在大气效果里面是找不到xStreamVray这个大气效果的!
下面咱们就来看看如何实现,把xStreamVray添加进大气效果里面!
首先,我们打开3D max安装目录下的plugins!(例如:X:\Program Files\Autodesk\3ds Max 2012\plugins)
我们看到的会是这样的
然后我们选择vrayplugins这个文件夹
&接着看到只有xStreamVray2.dlr这个文件,这个就是我们要的文件!我们复制这文件!
然后返回到上一层,把复制了的xStreamVray2.dlr这个文件粘贴到这里!
(如下图:)
这样基本就算是成功了!
接下来就是看看如何设置了!
我们打开max的渲染设置窗口!在指定渲染器这个模块上!把产品级、材质编辑器及Activeshade,这三个选项都选成
V-ray的相关设置
(如下图:)
接着我们返回来看看大气效果,现在的大气就有xStreamVray2了!这样就算是真正的可以渲染vue文件了
(如下图:)
&我们现在可以看一下渲染时的效果!
&这样就代表渲染成功咯!!!!
顺便告诉大家一个vue在max的另外一个插件!这个人觉得这就是max有的,maya没有!(我说的是笔刷这个功能哦!!)小编实在有个羡慕嫉妒恨!
我们打开自定义用户界面,选择工具栏选项,点击加载,会看到xStream这个插件选择打开
(如下图:)
&这样我们会看到有类似vue界面那样的选项出现了!这个就是快捷工具!里面也有笔刷哦!!!
(如下图:)
阅读(120)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_',
blogTitle:'【转载】关于VUE在max中使用Vray渲染的问题',
blogAbstract:'\n很多网友都在问,Max怎么使用Vray渲染vue的文件!听说在大气中添加进vue的大气就可以了!但怎么也找不到!!\n今天我小测了一下,现在把我测试的结果告诉一下大家!\n一般我们看到的会是以下图片那种情况!\n\n&在大气效果里面是找不到xStreamVray这个大气效果的!\n下面咱们就来看看如何实现,把xStreamVray添加进大气效果里面!\n首先,我们打开3D max安装目录下的plugins!(例如:X:\\Program Files\\Autodesk\\3ds Max 2012\\plugins)',
blogTag:'',
blogUrl:'blog/static/5',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:5,
permalink:'blog/static/5',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人:
{list a as x}
{if !!b&&b.length>0}
他们还推荐了:
{list b as y}
转载记录:
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}可以使用&v-for&指令基于一个数组渲染一个列表。这个指令使用特殊的语法,形式为item in items,items&是数据数组,item&是当前数组元素的别名:
&ul id="example-1"&
&li v-for="item in items"&
{{ item.message }}
var example1 = new Vue({
el: '#example-1',
{ message: 'Foo' },
{ message: 'Bar' }
在&v-for&块内我们能完全访问父组件作用域内的属性,另有一个特殊变量&$index,正如你猜到的,它是当前数组元素的索引:
&ul id="example-2"&
&li v-for="item in items"&
{{ parentMessage }} - {{ $index }} - {{ item.message }}
var example2 = new Vue({
el: '#example-2',
parentMessage: 'Parent',
{ message: 'Foo' },
{ message: 'Bar' }
另外,你可以为索引指定一个别名(如果&v-for&用于一个对象,则可以为对象的键指定一个别名):
&div v-for="(index, item) in items"&
{{ index }} {{ item.message }}
从 1.0.17 开始可以使用&of&分隔符,更接近 JavaScript 遍历器语法:
&div v-for="item of items"&&/div&
template v-for
类似于 template&v-if,也可以将&v-for&用在&&template&&标签上,以渲染一个包含多个元素的块。例如:
&template v-for="item in items"&
&li&{{ item.msg }}&/li&
&li class="divider"&&/li&
&/template&
数组变动检测
Vue.js 包装了被观察数组的变异方法,故它们能触发视图更新。被包装的方法有:
你可以打开浏览器的控制台,用这些方法修改上例的&items&数组。例如:example1.items.push({ message: 'Baz' })。
变异方法,如名字所示,修改了原始数组。相比之下,也有非变异方法,如&filter(),concat()&和&slice(),不会修改原始数组而是返回一个新数组。在使用非变异方法时,可以直接用新数组替换旧数组:
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
可能你觉得这将导致 Vue.js 弃用已有 DOM 并重新渲染整个列表&&幸运的是并非如此。 Vue.js 实现了一些启发算法,以最大化复用 DOM 元素,因而用另一个数组替换数组是一个非常高效的操作。
有时需要用全新对象(例如通过 API 调用创建的对象)替换数组。因为&v-for&默认通过数据对象的特征来决定对已有作用域和 DOM 元素的复用程度,这可能导致重新渲染整个列表。但是,如果每个对象都有一个唯一 ID 的属性,便可以使用&track-by&特性给 Vue.js 一个提示,Vue.js 因而能尽可能地复用已有实例。
例如,假定数据为:
{ _uid: '88f869d', ... },
{ _uid: '7496c10', ... }
然后可以这样给出提示:
&div v-for="item in items" track-by="_uid"&
&!-- content --&
然后在替换数组&items&时,如果 Vue.js 遇到一个包含&_uid: '88f869d'&的新对象,它知道它可以复用这个已有对象的作用域与 DOM 元素。
track-by $index
如果没有唯一的键供追踪,可以使用&track-by="$index",它强制让&v-for&进入原位更新模式:片断不会被移动,而是简单地以对应索引的新值刷新。这种模式也能处理数据数组中重复的值。
这让数据替换非常高效,但是也会付出一定的代价。因为这时 DOM 节点不再映射数组元素顺序的改变,不能同步临时状态(比如&&input&&元素的值)以及组件的私有状态。因此,如果&v-for&块包含&&input&&元素或子组件,要小心使用&track-by="$index"
因为 JavaScript 的限制,Vue.js&不能检测到下面数组变化:
直接用索引设置元素,如&vm.items[0] = {};
修改数据的长度,如&vm.items.length = 0。
为了解决问题 (1),Vue.js 扩展了观察数组,为它添加了一个&$set()&方法:
// 与 `example1.items[0] = ...` 相同,但是能触发视图更新
example1.items.$set(0, { childMsg: 'Changed!'})
至于问题 (2),只需用一个空数组替换&items。
除了&$set(), Vue.js 也为观察数组添加了&$remove()&方法,用于从目标数组中查找并删除元素,在内部它调用&splice()&。因此,不必这样:
var index = this.items.indexOf(item)
if (index !== -1) {
this.items.splice(index, 1)
只用这样:
this.items.$remove(item)
对象 v-for
也可以使用&v-for&遍历对象。除了&$index&之外,作用域内还可以访问另外一个特殊变量&$key。
&ul id="repeat-object" class="demo"&
&li v-for="value in object"&
{{ $key }} : {{ value }}
el: '#repeat-object',
FirstName: 'John',
LastName: 'Doe',
也可以给对象的键提供一个别名:
&div v-for="(key, val) in object"&
{{ key }} {{ val }}
在遍历对象时,是按&Object.keys()&的结果遍历,但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。
值域 v-for
v-for&也可以接收一个整数,此时它将重复模板数次。
&span v-for="n in 10"&{{ n }} &/span&
显示过滤/排序的结果
有时我们想显示过滤/排序过的数组,同时不实际修改或重置原始数据。有两个办法:
创建一个计算属性,返回过滤/排序过的数组;
使用内置的过滤器&filterBy&和&orderBy。
计算属性有更好的控制力,也更灵活,因为它是全功能 JavaScript。但是通常过滤器更方便,
阅读(...) 评论()在 SegmentFault,学习技能、解决问题
每个月,我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助,内容完整,我也想知道答案
问题没有实际价值,缺少关键内容,没有改进余地
能够兼容IE9就好了
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
谢邀。你可以去github上搜promise的polyfill试试~不过我不敢保证一定能搞的定……
同步到新浪微博
分享到微博?
关闭理由:
删除理由:
忽略理由:
推广(招聘、广告、SEO 等)方面的内容
与已有问题重复(请编辑该提问指向已有相同问题)
答非所问,不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因(请补充说明)
我要该,理由是:
在 SegmentFault,学习技能、解决问题
每个月,我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。深入了解组件
过渡 & 动画
可复用性 & 组合
用 v-for 把一个数组对应为一组元素我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。
id="example-1"&
v-for="item in items"&
{{ item.message }}
var example1 = new Vue({
el: '#example-1',
data: {
{ message: 'Foo' },
{ message: 'Bar' }
}})
{{item.message}}
在 v-for 块中,我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
id="example-2"&
v-for="(item, index) in items"&
{{ parentMessage }} - {{ index }} - {{ item.message }}
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
{ message: 'Foo' },
{ message: 'Bar' }
}})
{{ parentMessage }} - {{ index }} - {{ item.message }}
你也可以用 of 替代 in 作为分隔符,因为它是最接近 JavaScript 迭代器的语法:
v-for="item of items"&&
一个对象的 v-for你也可以用 v-for 通过一个对象的属性来迭代。
id="v-for-object" class="demo"&
v-for="value in object"&
{{ value }}
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
}})
{{ value }}
你也可以提供第二个的参数为键名:
v-for="(value, key) in object"&
{{ key }}: {{ value }}&
{{ key }}: {{ value }}
第三个参数为索引:
v-for="(value, key, index) in object"&
{{ index }}. {{ key }}: {{ value }}&
{{ index }}. {{ key }}: {{ value }}
在遍历对象时,是按 Object.keys() 的结果遍历,但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。
key当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by=&$index& 。
这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by ,但它的工作方式类似于一个属性,所以你需要用 v-bind 来绑定动态值 (在这里使用简写):
v-for="item in items" :key="item.id"&
建议尽可能在使用 v-for 时提供 key,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。
因为它是 Vue 识别节点的一个通用机制,key 并不与 v-for 特别关联,key 还具有其他用途,我们将在后面的指南中看到其他用途。
数组更新检测变异方法Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:
你打开控制台,然后用前面例子的 items 数组调用变异方法:example1.items.push({ message: 'Baz' }) 。
替换数组变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组。相比之下,也有非变异 (non-mutating method) 方法,例如:filter(), concat() 和 slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组:
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)})
你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是,事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法,所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
注意事项由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength
举个例子:
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}})vm.items[1] = 'x' vm.items.length = 2
为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将触发状态更新:
Vue.set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue)
你也可以使用
实例方法,该方法是全局方法 Vue.set 的一个别名:
vm.$set(vm.items, indexOfItem, newValue)
为了解决第二类问题,你可以使用 splice:
vm.items.splice(newLength)
对象更改检测注意事项还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除:
var vm = new Vue({
data: {
}})vm.b = 2
对于已经创建的实例,Vue 不能动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如,对于:
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}})
你可以添加一个新的 age 属性到嵌套的 userProfile 对象:
Vue.set(vm.userProfile, 'age', 27)
你还可以使用 vm.$set 实例方法,它只是全局 Vue.set 的别名:
vm.$set(vm.userProfile, 'age', 27)
有时你可能需要为已有对象赋予多个新属性,比如使用 Object.assign() 或 _.extend()。在这种情况下,你应该用两个对象的属性创建一个新的对象。所以,如果你想添加新的响应式属性,不要像这样:
Object.assign(vm.userProfile, {
favoriteColor: 'Vue Green'})
你应该这样做:
vm.userProfile = Object.assign({}, vm.userProfile, {
favoriteColor: 'Vue Green'})
显示过滤/排序结果有时,我们想要显示一个数组的过滤或排序副本,而不实际改变或重置原始数据。在这种情况下,可以创建返回过滤或排序数组的计算属性。
v-for="n in evenNumbers"&{{ n }}&
data: {
numbers: [ 1, 2, 3, 4, 5 ]},computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
}}
在计算属性不适用的情况下 (例如,在嵌套 v-for 循环中) 你可以使用一个 method 方法:
v-for="n in even(numbers)"&{{ n }}&
data: {
numbers: [ 1, 2, 3, 4, 5 ]},methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
}}
一段取值范围的 v-forv-for 也可以取整数。在这种情况下,它将重复多次模板。
v-for="n in 10"&{{ n }} &&
v-for on a &template&类似于 v-if,你也可以利用带有 v-for 的 &template& 渲染多个元素。比如:
v-for="item in items"&
&{{ item.msg }}&
class="divider" role="presentation"&&
v-for with v-if当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时,这种优先级的机制会十分有用,如下:
v-for="todo in todos" v-if="!todo.isComplete"&
{{ todo }}&
上面的代码只传递了未完成的 todos。
而如果你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或 )上。如:
v-if="todos.length"&
v-for="todo in todos"&
{{ todo }}
&& v-else&No todos left!&
一个组件的 v-for
了解组件相关知识,查看 。完全可以先跳过它,以后再回来查看。
在自定义组件里,你可以像任何普通元素一样用 v-for 。
v-for="item in items" :key="item.id"&&
2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的。
然而,任何数据都不会被自动传递到组件里,因为组件有自己独立的作用域。为了把迭代数据传递到组件里,我们要用 props :
="(item, index) in items"="item"="index"="item.id"&
不自动将 item 注入到组件里的原因是,这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。
下面是一个简单的 todo list 的完整例子:
id="todo-list-example"&
v-on:submit.prevent="addNewTodo"&
for="new-todo"&Add a todo&
="newTodoText"="new-todo"="E.g. Feed the cat"
="todo-item"="(todo, index) in todos"="todo.id"="todo.title"="todos.splice(index, 1)"&
注意这里的 is=&todo-item& 属性。这种做法在使用 DOM 模板时是十分必要的,因为在 &ul& 元素内只有 &li& 元素会被看作有效内容。这样做实现的效果与 &todo-item& 相同,但是可以避开一些潜在的浏览器解析错误。查看
来了解更多信息。
Vue.component('todo-item', {
template: '\
{{ title }}\
&button v-on:click="$emit(\'remove\')"&Remove&/button&\
props: ['title']})new Vue({
el: '#todo-list-example',
data: {
newTodoText: '',
title: 'Do the dishes',
title: 'Take out the trash',
title: 'Mow the lawn'
nextTodoId: 4
methods: {
addNewTodo: function () {
this.todos.push({
id: this.nextTodoId++,
title: this.newTodoText
this.newTodoText = ''
}})
Add a todo
发现错误?想参与编辑?

我要回帖

更多关于 浏览器的渲染过程 的文章

 

随机推荐