Vue的基础使用

最新推荐文章于 2023-02-12 14:16:20 发布

MZ小白

最新推荐文章于 2023-02-12 14:16:20 发布

阅读量144

点赞数

分类专栏： vue 文章标签： Vue的基础使用 vue vue使用

本文链接：https://blog.csdn.net/XLGKXSH/article/details/99232561

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Vue的基础使用

1**.第一个例子**

<body>
    <div id="container">
        <h1>{{msg}}</h1>
    </div>

    <script>
        new Vue({
            el: "#container",
            data: {
                msg: '麻子'
            }
        })
    </script>
</body>

通过new的方式来得到了Vue的实例，在new通过一个对象来对Vue的实例配置（el,data）；

接触了双花括号{{}}的语法；可以读取变量的值，显示在调用的元素的innerHTML中

2.双花括号

语法：<any>{{表达式}}</any>

作用：执行表达式，将表达式的结果输出到当前调用元素的innerHTML中

<body>
    <div id="container">
        <h1>{{car.brand}}</h1>
        <p>{{3+5}}</p>
    </div>

    <script>
        new Vue({
            el: "#container",
            data: {
               car:{
                   brand:'Volvo',
                   price:30
               }
            }
        })
    </script>
</body>