Vue：El与Data

EL挂载的两种方式

第一种
直接挂载 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../js/vue.js"></script>
<title>Title</title>
</head>
<body>
    <div id="firstVue">
      你好，{{main}}
    </div>
</body>
<script type="text/javascript">
  //关闭生成提示
  Vue.config.productionTip=false;
  //第一种实现el方式s
  new Vue({
    el:"#firstVue",
    data:{
      main:"VUE"
    }
  })
</script >
</html>
第二种
使用Vue对象的$mountg挂载 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../js/vue.js"></script>
<title>Title</title>
</head>
<body>
    <div id="firstVue">
      你好，{{main}}
    </div>
</body>
<script type="text/javascript">
  //关闭生成提示
  Vue.config.productionTip=false;
  //第一种实现el方式s
  let v=new Vue({
    data:{
      main:"VUE"
    }
  })
  console.log(v);//这里的v是vue实例
  v.$mount("#firstVue")
</script >
</html>

DATA的两种写法

第一种

直接挂一个对象 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../js/vue.js"></script>
<title>Title</title>
</head>
<body>
    <div id="firstVue">
      你好，{{main}}
    </div>
</body>
<script type="text/javascript">
  //关闭生成提示
  Vue.config.productionTip=false;

  new Vue({
	el:"#firstVue",
    data:{
      main:"VUE"
    }
  })
</script >
</html>
第二种
函数式

ES6：新写法 data() { return { main:"VUE" } }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../js/vue.js"></script>
<title>Title</title>
</head>
<body>
    <div id="firstVue">
      你好，{{main}}
    </div>
</body>
<script type="text/javascript">
  //关闭生成提示
  Vue.config.productionTip=false;

  new Vue({
    el:"#firstVue",
    data:function () {
      return {
        main:"VUE"
      }
    }
  })
</script >
</html>

补充：认识vue对象
image

posted @ 2021-11-07 23:48  旅祸少年  阅读(54)  评论(0)    收藏  举报