Vue基本使用

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语法→原生语法）