Vue開發問題總結
用vue开发了一段时间，针对团队中出现的问题做一下记录。文字表达能力不太好，大家将就看下，问题大概如下：
v-cloak属性
数组更新问题
对象更新问题
render函数使用
1. v-cloak 属性
vue的模板建议都加上v-cloak属性，网页加载的时候，先加载html，再加载js，网络不太好的情况下，页面会看到没有渲染的模板，不太美观。
假如用户的网络不太好，2s才把js文件下载下来，这里用setTimeout来模拟
没加v-cloak属性的代码
没加v-cloak属性的代码运行效果
下面是加了`v-cloak`的代码，在模板元素上加`v-cloak`属性，同时加一个样式，[v-cloak]{ display:none;
}
没有渲染的模板直接不显示给用户，当模板渲染后，vue会把v-cloak属性删除，所以下面代码运行效果是，前2s页面是空白的，2s后才显示渲染后的内容
加了v-cloak的代码
2.数组更新问题
代码
<body>
<style type="text/css">
[v-cloak]{ display: none;
} </style>
<div id="app" v-cloak>
<div v-for="item in items">
{{item}} </div>
</div>
<button onclick="update()">更新2为new2</button>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
<script type="text/javascript">
var items = [1,2,3,4,5] var vm = new Vue({
el: '#app',
data:{
items: items
}
}) function update(){
items[1] = 'new2'
} </script></body>我想更新 点击 遍历数据前，给所有对象加上isHide这个属性 用 我们的项目的数据基本都是题目数据，数据来源比较多，所以数据格式多种多样，但题目的类型是相对固定的，基本是选择题（单选题，多选题），判断题，排序题，连线题等，所以我们针对这些题目做了相应的组件，每种组件的需要的数据格式我们定义一种通用的格式，把各种不同的数据格式转成通用格式组件就可以复用了。那么问题来了，程序传一组数据（试卷）进来，我们怎么根据题类型的去调用相应的组件渲染呢？用v-if？ 选择题 排序题 题目数据中有个 1 表示单选题 2 表示多选题 3 表示排序题 数据格式 单选题和多选题目其实可以用一个组件，只是标题有和input的type有些不一样 单选题渲染效果 多选题渲染效果 数据格式 很简单，只是遍历下数据 渲染效果 现在给了一张试卷数据， 怎么根据题目类型调用相应的组件把这些数据渲染出来呢items第2项的值为new2，点击按钮的时候，发现数据并没有更新，其它vue文档里面有说明，哪些操作数组是可以检测到更新(文档链接)和注意事项(3.对象检测更新
<body>
<style type="text/css">
[v-cloak]{ display: none;
} </style>
<div id="app" v-cloak>
<div v-for="(item, index) in items">
<div v-show="!item.isHide">
title:{{item.title}} <br/>
content:{{item.content}}<br/>
<button @click="hide(item)">隐藏</button>
</div>
<hr>
</div>
</div>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
<script type="text/javascript">
var items = [
{
title:'title1',
content:'content1'
},{
title:'title2',
content:'content2'
}
] new Vue({
el: '#app',
data:{
items:items
},
methods:{
hide:function(item){
item.isHide = true
}
}
}) </script></body>隐藏的时候想隐藏当前数据，隐藏是用对象的isHide属性控制的，点击的时候，我们给当前对象添加一个isHide属性，值为true，但是并没有实现我们需要的效果。为什么呢，因为Vue 不能检测对象属性的添加或删除，那怎么整？
解决方法有两种：$set函数遍历数据前，给所有对象加上isHide这个属性
var items = [
{ title:'title1', content:'content1'
},{ title:'title2', content:'content2'
}
]
items.forEach(v=>{
v.isHide = false
})
new Vue({ el: '#app', data:{ items:items
}, methods:{ hide:function(item){
item.isHide = true
}
}
})用
$set函数new Vue({ el: '#app',
data:{
items:items
}, methods:{ hide:function(item){
this.$set(item, 'isHide', true)
}
}
})留个问题给大家，代码如下，1s后我用索引改变数组第2项的
content属性的值，能否生效<body>
<style type="text/css">
[v-cloak]{ display: none;
} </style>
<div id="app" v-cloak>
<div v-for="(item, index) in items">
title:{{item.title}} <br/>
content:{{item.content}}<br/>
<hr>
</div>
</div>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
<script type="text/javascript">
var items = [
{
title:'title1',
content:'content1'
},{
title:'title2',
content:'content2'
}
] new Vue({
el: '#app',
data:{
items:items
}
})
setTimeout(function(){
items[1].content = 'newcontent'
},1000) </script></body>4.render函数
题目基本类型
type字段来用标识题目类型定义组件
选择题
{ title:'dan xuan ti',//标题
type:1,//题目类型
options:['danxuan1','danxuan2','danxuan3','danxuan4'] //题目选项
}选择题组件代码
Vue.component('e-choice',{
template:`
<div>
<div>题目类型:{{typeName}}</div>
<div>{{index}}. {{topic.title}}</div>
<div v-for="(option,key) in topic.options">
<input :type="inputType" :name="index" />{{choiceOption(key)}}: {{option}}
</div>
</div>
`, methods:{ choiceOption:function(index){ return String.fromCharCode(65+index)
}
}, computed:{ typeName:function(){ return this.topic.type === 1? '单选题':'多选题'
}, inputType:function(){ return this.topic.type === 1? 'radio':'checkbox'
}
}, props:['index','topic']
})index 是题目在这张试卷中的顺序，topic 是题目数据
单选题用radio，多选题用checkbox单选题渲染效果
多选题渲染效果
排序题
{ title:'pai xu ti',
type:3,
options:['pai xu 3','pai xu 2','pai xu 1','pai xu 4',]
}排序题组件代码
Vue.component('e-sort',{
template:`<div>
<div>题目类型:排序题</div>
<div>{{index}}. {{topic.title}}</div>
<blockquote>
<div v-for="(option,key) in topic.options">
{{key+1}}: {{option}} </div>
</blockquote>
</div>`,
props: ['index','topic']
})
var data = [
{
title:'dan xuan ti', type:1,
options:['danxuan1','danxuan2','danxuan3','danxuan4']
},
{
title:'pai xu ti', type:3,
options:['pai xu 3','pai xu 2','pai xu 1','pai xu 4',]
},
{
title:'duo xuan ti', type:2,
options:['duoxuan1','duoxuan2','duoxuan3','duoxuan4']
},
{
title:'pai xu ti', type:3,
options:['pai xu 3','pai xu 2','pai xu 1','pai xu 4',]
},{
title:'dan xuan ti', type:1,
options:['danxuan1','danxuan2','danxuan3','danxuan4']
},
{
title:'pai xu ti', type:3,
options:['pai xu 3','pai xu 2','pai xu 1','pai xu 4',]
},
{
title:'duo xuan ti', type:2,
options:['duoxuan1','duoxuan2','duoxuan3','duoxuan4']
},
{
title:'pai xu ti', type:3,
options:['pai xu 3','pai xu 2','pai xu 1','pai xu 4',]
}
]
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
