Vue在HTML中如何使用

一、引入

<script src="./js/"></script>

二、准备一个容器

<div class="box"></div>

三、在script中创建一个Vue实例，且要传入一个配置对象，Vue实例和容器一一对应

<script>
        new Vue({
            el: '.box', //el用于指定当前Vue实例为哪个容器服务，值通常为选择器字符串。
            data: { //data中用于存储数据，数据供el所指定的容器去使用。
                name: 'super码力'
            }
        })
</script>

四、通过插值语法把Vue实例中的数据传入html标签中显示

    <div class="box">
        <!-- 插值语法 -->
        <!-- 功能：用于解析标签体内容。写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。 -->
        <h1>{{name}}</h1>
        <h3>{{name}}</h3>
        <h6>{{name}}</h6>
    </div>

浏览器打开显示效果如下：

 注意：

• 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
• 容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法