1-Vue程序初体验

Vue 是一个基于 JavaScrip（t JS）实现的框架。要使用它就需要先拿到 Vue 的 js 文件。从 Vue 官网（https://v2.cn.vuejs.org/）下载 vue.js 文件

1. 下载并安装 vue.js

第一步：打开 Vue2 官网，点击下图所示的“起步”：
第二步：继续点击下图所示的“安装”
第三步：在“安装”页面向下滚动，直到看到下图所示位置
第四步：点击开发版本，并下载，如下图所示
第五步：安装 Vue , 使用 script 标签引入 vue.js 文件。

‍

2. 第一个 Vue 程序

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 安装vue.js -->
    <script src="js/vue.js"></script>
  </head>
  <body>
    <!-- 指定挂在位置 -->
    <div id="app"></div>
    <script>
      // 第一步 ： 创建Vue实例
      const vm = new Vue({
        template: "<h1>Hello Vue</h1>",
      });
      // 第二步 ： 将Vue实例挂在到指定位置
      vm.$mount("#app");
    </script>
  </body>
</html>

‍

第一步：创建 Vue 实例

为什么要 new Vue()，直接调用 Vue()函数不行吗？

不行，因为直接调用 Vue()函数，不创建实例的话，会出现以下错误： Vue is a constructor and should be called with the <span data-type="code">new</span> keyword

关于 Vue 构造函数的参数：options？

option 翻译为选项: options 翻译为多个选项 Vue 框架要求这个 options 参数必须是一个纯粹的 JS 对象：{} 在{}对象中可以编写大量的 key:value 对。一个 key:value 对就是一个配置项。主要是通过 options 这个参数来给 Vue 实例指定多个配置项。

代码语言：javascript复制

