分析初识vue小案例-阿里云开发者社区

分析初识vue小案例

2023-01-08 110

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 笔记

前言

我们已经写好了一个案例：初识vue小案例

接下来我们就分析初识vue小案例

容器和vue实例是一一对应的！

容器和vue实例应该是一一对应的，不允许出现一对一或者一对多

下面是一个一个容器对多个实例的例子，这里我们把id选择器换成类选择器了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>初始vue</title>
        <!-- 引入vue.js -->
        <script  type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备一个容器 -->
        <div id="root">
            <!-- {{xxx}}是vue中的插值语法 -->
            <h1>hello,{{name}},我今年{{age}}岁了</h1>
        </div>
        <div id="root">
            <!-- {{xxx}}是vue中的插值语法 -->
            <h1>hello,{{name}},我今年{{age}}岁了</h1>
        </div>
        <p #a></p>
        <script type="text/javascript">
             // 设置为 false 以阻止 vue 在启动时生成生产提示。
            Vue.config.productionTip= false 
            // 创建一个vue实例
            new Vue({
                // 属性通常为key:value的形式 key是不能变得，value可以变,多个key之前用,分割 最后一个key不写,
                el:'#root', // el就是的简写element，用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
                data:{  // data用于存储数据，数据供el所指定的容器使用，可以存好几个值 也是key:value的形式
                    name:'vue',
                    age:'18'
                }
            })
        </script>
    </body>
</html>

页面上第二个容器是无法解析的

然后是一个容器对应两个实例，很明显也是不行的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>初始vue</title>
        <!-- 引入vue.js -->
        <script  type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备一个容器 -->
        <div id="root">
            <!-- {{xxx}}是vue中的插值语法 -->
            <h1>hello,{{name}},我今年{{age}}岁了</h1>
        </div>
        <p #a></p>
        <script type="text/javascript">
             // 设置为 false 以阻止 vue 在启动时生成生产提示。
            Vue.config.productionTip= false 
            // 创建一个vue实例
            new Vue({
                // 属性通常为key:value的形式 key是不能变得，value可以变,多个key之前用,分割 最后一个key不写,
                el:'#root', // el就是的简写element，用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
                data:{  // data用于存储数据，数据供el所指定的容器使用，可以存好几个值 也是key:value的形式
                    name:'vue',
                    age:'18'
                }
            })
             // 创建一个vue实例
             new Vue({
                // 属性通常为key:value的形式 key是不能变得，value可以变,多个key之前用,分割 最后一个key不写,
                el:'#root', // el就是的简写element，用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
                data:{  // data用于存储数据，数据供el所指定的容器使用，可以存好几个值 也是key:value的形式
                    name:'java',
                    age:'28'
                }
            })
        </script>
    </body>
</html>

只有一个容器对一个实例才是正常的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>初始vue</title>
        <!-- 引入vue.js -->
        <script  type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备一个容器 -->
        <div id="root">
            <!-- {{xxx}}是vue中的插值语法 -->
            <h1>hello,{{name}},我今年{{age}}岁了</h1>
        </div>
        <div id="root1">
            <!-- {{xxx}}是vue中的插值语法 -->
            <h1>hello,{{name}},我今年{{age}}岁了</h1>
        </div>
        <p #a></p>
        <script type="text/javascript">
             // 设置为 false 以阻止 vue 在启动时生成生产提示。
            Vue.config.productionTip= false 
            // 创建一个vue实例
            new Vue({
                // 属性通常为key:value的形式 key是不能变得，value可以变,多个key之前用,分割 最后一个key不写,
                el:'#root', // el就是的简写element，用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
                data:{  // data用于存储数据，数据供el所指定的容器使用，可以存好几个值 也是key:value的形式
                    name:'vue',
                    age:'18'
                }
            })
             // 创建一个vue实例
             new Vue({
                // 属性通常为key:value的形式 key是不能变得，value可以变,多个key之前用,分割 最后一个key不写,
                el:'#root1', // el就是的简写element，用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串
                data:{  // data用于存储数据，数据供el所指定的容器使用，可以存好几个值 也是key:value的形式
                    name:'java',
                    age:'28'
                }
            })
        </script>
    </body>
</html>