vue基础实例分析

最新推荐文章于 2024-07-05 23:33:29 发布

纯建

最新推荐文章于 2024-07-05 23:33:29 发布

阅读量229

点赞数

本文链接：https://blog.csdn.net/csdn_ycj2019/article/details/99870527

版权

<body>
  <div id="app">
    {{ msg }}
    msg
  </div>
  msg
</body>
<script src="../../lib/vue.js"></script>
<script>
  /* 
    当我们第一次通过script标签对引入vue.js时，我们就会有一个全局变量  Vue   
      Vue它是一个构造器函数

      Vue( options )
        this._init( options ) //在初始化执行vue

        参数： options 我们称之为‘ 选项 ’
          类型： Object


        options / el 
          我们称之为自动挂载： 将页面一个已经存在dom作为整个实例的作用范围，出了这个范围那么vm实例就没有作用了
          body不能作为el的挂载目标

        options / data 数据
          new类型中 data选项是一个对象
          使用形式： 在实例范围内，它相当于全局变量 
                    我们要将这个变量放在一个模板语法中才能解析，这个语法叫做mustache语法，也叫 ‘双大括号语法’
          使用范围： el确定的那个范围


    Vue是一个MVVM框架
      M: data选项
      V：el挂载的东西
      VM： vm实例


  */

  // console.log( Vue )



  // var vm = new Vue( options ) // 实例化Vue的到vm实例
  var vm = new Vue({
    el: '#app',// document.querySelector('#app')
    data: {
      msg: 'hello Vue.js'//在实例范围内，它相当于全局变量
    }
  }) // 实例化Vue的到vm实例




</script>