1 .傳統開發模式對比

//原生js
<div id="msg"></div>
<script type="text/javascript">
var msg = 'Hello World';
var div = document.getElementById('msg');
div.innerHTML = msg;
</script> 

//jQuery
<div id="msg"></div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var msg = 'Hello World';
$('#msg').html(msg);
</script>
 

2. Vue.js之HelloWorld基本步驟

<div id="app">
    <div>{{msg}}</div> <!-- {{}} 插值表示式 -->
  </div>
  <script src="./js/vue.js"></script>
  <script>
    /* Vue的基本使用步驟
     1、 需要提供標籤用於填充資料
     2、 引入vue.js庫檔案
     3、 可以使用vue的語法做功能了
     4、 把vue提供的資料填充到標籤裡面 */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello vue'
       },
     });
  </script>
 

3. Vue.js之HelloWorld細節分析

1. 例項引數分析

• el： 元素的掛載位置（值可以是CSS選擇器或者DOM元素）

• data：模型資料（值是一個物件）

2. 插值表示式用法 {{}}

• 將資料填充到HTML標籤中

• 插值表示式支援基本的計算操作

3. Vue程式碼執行原理分析

   • 概述編譯過程的概念（Vue語法→原生語法）