01_01初识Vue

最新推荐文章于 2024-06-16 14:35:54 发布

林笙10

最新推荐文章于 2024-06-16 14:35:54 发布

阅读量86

点赞数

分类专栏： Vue3.0

本文链接：https://blog.csdn.net/weixin_46498227/article/details/119428355

版权

Vue3.0 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了如何通过Vue.js在HTML中实现动态数据绑定，包括创建Vue实例、配置数据model，并展示了如何在模板中使用表达式更新视图。重点在于Vue实例与DOM元素的对应关系和mustache语法的应用。

摘要由CSDN通过智能技术生成

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初识Vue</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<!-- 
    Vue实例和容器是一一对应的
    注意区分：js表达式  和  js代码
    1.表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方
      (1).a
      (2).a+b
      (3).demo(1)
      (4).x===y?'a':'b'
    2.js代码（语句）
      (1).if(){}
      (2).for(){}
-->

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>hello,{{name}},{{Date.now()}}</h1>

    </div>


    <script type="text/javascript">
        // 创建Vue实例
        new Vue({
            // el:document.getElementById('root')
            el: '#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
            data: {//data用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                name: "Vue"
            }

        })
    </script>
</body>

</html>