初学Vue, 关于data内的数据not defined的问题

原因：主要是重复定义了两个data导致的

一、问题截图

二、代码

<!--view层 模板--> <div id="app" v-cloak> <p>{{msg}}</p> <div>{{info.name}}</div> <div>{{info.grade.level}}</div> <a :href="info.url">click me!</a> </div> <script> var vm = new Vue({ el: "#app", data: { msg: "hook function" }, data(){ return{ //请求的返回参数格式, 必须和json字符串一样 info: { name: null, grade: { course: null, level: null } } } },

三、解决

删掉上一个 data:{} 就行了；其实, “data() { }” 为 “data: function(){ }” 的简写，相当于重复写了两个data, 第一个没有生效；

四、关于data的写法

data定义其实有三种方式：

--1. data: { msg: "hook function" }, --2. data(){ return{ msg: "hook function" } } --3. data: function(){ var msg = "hook function"; return msg; } 选取local storage： Vue.ls.get(USER_INFO)["username"] //需安装Vue-ls插件 npm install vue-ls —save //npm yarn add vue-ls //yarn