目录

从0到1学习Vue框架Day01

JAY.LIN 收录于前端技术栈

2025-09-07 约 1467 字预计阅读 3 分钟

https://bing.ee123.net/img/rand?artid=151295916

目录

从0到1学习Vue框架Day01

1、初体验

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>初体验</title>
   <!-- 安装Vue -->
   <script src="../js/vue.js"></script>

</head>
<body>
   <!-- 挂载点，指定Vue实例的挂载位置 -->
   <div id="app"></div>

   <!--  
      hello world
   -->
   <script>
      /*
         第一步：创建Vue实例
         1、为什么要new Vue()，直接调用Vue()函数不行吗？
            不行，因为直接调用Vue()函数，不创建实例的话，会出现以下错误：
               Vue is a constructor and should be called with the `new` keyword
         2、关于Vue构造函数的参数：options？
            options是一个对象，对象中可以包含以下属性：
            Vue框架要求这个options参数必须是一个纯粹的JS对象：{}
            在{}对象中可以编写大量的key:value
            主要是通过options这个参数来给Vue实例指定多个配置项。
         3、关于template配置项：
            template用来指定模板语句，模板语句是一个字符串形式的。
            什么是模板语句？
               Vue框架自己制定了一些具有特殊含义的特殊符号。
            模板语句可以是一个纯粹的HTML代码，也可以是Vue中的特殊规则。

               */
      const myVue = new Vue({
         template: '<h1>hello world</h1>'
      })
      /*
         第二步：将Vue实例挂载到id='app'的元素位置。
         1、Vue实例都有一个$mount()方法，这个方法的作用是什么？
            将Vue实例挂载到制定位置。
      */
      myVue.$mount('#app')

   </script>
   


</body>
</html>

2、模板语句的数据来源

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>模板语句的数据来源</title>

   <script src="../js/vue.js"></script>

</head>
<body>
   <div id="app"></div>

   <script>
      /*
         模板语句的数据来源：
            1、data选项可以给模板语句提供数据支持
            2、data选项的类型是什么？ Object | Function（对象或函数）
            3、data配置项的专业叫法：Vue实例的数据对象
            4、data数据如何插入到模板语句当中？
               {{}}这是Vue框架自己搞的一套语法，被称为模板语法中的插值语法，{{data的key}}
      */
      new Vue({
         template: `<h1>最新上映的电视剧:{{name}},上映时间:{{releaseTime}}，
            主角是{{lead.name}}，年龄为{{lead.age}}，其他演员有{{actors[0].name}}，今年{{actors[0].age}}
            </h1>`,
         data:{
            name: '狂飙',
            releaseTime: '2023-01-01',
            lead:{
               name:'高启强',
               age:40
            },
            actors:[
               {
                  name:'安鑫',
                  age:35
               },
               {
                  name:'高启兰',
                  age:30
               }

            ]
         }
      }).$mount('#app')

      
   </script>
   
</body>
</html>

3、template配置项详解

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>template配置项详解</title>
   <script src="../js/vue.js"></script>
</head>
<body>

   <div id="app">
      <div>
         <h1>{{msg}}</h1>
         <h1>{{name}}</h1>
      </div>
   </div>

   <script>

      Vue.config.productionTip = false

      new Vue({
         /*
         关于template配置项：
            1、template后面指定的时模板语句，但是模板语句中只能有一个根结点。
            2、只要data中的数据发生变化，模板语句一定会重新编译。
            3、如果使用template配置项的话，指定挂载位置的元素会被替换。
         关于$mount('#app')
            el配置项和#mount()可以达到同样地效果。
         */
        /*
         错误的
         template: '<h1>{{msg}}</h1> <h1>{{name}}</h1>'
        */
         data:{
            msg:'动力节点',
            name:'老杜'
         },
         el: '#app'
      })

   </script>
   
</body>
</html>

4、Vue实例和容器的关系：一夫一妻制

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Vue实例和容器的关系是：一夫一妻制</title>

   <script src="../js/vue.js"></script>
</head>
<body>
   
   <div class="app">
      <h1>{{msg}}</h1>
   </div>
   <div class="app">
      <h1>{{msg}}</h1>
   </div>

   <div id="app2">
      <h1>{{name}}</h1>
   </div>

   <script>
      //  Vue实例和容器只能是一对一
      new Vue({
         el : '.app',
         data : {
            msg : 'hello vue!!'
         }
      })
      // Vue实例和容器只能是一对一
      new Vue({
         el : '#app2',
         data :{
            name : 'bjpowernode'
         }
      })

      new Vue({
         el : '#app2',
         data :{
            name : 'bjpowernode2'
         }
      })
   </script>

</body>
</html>