1、Vue.js介绍

1.1 Vue.js是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发（即插即用）。
官方网站：https://cn.vuejs.org/v2/guide/ 作者：尤雨溪

1.2 为什么使用Vue？

声明式渲染：前后端分离是未来趋势；
渐进式框架：适用于各种业务需求；
简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习；

2、Vue.js基础

2.1 Vue.js的使用

在html页面使用script引入vue.js的库即可使用。

远程CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
本地
<script src="vue.min.js"></script>

Vue-CLI脚手架：使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形。

2.2 入门程序

创建一个vuetest目录，并且在目录下创建 01_vue入门程序.html 文件。
代码编写步骤：
1、定义html，引入vue.js；
2、定义app div，此区域作为vue的接管区域；
3、定义Vue实例，接管app区域；
4、定义model（数据对象）；
5、在app中展示数据。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue入门</title>
    <!-- 1.创建HTML文件， 引入vue.js 有两种方式-->
    <!-- 第一种 引入 vue.js的CDN地址 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> -->
    <!-- 第二种 本地导入 -->
    <script src="vue.min.js"></script>
  </head>
  <body>
    <!-- 2. 定义app div，此区域作为vue的接管区域 -->
    <div id="app">
      <!-- {
    
    {}} 双括号是VUE中的差值表达式,将表达式的值输出到HTML页面 -->
      {
   
   { name }} <br />
      {
   
   { school.name }} {
   
   { school.mobile }}<br />
      <ul>
        <li>{
   
   { names[0] }}</li>
        <li>{
   
   { names[1] }}</li>
        <li>{
   
   { names[2] }}</li>
      </ul>
    </div>
  </body>
  <script>
    //3. 创建vue实例
    var VM = new Vue({
      
      
      //定义 Vue实例挂载的元素节点,表示vue接管该div
      el: "#app",
      //4.定义model模型数据对象
      data: {
      
      
        name: "Hello World！！",
        school: {
      
      
          name: "家里蹲大学",
          mobile: "0100010110"
        },
        names: ["鲁智深", "林冲", "武松"]
      }
    });
  </script>
</html>

{ {}}：插值表达式
1. 插值表达式的作用?
  通常用来获取Vue实例中定义的数据(data)，
  属性节点中不能够使用插值表达式。
el：挂载点
1. el的作用 ?
  定义 Vue实例挂载的元素节点，表示vue接管该区域。
2. Vue的作用范围是什么 ?
  Vue会管理el选项命中的元素，及其内部元素。
3. el选择挂载点时，是否可以使用其他选择器？
  可以，但是建议使用 ID选择器。
4. 是否可以设置其他的DOM元素进行关联？
  可以，但是建议选择DIV，不能使用HTML和Body标签。
data: 数据对象
1. Vue中用到的数据定义在data中；
2. data中可以写复杂类型；
3. 渲染复杂类型数据的时候，遵守js语法。

2.3 声明式渲染的好处

Vue中的声明式渲染，简单理解就是我们声明数据，Vue帮我们将数据渲染到HTML。
jQuery中，如果 DOM 发生变化，js代码也需要做相应的改变，特点是高耦合。
在Vue中，只需要定义好要展示的数据，并把它放在 DOM 合适的位置就可以了。

2.4 Vue常用指令

根据官网的介绍，指令是带有 v- 前缀的特殊属性。通过指令来操作DOM元素。

2.4.1 v-text指令

作用：获取data数据，设置标签的内容。
注意：默认写法会替换全部内容，使用插值表达式{ {}}可以替换指定内容。

  <body>
    <div id="app">
      <!-- 插值表达式，不会覆盖原来的内容体 -->
      <h2>{
   
   { message }}好好学习</h2>

      <!-- v-text 获取data数据，设置标签的内容，会覆盖之前的内容体 -->
      <h2 v-text="message">好好学习</h2>

      <!-- 拼接字符串 -->
      <h2 v-text="message+1"></h2>
      <h2 v-text="message+'abc'"></h2>
    </div>
  </body>
  <script>
    var VM = new Vue({
      
      
      el: "#app",
      data: {
      
      
        message: "Java程序员"
      }
    });
  </script>

2.4.2 v-html指令

