Vue的第一個實例

時間  2020-12-01
標籤 html 前端 vue 程序員 瀏覽器 app 框架 函數 學習 欄目 HTML 简体版
原文   原文鏈接 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1. 導入Vue的包 -->
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <!-- 未來 new 的Vue實例，會控制這個 元素中的全部內容 -->
  <!-- Vue 實例所控制的這個元素區域，就是咱們的 V -->
  <div id="app">
    <!-- {{}} 兩個大括號裏面寫對於的數據名稱 -->
    <p>{{ msg }}</p>
    <p>{{ msg1 }}騷年 </p>
  </div>

  <script>
    // 2. 建立一個Vue的實例
    // 當咱們導入包以後，在瀏覽器的內存中，就多了一個 Vue 構造函數
    // 注意：咱們 new 出來的這個 vm 對象，就是咱們 MVVM中的 VM調度者
    var vm = new Vue({ el: '#app', // 表示，當前咱們 new 的這個 Vue 實例，要控制頁面上的哪一個區域 
                    // 這裏能夠寫js選擇器
      // 這裏的 data 就是 MVVM中的 M，專門用來保存 每一個頁面的數據的
 data: { // data 屬性中，存放的是 el 中要用到的數據
 msg: '歡迎學習Vue 開始vue的學習', msg1:'開始努力吧！'
        // 經過 Vue 提供的指令，很方便的就能把數據渲染到頁面上，程序員再也不手動操做DOM元素了【前端的Vue之類的框架，不提倡咱們去手動操做DOM元素了】
 } }) </script>
</body>

</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程