new Vue({ template : '
<h1>Hello Vue</h1>
' })

关于 template 配置项：

template 翻译为：模板。 template 配置项用来指定什么？用来指定模板语句，模板语句是一个字符串形式的。

什么是模板语句？

Vue 框架自己制定了一些具有特殊含义的特殊符号。

Vue 的模板语句是 Vue 框架自己搞的一套语法规则。 我们写 Vue 模板语句的时候，不能乱写，要遵守 Vue 框架的模板语法规则。 模板语句可以是一个纯粹的 HTML 代码，也可以是 Vue 中的特殊规则。也可以是 HTML 代码 Vue 的特殊规则。 template 后面的模板语句会被 Vue 框架的编译器进行编译，转换成浏览器能够识别的 HTML 代码。

‍

第二步：将 Vue 实例挂在到**id = 'app'**的元素位置

Vue 实例都有一个$mount() 方法，这个方法的作用是什么？
- 将 Vue 实例挂在到指定位置
#app 显然是 Id 选择器，这个语法借鉴了 CSS

3. Vue 的 data 配置项

data 配置项，它可以帮助我们动态的渲染页面

‍ 模板语句的数据来源：

谁可以给模板语句提供数据支持呢？
- data 选项。
data 选项的类型是什么？
- Object | Function （对象或者函数）
data 配置项的专业叫法：Vue 实例的数据对象.（data 实际上是给整个 Vue 实例提供数据来源的。）
如果 data 是对象的话，对象必须是纯粹的对象 (含有零个或多个的 key/value 对)
data 数据如何插入到模板语句当中？
- {{}} 这是 Vue 框架自己搞的一套语法，别的框架看不懂的，浏览器也是不能够识别的。
- Vue 框架自己是能够看懂的。这种语法在 Vue 框架中被称为：模板语法中的插值语法。（有的人把他叫做胡子语法。）
- 怎么用？ ——> {{data的key}}
-  插值语法的小细节：
  1. {这里不能有其它字符包括空格{
  2. }这里不能有其它字符包括空格}

当 data 发生改变时，template 模板会被重新编译，重新渲染。

代码示例：

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="js/vue.js"></script>
    <title>模板语句的数据来源</title>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const myVue = new Vue({
        template:
          "<h1>{{name}}是由{{author}}编写的一部{{Description}}<br>主角为 : {{character[0].name}} , 年龄：{{character[0].age}}<br>{{lead.name}} , {{lead.age}}</h1>",

        data: {
          name: "《剑来》",
          author: "烽火戏诸侯",
          Description: "网络小说",

          // 数组 ， 要使用索引
          character: [
            {
              name: "陈平安",
              age: 19,
            },
          ],
          lead: {
            name: "宁姚",
            age: 18,
          },
        },
      });
      myVue.$mount("#app");
    </script>
  </body>
</html>

‍

4. Vue 的 template 配置项

关于 template 配置项：

template 后面指定的是模板语句，但是模板语句中只能有一个根节点。
只要 data 中的数据发生变化，模板语句一定会重新编译。（只要 data 变，template 就会重新编译，重新渲染）
如果使用 template 配置项的话，指定挂载位置的元素会被替换。
好消息：目前可以不使用 template 来编写模板语句。这些模板语句可以直接写到 html 标签中。Vue 框架能够找到并编译，然后渲染。
如果直接将模板语句编写到 HTML 标签中，指定的挂载位置就不会被替换了。

关于$mount('#app')？

也可以不使用$mount('#app')的方式进行挂载了。
在 Vue 中有一个配置项：el
- el 配置项和$mount()可以达到同样的效果。
- el 配置项的作用？
  1. 告诉 Vue 实例去接管哪个容器。
  2. el : '#app'，表示让 Vue 实例去接管 id='app'的容器。
  3. el 其实是 element 的缩写。被翻译为元素。

语法展示为：

代码语言：javascript复制

<!DOCTYPE html>

<html lang="en">
   
  <head>
       
    <meta charset="UTF-8" />

       
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

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

       
    <title>template配置项详解</title>

     
  </head>

   
  <body>
       
    <div id="app">
           
      <div>{{msg}}</div>

           
      <div>{{age}}</div>

         
    </div>

       
    <script>
      const myVue = new Vue({
        // template : '<div><div>',

        data: {
          msg: "陈平安",

          age: 19,
        },

        el: "#app", //el : document.getElementById('app')
      }); //}).$mount('#app')
    </script>

     
  </body>
</html>

5. 解决控制台上的提示信息和错误信息

Vue.config 是 Vue 的全局配置对象。
productionTip 属性可以设置是否生成生产提示信息。
默认值：true。如果是 false 则表示阻止生成提示信息。
Vue.config.productionTip = false

彻底解决的方案：

进入源码，找到 productionTip: true
将其改为 false

6. Vue 开发者工具初体验

7. Vue 实例和容器的一夫一妻制

一个 Vue 实例可以接管多个容器吗？

不能。一个 Vue 实例只能接管一个容器。一旦接管到容器之后，即使后面有相同的容器，Vue也是不管的。因为Vue实例已经“娶到媳妇”了。
先来后到的原则

代码示例：

代码语言：javascript复制

<!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 -->

       
    <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>

       
    <!-- vue程序 -->

       
    <script>
      /*

            验证：一个Vue实例可以接管多个容器吗？

                不能。一个Vue实例只能接管一个容器。一旦接管到容器之后，即使后面有相同的容器，Vue也是不管的。因为Vue实例已经“娶到媳妇”了。

        */

      new Vue({
        el: ".app",

        data: {
          msg: "Hello Vue!",
        },
      });

      new Vue({
        el: "#app2",

        data: {
          name: "zhangsan",
        },
      }); // 这个Vue实例想去接管 id='app2'的容器，但是这个容器已经被上面那个Vue接管了。他只能“打光棍”了。

      new Vue({
        el: "#app2",

        data: {
          name: "jackson",
        },
      });
    </script>

     
  </body>
</html>

容器程序框架配置语法

0 人点赞