原因：主要是重复定义了两个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