Vue的基本使用

插值表达式：{{ }}。

作用：将数据填充到HTML标签中。

插值表达式支持基本的计算操作

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<body>
    <div id="app">第一次学习：{{ msg }}</div>
    <!-- 引入MDNvue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        // 新建VM实例
        var vm = new Vue({
            el: "#app",      // 元素的挂在位置
            data: {　　　　　　// 模型数据（值时一个对象）
                msg: "hello Vue!",
            },
            methods: {

            }
        });
    </script>
</body>

// 浏览器显示结果如下：
 Vue的基本使用_数据

差值表达式将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

// 正常情况下，当数据改变时，插值处的内容会更新。
<div id="app">第一次学习：{{ msg }}</div>
Vue的基本使用_数据_02
// 通过使用 v-once 指令，执行一次性地插值，当数据改变时，插值处的内容不会更新。
<div id="app" v-once>第一次学习：{{ msg }}</div>
Vue的基本使用_vue.js_03

Vue代码运行原理分析：（vue语法-->原生语法）

简单点说就是vue代码会经过vue.js编译转换成原生js代码，从而呈现在浏览器当中。