作用：设置元素的 innerHTML（可以向元素中写入新的标签）。

  <body>
    <div id="app">
      <!-- 设置元素的innerHTML -->
      <h2 v-html="url"></h2>
    </div>
  </body>
  <script>
    var VM = new Vue({
      
      
      el: "#app",
      data: {
      
      
        url: "<a href='https://www.baidu.com'>百度一下</a>"
      }
    });
  </script>

2.4.3 v-on指令

作用：为元素绑定事件，比如：v-on:click，可以简写为 @click=“方法”。
绑定的方法定义在 VUE实例的method属性中。
语法格式：

<div id="app">
  <!-- 使用v-on 绑定click 点击事件 -->
  <input type="button" value="点击按钮" v-on:click="方法名" />
  <!-- 使用 @符号也可以绑定-->
  <input type="button" value="点击按钮" @click="方法名" />
</div>
<script>
  var VM = new Vue({
      
      
    el: "#app", //通过methods ,专门存放Vue中的方法
    methods: {
      
      
      方法名: function() {
      
      
        alert("123!");
      }
    }
  });
</script>

2.4.4 计数器案例

1）编码步骤

data中定义数据：比如 num 值为1；
methods中添加两个方法：比如add(递增)，sub(递减)；
使用{ {}} 将num设置给 span 标签；
使用v-on 将add，sub 分别绑定给 +，- 按钮；
累加到 10 停止；
递减到 0 停止；

2）案例演示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="css/inputNum.css" />
  </head>
  <body>
    <div id="app">
      <!-- 计算功能区域 -->
      <div>
        <input type="button" class="btn btn_plus" v-on:click="add" />
        <span>{
   
   { num }}</span>
        <input type="button" class="btn btn_minus" @click="sub" />
      </div>
    </div>
  </body>
  <script src="js/vue.min.js"></script>
  <script>
    var VM = new Vue({
      
      
      el: "#app",
      data: {
      
      
        num: 1
      },
      methods: {
      
      
        add: function() {
      
      
          if (this.num < 10) {
      
      
            this.num++;
          } else {
      
      
            alert("别点了！最大了！");
          }
        },
        sub: function() {
      
      
          if (this.num > 0) {
      
      
            this.num--;
          } else {
      
      
            alert("别点了！最小了！");
          }
        }
      }
    });
  </script>
</html>

3）案例总结

创建Vue实例时：el(挂载点)，data(数据)，methods(方法)；
v-on 指令作用是绑定事件，可以简写为 @事件名；
方法中，使用this关键字获得data中的数据；
v-text 和 { { }} 都可以获取data中的数据，设置到元素中；

2.4.5 v-show指令

作用：v-show指令，根据真假值，切换元素的显示状态。
代码示例：

  <body>
    <div id="app">
      <input type="button" value="切换状态" @click="changeShow" /><br />
      <img v-show="isShow" src="img/car.gif" />
      <img v-show="age > 18" src="img/car.gif" />
    </div>
  </body>
  <script src="js/vue.min.js"></script>
  <script>
    var VM = new Vue({
      
      
      el: "#app",
      data: {
      
      
        isShow: true,
        age: 18
      },
      methods: {
      
      
        changeShow: function() {
      
      
          this.isShow = !this.isShow;
        }
      }
    });
  </script>

v-show指令总结：
- 原理是修改元素的display，实现显示或者隐藏。
- 指令后面的内容，最终会解析为布尔值。
- 值为true 显示，为false 则隐藏。
- 数据改变之后，显示的状态会同步更新。

2.4.6 v-if指令

作用：根据表达式的真假，切换元素的显示和隐藏( 操纵dom 元素 )。
代码示例：

  <body>
    <div id="app">
      <input type="button" value="切换状态" @click="changeShow" />
      <img v-if="isShow" src="img/car.gif" />
    </div>
  </body>
  <script src="js/vue.min.js"></script>
  <script>
    var VM = new Vue({
      
      
      el: "#app",
      data: {
      
      
        isShow: false
      },
      methods: {
      
      
        changeShow: function() {
      
      
          this.isShow = !this.isShow;
        }
      }
    });
  </script>

v-if指令总结：
- v-if 指令的作用：根据表达式的真假切换元素的显示状态。
- 本质是通过操作dom元素来切换显示状态。
- 表达式为true 元素存在于dom树中，为false从dom树中移除。
- 频繁切换使用 v-show，反之使用v-if。

