12.Vue其他(2018.01.20)_vue2018-01-20-优快云博客

本文链接：https://blog.youkuaiyun.com/eighthroute/article/details/80117669

本文介绍了使用 Vue.js 进行开发的一些最佳实践，包括如何组织全局样式、局部样式的作用域限定、数据初始化的重要性及正确做法。特别是对于数据对象的初始化方式进行了详细解释，帮助开发者避免常见陷阱。

1.注意事项：
1). 全局样式放到顶级vue文件里面，例如 App.vue 。
2). 每个组件里面的style必须加上scoped，<style scoped>，顶级组件除外。

3). 必须初始化属性：

①. 由于 Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明根级响应式属性，哪怕只是一个空值：

var vm = new Vue({
  data: {    
    message: '' // 声明 message 为一个空值字符串
  },
  template: '<div>{{ message }}</div>'
})
// 之后设置 `message`
vm.message = 'Hello!'

如果你在 data 选项中未声明 message，Vue 将警告你渲染函数在试图访问的属性不存在。

②. 但是对于对象，我们并不需要声明对象里面所有的属性，只需要声明该对象即可：

<template>
    <div>
        <ul>
            <li v-for="obj in objs">{{obj.id}} - {{obj.name}} -{{obj.age}}</li>
        </ul>
    </div>
</template>
<script>
    export default {
        name:"Hello",
        data(){
            return {
                objs:[]
            }
        },
        created:function(){
            this.objs = [{
                'id':1,
                'name':'zs',
                'age':29
            },{
                'id':2,
                'name':'ls',
                'age':39
            },{
                'id':3,
                'name':'wu',
                'age':49
            }]
        }
    }
</script>
<style scoped>
</style>

注：data里面我们并不需要对对象的每个属性都进行初始化，我们只需要定义该对象，并且定义成正确的格式（比如数组），然后真正的数据可能从后台取出，然后改变data里面的数据。上例就能说明。

结果：