分析初识vue小案例

刺骨的言语ヽ痛彻心扉 2023-09-27 09:42 97阅读 0赞

## 前言 ##

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

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

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

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

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

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>初始vue</title>
            
            <script  type="text/javascript" src="../js/vue.js"></script>
        </head>
        <body>
            
            <div id="root">
                
                <h1>hello,{
        {
        name}},我今年{
        {
        age}}岁了</h1>
            </div>
            <div id="root">
                
                <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>

![在这里插入图片描述][13c96645235141798730229d6e82949c.png]  
页面上第二个容器是无法解析的  
![在这里插入图片描述][5740d1c750d244a6b15261e14e1379dd.png]  
然后是一个容器对应两个实例，很明显也是不行的

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>初始vue</title>
            
            <script  type="text/javascript" src="../js/vue.js"></script>
        </head>
        <body>
            
            <div id="root">
                
                <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>

![在这里插入图片描述][7c2ceba8fd9c42dd97ffc9056a200181.png]  
只有一个容器对一个实例才是正常的

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>初始vue</title>
            
            <script  type="text/javascript" src="../js/vue.js"></script>
        </head>
        <body>
            
            <div id="root">
                
                <h1>hello,{
        {
        name}},我今年{
        {
        age}}岁了</h1>
            </div>
            <div id="root1">
                
                <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>

![在这里插入图片描述][a73943e5e6cd4e1caed95389ee4eb501.png]  
![在这里插入图片描述][724972fa4a754d868b54cb0ad03f49ec.png]

## 容器里面vue插值语法\{ \{\}\}只能写js表达式 ##

\{ \{xxx\}\}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性

如果写一个不存在data的属性肯定是不可以的  
![在这里插入图片描述][8d40aa798e2848a38d8bcf237c3ecab2.png]  
![在这里插入图片描述][75cdcfa8183d4a02a54b7286a6f93ae1.png]  
但是写一些其他的是可以的，比如1+1，Date.now(),这些都是js的表达式

![在这里插入图片描述][852287e412064533aa01651200535850.png]  
![在这里插入图片描述][167c2f161ac64ef3ae3f2edd5c6b10c3.png]  
一旦data中的数据发生变化，那么页面中用到该数据的地方也会自动更新

## 我们可以通过谷歌vue插件观察并且发现vue的值变化 ##

![在这里插入图片描述][a0b6eaa355d74425a524fdd5daedb653.png]  
同时可以点击value进行修改，点击后面的笔进行编辑，然后点击保存按钮保存  
![在这里插入图片描述][6068b2c2827341d08f37dd07649a313d.png]  
![在这里插入图片描述][ffba3b22e68f4080ac8148a582d7d944.png]

## 初识vue总结 ##

1 想让vue工作，就必须创建一个vue实例，并且传入一个配置对象（容器）  
2 root容器里的代码仍然符合html规范，只不过混入了一些特殊的vue语法  
3 root容器里的代码被称为vue模板  
4 vue实例和容器是一一对应的  
5 真实开发中只有一个vue实例，并且会配合着组件一起使用  
6 \{ \{xxx\}\}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性  
7 一旦data中的数据发生变化，那么页面中用到该数据的地方也会自动更新

[vue]: https://blog.csdn.net/weixin_46713508/article/details/126843183?csdn_share_tail=%7B%22type%22:%22blog%22,%22rType%22:%22article%22,%22rId%22:%22126843183%22,%22source%22:%22weixin_46713508%22%7D
[13c96645235141798730229d6e82949c.png]: https://img-blog.csdnimg.cn/13c96645235141798730229d6e82949c.png
[5740d1c750d244a6b15261e14e1379dd.png]: https://img-blog.csdnimg.cn/5740d1c750d244a6b15261e14e1379dd.png
[7c2ceba8fd9c42dd97ffc9056a200181.png]: https://img-blog.csdnimg.cn/7c2ceba8fd9c42dd97ffc9056a200181.png
[a73943e5e6cd4e1caed95389ee4eb501.png]: https://img-blog.csdnimg.cn/a73943e5e6cd4e1caed95389ee4eb501.png
[724972fa4a754d868b54cb0ad03f49ec.png]: https://img-blog.csdnimg.cn/724972fa4a754d868b54cb0ad03f49ec.png
[8d40aa798e2848a38d8bcf237c3ecab2.png]: https://img-blog.csdnimg.cn/8d40aa798e2848a38d8bcf237c3ecab2.png
[75cdcfa8183d4a02a54b7286a6f93ae1.png]: https://img-blog.csdnimg.cn/75cdcfa8183d4a02a54b7286a6f93ae1.png
[852287e412064533aa01651200535850.png]: https://img-blog.csdnimg.cn/852287e412064533aa01651200535850.png
[167c2f161ac64ef3ae3f2edd5c6b10c3.png]: https://img-blog.csdnimg.cn/167c2f161ac64ef3ae3f2edd5c6b10c3.png
[a0b6eaa355d74425a524fdd5daedb653.png]: https://img-blog.csdnimg.cn/a0b6eaa355d74425a524fdd5daedb653.png
[6068b2c2827341d08f37dd07649a313d.png]: https://img-blog.csdnimg.cn/6068b2c2827341d08f37dd07649a313d.png
[ffba3b22e68f4080ac8148a582d7d944.png]: https://img-blog.csdnimg.cn/ffba3b22e68f4080ac8148a582d7d944.png