2.4.7 v-bind指令

作用：设置元素的属性（比如：src，title，class）。
语法格式

v-bind:属性名 = 表达式

代码示例

  <body>
    <div id="app">
      <img src="img/car.jpg" />

      <!-- 使用 v-bind 设置src属性 -->
      <img v-bind:src="imgSrc" />

      <!-- v-bind 可以简写为 : -->
      <img :src="imgSrc" :title="imgTitle" />

      <!-- 设置class -->
      <div :style="{ fontSize: size+'px' }">v-bind指令</div>
    </div>
  </body>
  <script src="js/vue.min.js"></script>
  <script>
    var VM = new Vue({
      
      
      el: "#app",
      data: {
      
      
        imgSrc: "img/car.jpg",
        imgTitle: "小汽车",
        size: 50
      }
    });
  </script>

v-bind指令总结：
- v-bind 指令的作用是：为元素绑定属性。
- 完整写法 v-bind:属性名，可以简写为 :属性名。

2.4.8 v-for指令

作用：根据数据生成列表结构。
代码示例：

  <body>
    <div id="app">
      <input type="button" value="添加数据" @click="add" />
      <input type="button" value="移除数据" @click="remove" />

      <ul>
        <!-- 在li标签中 获取数组的元素 -->
        <li v-for="(item, index) in arr">{
   
   { index + 1 }}城市：{
   
   { item }}</li>
      </ul>

      <!-- 使用h2标签显示 -->
      <h2 v-for="(p) in persons">
        {
   
   { p.name }}
      </h2>
    </div>
  </body>
  <script src="js/vue.min.js"></script>
  <script>
    var VM = new Vue({
      
      
      el: "#app",
      data: {
      
      
        // 数组
        arr: ["北京", "上海", "广州", "深圳"],
        // 对象数组
        persons: [{
      
       name: "张飞" }, {
      
       name: "关羽" }, {
      
       name: "刘备" }]
      },
      methods: {
      
      
        add: function() {
      
      
          // 向数组添加元素 push
          this.persons.push({
      
       name: "曹操" });
        },
        remove: function() {
      
      
          // 移除元素
          this.persons.shift();
        }
      }
    });
  </script>

v-for指令总结：
- v-for 指令的作用：根据数据生成列表结构。
- 数组经常和 v-for结合使用，数组有两个常用方法：
  - push() 向数组末尾添加一个或多个元素。
  - shift() 把数组中的第一个元素删除。
- 语法是：(item, index) in 数据。
- item 和 index 可以结合其他指令一起使用。
- 数组的长度变化会同步更新到页面上，是响应式的。

2.4.9 v-on指令补充

传递自定义参数：函数调用传参。
事件修饰符：对事件触发的方式进行限制。
代码示例：

  <body>
    <div id="app">
      <!-- 函数传参 -->
      <input
        type="button"
        value="一键三连"
        @click="showTime(666,'下次一定！')"
      />

      <!-- 事件修饰符 -->
      <input type="text" @keyup.enter="hi" />
    </div>
  </body>
  <script src="js/vue.min.js"></script>
  <script>
    var VM = new Vue({
      
      
      el: "#app",
      data: {
      
      },
      methods: {
      
      
        showTime: function(p1, p2) {
      
      
          console.log(p1);
          console.log(p2);
        },
        hi: function() {
      
      
          alert("你好吗？");
        }
      }
    });
  </script>

总结：
- 事件绑定方法，可以传入自定义参数。
- 定义方法时，需要定义形参来接收实际的参数。
- 事件的后面跟上 .修饰符可以对事件进行限制。
- .enter 可以限制触发的方式为回车键。
- 事件修饰符有许多，使用时可以查询文档。

2.4.10 MVVM模式

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。
MVVM模式将页面，分层了 M 、V、和VM，解释为：
- Model：负责数据存储。
- View：负责页面展示。
- View Model：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示。

<body>
  <div id="app">
    <!-- View 视图部分 -->
    <h2>{
   
   { name }}</h2>
  </div>
