1、初识Vue

饮马瀚海呐

已于 2022-10-21 12:00:22 修改

阅读量146

点赞数

分类专栏： Vue2 文章标签： vue.js javascript 前端

于 2022-10-19 23:24:01 首次发布

本文链接：https://blog.csdn.net/qq_44636569/article/details/127418148

版权

Vue2 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

初识Vue:
1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2、root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3、root容器里的代码被称为【Vue模板】。模板需要放在Vue实例中解析，扫描到Vue的特殊语法
4、容器的目的是：为Vue提供模板；把Vue的工作成果知道往哪放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识vue</title>
    <!-- 引入Vue.js -->
    <script type="text/javascript" src="/js/vue.js"></script>
    
</head>
<body>
    <!-- 
        初始Vue:
            1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
            2、root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
            3、root容器里的代码被称为【Vue模板】。模板需要放在Vue实例中解析，扫描到Vue的特殊语法
            4、容器的目的是：为Vue提供模板；把Vue的工作成果知道往哪放
     -->


    <!-- 准备好一个容器 -->
    <div id="root"><!-- 快捷方式创建div容器：div#root -->
        <h1>Hello,{{name}}</h1>
    </div>

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

    </script>

    
</body>
</html>