学习Vue第一天 (第一课)

1,创建一个Vue实例;

  <div id="app">
    {{ susan }}
  </div>

//固定的写法
  <script>
    var app = new Vue({
      el: '#app',   //对应html中的id或者calss
      data: {       //返回指定html中的内容或者数计
        susan: 'my name is susan'
      }
    })
  </script>

此时打开游览器就会输出: "my name is susan"

注意如果你的div是class属性  在el里要写成el : '.app'

 

2,数据冻结

 <div id="app">
    {{ message }}
  </div>

<script>
//const申明一个对象
    const Jiangle = {
      message: 'my name is Jiangle'
    }
//创建一个Vue实例
    var app = new Vue({
      el: '#app',
      data: Jiangle
    })
  </script>

以上写法也可以获取到message的数据,如果我们要冻结一个数计不会被修改

添加冻结数计的语法:Object.freeze(申明的对象);

修改后的代码是:

  <div id="app">
    {{ message }}
  </div>

<script>
//const申明一个对象
    const Jiangle = {
      message: 'my name is Jiangle'
    }
// 冻结数计
Object.freeze(Jiangle);
//创建一个Vue实例
    var app = new Vue({
      el: '#app',
      data: Jiangle
    })
  </script>