Vue-2、初识Vue-CSDN博客

本文链接：https://blog.csdn.net/ChenJin_2/article/details/135410196

本文介绍了如何在HTML中使用Vue创建实例，包括单个Vue实例对应多个容器的情况，以及如何通过data属性进行数据绑定。重点讨论了el属性的选择和多容器下Vue实例的管理。

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

1、helloword小案列

在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始Vue</title>
    <!--引入vue-->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <!--
    初始Vue:
    1、想让Vue工作，就必须创建一个实例。且要传入一个配置对象
    2、root容器里面的代码依然符合html规范，只不过混入了一些特殊的Vue语法
    3、root容器里面的代码被称为[Vue模板]

    -->
    <div id="root">
        <h1>hello，{{name}}</h1>
        <h1>我的年龄是{{age}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止Vue启动时产生生产提示。
        //创建Vue实例
        new Vue({
            el:'#root', //el用于指定当前Vue实例为那个容器服务，值通常为css选择器字符串。
            data:{  //data中用于存储数据，数据提供el所指定的容器去处理。值我们暂时先写成一个对象。
                name:'陈晋',
                age:18
            }
        })
    </script>
</body>
</html>

2、多个容器对应一个vue实例。则vue实例优先对应排名靠前的容器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始Vue</title>
    <!--引入vue-->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>



    <div class="root">
        <h1>hello1，{{name}}</h1>
        <h1>我的年龄是1,{{age}}</h1>
    </div>

    <div class="root">
        <h1>hello2，{{name}}</h1>
        <h1>我的年龄是2,{{age}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止Vue启动时产生生产提示。
        //创建Vue实例
        new Vue({
            el:'.root', //el用于指定当前Vue实例为那个容器服务，值通常为css选择器字符串。
            data:{  //data中用于存储数据，数据提供el所指定的容器去处理。值我们暂时先写成一个对象。
                name:'陈晋',
                age:18
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始Vue</title>
    <!--引入vue-->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>


<div class="root">
    <h1>hello2，{{name}}</h1>
    <h1>我的年龄是2,{{age}}</h1>
</div>

    <div class="root">
        <h1>hello1，{{name}}</h1>
        <h1>我的年龄是1,{{age}}</h1>
    </div>

  

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止Vue启动时产生生产提示。
        //创建Vue实例
        new Vue({
            el:'.root', //el用于指定当前Vue实例为那个容器服务，值通常为css选择器字符串。
            data:{  //data中用于存储数据，数据提供el所指定的容器去处理。值我们暂时先写成一个对象。
                name:'陈晋',
                age:18
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
3.多个容器对应多个vue实例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始Vue</title>
    <!--引入vue-->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="root1">
        <h1>hello1，{{name}}</h1>
        <h1>我的年龄是1,{{age}}</h1>
    </div>
    <hr>
    <div id="root2">
        <h1>hello2，{{name}}</h1>
        <h1>我的年龄是2,{{age}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止Vue启动时产生生产提示。
        //创建Vue实例
        new Vue({
            el:'#root1', //el用于指定当前Vue实例为那个容器服务，值通常为css选择器字符串。
            data:{  //data中用于存储数据，数据提供el所指定的容器去处理。值我们暂时先写成一个对象。
                name:'陈晋',
                age:18
            }
        })

        new Vue({
            el:'#root2',
            data:{
                name:'小明2',
                age:2
            }
        })
    </script>
</body>
</html>