</body>
<script src="./js/vue.min.js"></script>
<script>
  //创建的vue实例，就是 VM ViewModel
  var VM = new Vue({
      
      
    el: "#app",
    //data就是MVVM模式中的 Model
    data: {
      
      
      name: "hello"
    }
  });
</script>

在这里插入图片描述

首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
- 从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
- 从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。
MVVM的思想，主要是为了让我们的开发更加的方便，因为MVVM提供了数据的双向绑定。

2.4.11 v-model指令

作用：获取和设置表单元素的值（实现双向数据绑定）。
双向数据绑定
- 单向绑定：就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。
- 双向绑定：用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。
什么情况下用户可以更新View呢？
- 填写表单就是一个最直接的例子。当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定。
代码示例：

  <body>
    <div id="app">
      <input type="button" value="修改message" @click="update" />

      <!-- View 视图 -->
      <!-- <input type="text" v-bind:value="message" /> -->

      <!-- v-model实现双向数据绑定 -->
      <input type="text" v-model="message" />
      <input type="text" v-model="password" />
      <h2>{
   
   { message }}</h2>
    </div>
  </body>
  <script src="js/vue.min.js"></script>
  <script>
    // VM 业务逻辑控制
    var VM = new Vue({
      
      
      el: "#app",
      // Model 数据存储
      data: {
      
      
        message: "Hello World！",
        password: 123
      },
      methods: {
      
      
        update: function() {
      
      
          this.message = "你好";
        }
      }
    });
  </script>

v-model指令总结：
- v-model 指令的作用是便捷的设置和获取表单元素的值；
- 绑定的数据会和表单元素值相关联；
- 双向数据绑定。

2.5 实现简单记事本

1. 新增内容

步骤：

生成列表结构(v-for 数组)；
获取用户输入(v-model 双向绑定)；
回车，新增数据(v-on .enter事件修饰符)；
页面布局不熟悉，可以通过审查元素的方式快速找到元素。

2. 删除内容

步骤：

点击删除指定的内容( 根据索引删除元素)；
在methods中添加一个删除的方法，使用splice函数进行删除。

3. 统计操作

步骤：

统计页面信息的个数，就是列表中的元素的个数；
获取 list数组的长度，就是信息的个数；
基于数据的开发方式；
v-text设置的是文本，可以使用简化方式 { { }}。

4. 清空数据

步骤：

点击清除所有信息；
本质就是清空数组。

5. 代码示例

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>小黑记事本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="googlebot" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" href="../css/index.css" />
  </head>

  <body>
    <!-- VUE示例接管区域 -->
    <section id="app">
      <!-- 输入框 -->
      <header class="header">
        <h1>VUE记事本</h1>
        <input
          autofocus="autofocus"
          autocomplete="off"
          placeholder="输入日程"
          class="new-todo"
          v-model="inputValue"
          @keyup.enter="add"
        />
      </header>

      <!-- 列表区域 -->
      <section class="main">
        <ul class="listview">
          <!-- 1.使用v-for指令，生成列表结构 -->
          <li class="todo" v-for="(item,index) in list">
            <div class="view">
              <span class="index">{
   
   { index + 1 }}.</span>
              <label>{
   
   { item }}</label>
              <!-- 2.删除操作 传递index -->
              <button class="destroy" @click="remove(index)"></button>
            </div>
          </li>
        </ul>
      </section>
      <!-- 统计和清空 -->
      <footer class="footer">
        <span class="todo-count">
          <strong>{
   
   { list.length }}</strong> items left
        </span>
        <button class="clear-completed" @click="clear">
          Clear
        </button>
      </footer>
    </section>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var VM = new Vue({
      
      
        el: "#app",
        data: {
      
      
          list: ["写代码", "吃饭", "睡觉"],
          inputValue: "反对内卷"
        },
        methods: {
      
      
          // 新增日程方法
          add: function() {
      
      
            // 将用户输入的内容添加到list中
            this.list.push(this.inputValue);
          },
          // 删除方法
          remove: function(index) {
      
      
            console.log(index);
            // 使用 splice(元素的索引,删除几个)
            this.list.splice(index, 1);
          },
          // 清空操作
          clear: function() {
      
      
            this.list = [];
          }
        }
      });
    </script>
  </body>
</html>

单体架构项目前端开发（1）：Vue基础知识（1）

文章目录