前端必备 Vue_飞道的博客

前端必备 Vue

2021-04-17 10:32 357人阅读评论(0)

前端三要素

HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容
CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式
JavaScript（行为）：是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行，
用于控制网页的行为

JavaScript 框架

jQuery库

大家最熟知的 JavaScript 库，优点是简化了 DOM 操作，缺点是 DOM 操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容 IE6、7、8；

Angular

Google 收购的前端框架，由一群 Java 程序员开发，其特点是将后台的 MVC 模式搬到了前端并增加了模块化开发的理念，与微软合作，采用 TypeScript 语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如：1代 -> 2代，除了名字，基本就是两个东西；已推出了
Angular6）

React

Facebook 出品，一款高性能的 JS 前端框架；特点是提出了新概念【虚拟 DOM】用于减少真实 DOM操作，在内存中模拟 DOM 操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言；

Vue

一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular（模块化）和 React（虚拟 DOM）的优点；

Axios

前端通信框架；因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用 jQuery 提供的 AJAX 通信功能；

JavaScript 构建工具

Babel：JS 编译工具，主要用于浏览器不支持的 ES 新特性，比如用于编译 TypeScript
WebPack：模块打包器，主要作用是打包、压缩、合并及按序加载

前端所需的后端技术

前端人员为了方便开发也需要掌握一定的后端技术，但我们 Java 后台人员知道后台知识体系极其庞大复杂，所以为了方便前端人员开发后台应用，就出现了 NodeJS 这样的技术。

NodeJS 框架及项目管理工具如下：

Express：NodeJS 框架
Koa：Express 简化版
NPM：项目综合管理工具，类似于 Maven
YARN：NPM 的替代方案，类似于 Maven 和 Gradle 的关系

常用UI框架

Ant-Design：阿里巴巴出品，基于 React 的 UI 框架
ElementUI、iview、ice：饿了么出品，基于 Vue 的 UI 框架
Bootstrap：Twitter 推出的一个用于前端开发的开源工具包
AmazeUI：又叫“妹子 UI”，一款 HTML5 跨屏前端框架
Layui：轻量级框架

前后端分享的演变史

后端为主的MVC时代

为了降低开发的复杂度，以后端为出发点，比如：Struts、SpringMVC 等框架的使用，就是后端的 MVC时代;
以 SpringMVC 流程为例：

优点：

MVC 是一个非常好的协作模式，能够有效降低代码的耦合度，从架构上能够让开发者明白代码应该写在
哪里。为了让 View 更纯粹，还可以使用 Thymeleaf、Freemarker 等模板引擎，使模板里无法写入 Java
代码，让前后端分工更加清晰。

缺点：

前端开发重度依赖开发环境，开发效率低，这种架构下，前后端协作有两种模式：

第一种是前端写 DEMO，写好后，让后端去套模板。好处是 DEMO 可以本地开发，很高效。不足是还需要后端套模板，有可能套错，套完后还需要前端确定，来回沟通调整的成本比较大；

第二种是前端负责浏览器端的所有开发和服务器端的 View 层模板开发。好处是 UI 相关的代码都是前端去写就好，后端不用太关注，不足就是前端开发重度绑定后端环境，环境成为影响前端开发效率的重要因素。

基于 AJAX 带来的SPA时代

时间回到 2005 年 AJAX （Asynchronous JavaScript And XML，异步 JavaScript 和 XML，老技术新用法）被正式提出并开始使用 CDN 作为静态资源存储，于是出现了 JavaScript 王者归来（在这之前JS 都是用来在网页上贴狗皮膏药广告的）的SPA（Single Page Application）单页面应用时代。

优点：

这种模式下，前后端的分工非常清晰，前后端的关键协作点是 AJAX 接口。看起来是如此美妙，但回过头来看看的话，这与 JSP 时代区别不大。复杂度从服务端的 JSP 里移到了浏览器的 JavaScript，浏览器端变得很复杂。类似 Spring MVC，这个时代开始出现浏览器端的分层架构：

缺点：

前后端接口的约定：如果后端的接口一塌糊涂，如果后端的业务模型不够稳定，那么前端开发会很痛苦；不少团队也有类似尝试，通过接口规则、接口平台等方式来做。有了和后端一起沉淀的接口规则，还可以用来模拟数据，使得前后端可以在约定接口后实现高效并行开发。
前端开发的复杂度控制： SPA 应用大多以功能交互型为主，JavaScript 代码过十万行很正常。大量JS 代码的组织，与 View 层的绑定等，都不是容易的事情。

前端为主的 MV* 时代

此处的MV*模式如下：

MVC（同步通信为主）：Model、View、Controller
MVP（异步通信为主）：Model、View、Presenter
MVVM（异步通信为主）：Model、View、ViewModel

为了降低前端开发复杂度，涌现了大量的前端框架，比如： AngularJS 、 React 、Vue.js 、 EmberJS 等，这些框架总的原则是先按类型分层，比如 Templates、Controllers、Models，然后再在层内做切分，如下图：

优点：

前后端职责很清晰：前端工作在浏览器端，后端工作在服务端。清晰的分工，可以让开发并行，测试数据的模拟不难，前端可以本地开发。后端则可以专注于业务逻辑的处理，输出 RESTful等接口。
前端开发的复杂度可控：前端代码很重，但合理的分层，让前端代码能各司其职。这一块蛮有意思的，简单如模板特性的选择，就有很多很多讲究。并非越强大越好，限制什么，留下哪些自由，代码应该如何组织，所有这一切设计，得花一本书的厚度去说明。
部署相对独立：可以快速改进产品体验

缺点：

代码不能复用。比如后端依旧需要对数据做各种校验，校验逻辑无法复用浏览器端的代码。如果可以复用，那么后端的数据校验可以相对简单化。
全异步，对 SEO 不利。往往还需要服务端做同步渲染的降级方案。
性能并非最佳，特别是移动互联网环境下
SPA 不能满足所有需求，依旧存在大量多页面应用。URL Design 需要后端配合，前端无法完全掌控。

NodeJS 带来的全栈时代

前端为主的 MV* 模式解决了很多很多问题，但如上所述，依旧存在不少不足之处。随着 NodeJS 的兴起，JavaScript 开始有能力运行在服务端。这意味着可以有一种新的研发模式：

在这种研发模式下，前后端的职责很清晰。对前端来说，两个 UI 层各司其职：

Front-end UI layer 处理浏览器层的展现逻辑。通过 CSS 渲染样式，通过 JavaScript 添加交互功能，HTML 的生成也可以放在这层，具体看应用场景。
Back-end UI layer 处理路由、模板、数据获取、Cookie 等。通过路由，前端终于可以自主把控URL Design，这样无论是单页面应用还是多页面应用，前端都可以自由调控。后端也终于可以摆脱对展现的强关注，转而可以专心于业务逻辑层的开发。

总结

综上所述，模式也好，技术也罢，没有好坏优劣之分，只有适合不适合；前后分离的开发思想主要是基于 SoC （关注度分离原则），上面种种模式，都是让前后端的职责更清晰，分工更合理高效。

MVVM 模式

什么是 MVVM模式

MVVM 源自于经典的 MVC（Model-View-Controller）模式。MVVM 的核心是 ViewModel 层，负责转
换 Model 中的数据对象来让数据变得更容易管理和使用，其作用如下：

该层向上与视图层进行双向绑定
向下与 Model 层通过接口请求进行数据交互

MVVM 已经相当成熟了，当下流行的 MVVM 框架有 Vue.js ， AngularJS 等。

为什么要使用 MVVM

MVVM 模式和 MVC 模式一样，主要目的是分离视图（View）和模型（Model），有几大好处：

低耦合：视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
可复用：你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
可测试：界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。

MVVM 组成部分

View：

View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建，为了更方便地展现ViewModel 或者 Model层的数据，已经产生了各种各样的前后端模板语言，比如 FreeMarker、Thymeleaf 等等各大 MVVM 框架如 Vue.js，AngularJS，EJS 等也都有自己用来构建用户界面的内置模板语言。

Model：

Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则

ViewModel：

ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。

View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

第一个Vue程序

简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目整合。

MVVM 模式的实现者

Model：模型层，在这里表示 JavaScript 对象
View：视图层，在这里表示 DOM（HTML 操作的元素）
ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者

在 MVVM 架构中，是不允许数据和视图直接通信的，只能通过 ViewModel 来通信，而 ViewModel就是定义了一个 Observer 观察者。

ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel 能够监听到视图的变化，并能够通知数据发生改变

至此，我们就明白了，Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听与数据绑定

为什么要使用 Vue.js

轻量级，体积小是一个重要指标。Vue.js 压缩后有只有 20多kb （Angular 压缩后 56kb+，React压缩后 44kb+）
移动优先。更适合移动端，比如移动端的 Touch 事件
易上手，学习曲线平稳，文档齐全
吸取了 Angular（模块化）和 React（虚拟 DOM）的长处，并拥有自己独特的功能，如：计算属性
开源，社区活跃度高
…

第一个Vue程序准备

开发版本

包含完整的警告和调试模式：https://vuejs.org/js/vue.js
删除了警告，30.96KB min + gzip：https://vuejs.org/js/vue.min.js

CDN

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

1、创建一个 HTML 文件 01-hello.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Index</title>
</head>
<body>
</body>
</html>

2、引入 Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

3、创建一个 Vue 的实例

<script type="text/javascript">
  var vm = new Vue({
    
    el: '#vue',
    data: {
    
      message: 'Hello Vue!'
   }
 });
</script>

说明：

el:’#vue’ ：绑定元素的 ID
data:{message:‘Hello Vue!’} ：数据对象中有一个名为 message 的属性，并设置了初始值Hello Vue!

4、将数据绑定到页面元素（视图层）

<div id="vue">
 {
  {message}}
</div>

说明：只需要在绑定的元素中使用双花括号将 Vue 创建的名为 message 属性包裹起来，即可实现数据绑定功能，也就实现了 ViewModel 层所需的效果。

Vue 基础语法

1、v-bind

<body>
  <div id="app">
    <!--
      如果要将模型数据绑定在html属性中
      则使用 v-bind 指令,此时title中显示的是模型数据
    -->
    <h1 v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</h1>
    <!-- v-bind 指令的简写形式： 冒号（:） -->
    <h1 :title="message">我是标题</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
  <script>
    new Vue({
    
      el: '#app',
      data: {
    
        message: '页面加载于 ' + new Date().toLocaleString()
     }
   })
  </script>
</body>

2、v-if 系列

<body>
  <div id="app">
    <!--
      === 三个等号在 JS 中表示绝对等于（就是数据与类型都要相等）
    -->
    <h1 v-if="type === 'A'">A</h1>
    <h1 v-else-if="type === 'B'">B</h1>
    <h1 v-else-if="type === 'C'">C</h1>
    <h1 v-else>who</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
  <script>
    var vm = new Vue({
    
      el: '#app',
      data: {
    
        type: 'A'
     }
   })
  </script>
</body>

3、v-for

<body>
  <div id="app">
    <li v-for="item in items">
     {
  { item.message }}
    </li>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
  <script>
    var vm = new Vue({
    
      el: '#app',
      data: {
    
        //items数组
        items: [
         {
    message: '狂神说Java'},
         {
    message: '狂神说前端'}
       ]
     }
   });
  </script>
</body>

注：items 是数组，item是数组元素迭代的别名。和Thymeleaf模板引擎的语法和这个十分的相似！

4、v-on

事件有Vue的事件、和前端页面本身的一些事件！我们这 click 是vue的事件，可以绑定到Vue中的methods 中的方法事件！

<body>
  <div id="app">
    <!--
      在这里我们使用了 v-on 绑定了 click 事件
      并指定了名为 sayHi 的方法
    -->
    <button v-on:click="sayHi">点我</button>
    <!-- v-on 指令的简写形式 @ -->
    <button @click="sayHi">点我</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
  <script>
    var vm = new Vue({
    
      el: '#app',
      data: {
    
        message: 'Hello World'
     },
      // 方法必须定义在 Vue 实例的 methods 对象中
      methods: {
    
        sayHi: function (event) {
    
          // `this` 在方法里指向当前 Vue 实例
          alert(this.message);
       }
     }
   });
  </script>
</body>

5、v-model

Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。

可以用 v-model 指令在表单 < input>、< textarea> 及 < select> 元元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

<body>
  <div id="app">
    <!-- v-bind:value只能进行单向的数据渲染 -->
    <input type="text" v-bind:value="searchMap.keyWord">
    <!-- v-model 可以进行双向的数据绑定 -->
    <input type="text" v-model="searchMap.keyWord">
    <p>您要查询的是：{
  {searchMap.keyWord}}</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
  <script>
    new Vue({
    
      el: '#app',
      data: {
    
        searchMap:{
    
          keyWord: 'kuangshen'
       }
     }
   })
  </script>
</body>

<body>
  <div id="app">
   单复选框：
    <input type="checkbox" id="checkbox" v-model="checked">
    &nbsp;&nbsp;
    <label for="checkbox">{
  { checked }}</label>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
  <script>
    new Vue({
    
      el: '#app',
      data: {
    
        checked: false
     }
   })
  </script>
</body>

<body>
  <div id="app">
   多复选框：
    <input type="checkbox" id="jack" value="Jack" v-
model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-
model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-
model="checkedNames">
    <label for="mike">Mike</label>
    <span>选中的值: {
  { checkedNames }}</span>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
  <script>
    new Vue({
    
      el: '#app',
      data: {
    
        checkedNames: []
     }
   })
  </script>
</body>

<body>
  <div id="app">
   单选按钮：
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <span>选中的值: {
  { picked }}</span>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
  <script>
    new Vue({
    
      el: '#app',
      data: {
    
        picked: ''
     }
   })
  </script>
</body>

<body>
  <div id="app">
   下拉框：
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <span>选中的值: {
  { selected }}</span>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
  <script>
    var vm = new Vue({
    
      el: '#app',
      data: {
    
        selected: ''
     }
   });
  </script>
</body>

Vue 组件

使用 Vue.component() 方法注册组件：

<body>
  <div id="app">
    <ul>
      <!-- 有点类似自定义标签 -->
      <my-component-li></my-component-li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
  <script>
    // 先注册组件
    Vue.component('my-component-li', {
    
      template: '<li>Hello li</li>'
   });
    // 再实例化 Vue
    var vm = new Vue({
    
      el: '#app'
   });
  </script>
</body>

使用 props 属性传递参数

<body>
  <div id="app">
    <ul>
      <my-component-li v-for="item in items" v-bind:item="item">
      </my-component-li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
  <script>
    // 先注册组件
    Vue.component('my-component-li', {
    
      props: ['item'],
      template: '<li>Hello {
    {item}}</li>'
   });
    // 再实例化 Vue
    var vm = new Vue({
    
      el: '#app',
      data: {
    
        items: ["张三", "李四", "王五"]
     }
   });
  </script>
</body>

说明：

v-for=“item in items” ：遍历 Vue 实例中定义的名为 items 的数组，并创建同等数量的组件；
v-bind:item=“item” ：将遍历的 item 项绑定到组件中 props 定义的名为 item 属性上；
= 号左边的 item 为 props 定义的属性名，右边的为 item in items 中遍历的 item 项的值；

计算属性

计算属性的重点突出在属性两个字上（属性是名词），首先它是个属性其次这个属性有计算的能力（计算是动词），这里的计算就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；可以想象为缓存！

<body>
  <div id="app">
    <!--注意，一个是方法，一个是属性-->
    <p>调用当前时间的方法：{
  {currentTime1()}}</p>
    <p>当前时间的计算属性：{
  {currentTime2}}</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
  <script>
    var vue = new Vue({
    
      el: '#app',
      data: {
    
        message: 'Hello Vue'
     },
      methods: {
    
        currentTime1: function () {
    
          return Date.now();
       }
     },
      computed: {
    
        //currentTime2 ，这是一个属性！不是方法
        currentTime2: function () {
    
          this.message;
          return Date.now();
       }
     }
   })
  </script>
</body>

注意：methods 和 computed 里的东西不能重名
说明：

methods：定义方法，调用方法使用 currentTime1()，需要带括号；
computed：定义计算属性，调用属性使用 currentTime2，不需要带括号；this.message 是为了能够让 currentTime2 观察到数据变化而变化；
如果在方法中的值发生了变化，则缓存就会刷新！可以在控制台使用vm.message=“qinjiang” 改变下数据的值，再次测试观察效果！

结论：
调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销;

插槽

在 Vue 中我们使用元素，作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中;

第一步: 定义一个待办事项的组件

<todo></todo>
<script type="text/javascript">
// 定义一个待办事项的组件
Vue.component('todo', {
    
template: '<div>\
      <div>待办事项</div>\
<ul>\
<li>学习狂神说Java</li>\
  </ul>\
      </div>'
});
</script>

第二步: 我们需要让待办事项的标题和值实现动态绑定,怎么做呢? 我们可以留出一个插槽!

1、将上面的代码留出一个插槽,即 slot
Vue.component('todo', {
  template: '<div>\
          <slot name="todo-title"></slot>\
          <ul>\
            <slot name="todo-items"></slot>\
          </ul>\
       </div>'
});
2、定义一个名为 todo-title 的待办标题组件 和 todo-items 的待办内容组件
Vue.component('todo-title', {
  props: ['title'],
  template: '<div>{
  {title}}</div>'
});
//这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
Vue.component('todo-items', {
  props: ['item', 'index'],
  template: '<li>{
  {index + 1}}. {
  {item}}</li>'
});
3、实例化 Vue 并初始化数据
new Vue({
  el: '#app',
  data: {
    todoItems: ['狂神说Java', '狂神说运维', '狂神说前端']
 }
})
4、将这些值,通过插槽插入
<div id="app">
  <todo>
    <todo-title slot="todo-title" title="秦老师系列课程"></todo-title>
    <todo-items slot="todo-items" v-for="(item, index) in todoItems"
          v-bind:item="item" v-bind:index="index"></todo-items>
  </todo>
</div>

说明：我们的 todo-title 和 todo-items 组件分别被分发到了 todo 组件的 todo-title 和 todo-items 插槽中

自定义事件

通过以上代码不难发现，数据项在 Vue 的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue 实例中的数据呢？此时就涉及到参数传递与事件分发了，Vue 为我们提供了自定义事件的功能很好的帮助我们解决了这个问题；使用 this.$emit(‘自定义事件名’, 参数)，操作过程如下:

1、在vue的实例中,增加了 methods 对象并定义了一个名为 removeTodoItems 的方法
new Vue({
  el: '#app',
  data: {
  todoItems: ['狂神说Java', '狂神说运维', '狂神说前端']
 },
  methods: {
    // 该方法可以被模板中自定义事件触发
    removeTodoItems: function (index) {
      console.log("删除 " + this.todoItems[index] + " 成功");
      // splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目
      // 其中 index 为添加/删除项目的位置，1 表示删除的数量
      this.todoItems.splice(index, 1);
   }
 }
})
2、修改 todo-items 待办内容组件的代码,增加一个删除按钮,并且绑定事件!
Vue.component('todo-items', {
  props: ['item', 'index'],
  template: '<li>{
  {index + 1}}. {
  {item}} <button
@click="remove_component">删除</button></li>',
  methods: {
    remove_component: function (index) {
      // 这里的 remove 是自定义事件的名称，需要在 HTML 中使用 v-on:remove 的
方式指派
      this.$emit('remove', index);
   }
 }
});
3、修改 todo-items 待办内容组件的 HTML 代码,增加一个自定义事件,比如叫 remove,可以和组件的方
法绑定,然后绑定到vue的方法中!
<!--增加了 v-on:remove="removeTodoItems(index)" 自定义事件，该事件会调用 Vue 实例中
定义的名为 removeTodoItems 的方法-->
<todo-items slot="todo-items" v-for="(item, index) in todoItems"
      v-bind:item="item" v-bind:index="index"
      v-on:remove="removeTodoItems(index)"></todo-items>

逻辑理解：

Axios

什么是Axios

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信，其功能特点如下：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API [ JS中链式编程 ]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF（跨站请求伪造）

GitHub：https://github.com/axios/axios

中文文档：http://www.axios-js.com/

为什么要使用 Axios

由于 Vue.js 是一个视图层框架并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以Vue.js 并不包含 AJAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource 的插件，不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架。少用jQuery，因为它操作Dom太频繁！

使用案例

1、咱们开发的接口大部分都是采用 JSON 格式，可以先在项目里模拟一段 JSON 数据，数据内容如下：
创建一个名为 data.json 的文件并填入上面的内容，放在项目的根目录下。
{
 "name": "狂神说Java",
 "url": "https://blog.kuangstudy.com",
 "page": 1,
 "address": {
  "street": "洪崖洞",
  "city": "重庆市",
  "country": "中国"
}
}
2、测试代码
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>狂神说Java</title>
  <!--v-cloak 解决闪烁问题-->
  <style>
   [v-cloak] {
    
      display: none;
   }
  </style>
</head>
<body>
<div id="vue" v-cloak>
  <div>名称：{
  {info.name}}</div>
  <div>地址：{
  {info.address.country}}-{
  {info.address.city}}-
{
  {info.address.street}}</div>
  <div>链接：<a v-bind:href="info.url" target="_blank">{
  {info.url}}</a>
</div>
</div>
<!--引入 JS 文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    
    el: '#vue',
    data() {
    
      return {
    
        info: {
    
          name: null,
          address: {
    
            country: null,
            city: null,
            street: null
         },
          url: null
       }
       }
   },
    mounted() {
     //钩子函数
      axios
       .get('data.json')
       .then(response => (this.info = response.data));
   }
 });
</script>
</body>
</html>

说明：

在这里使用了 v-bind 将 a:href 的属性值与 Vue 实例中的数据进行绑定
使用 axios 框架的 get 方法请求 AJAX 并自动将数据封装进了 Vue 实例的数据对象中
我们在data中的数据结构必须要和 Ajax 响应回来的数据格式匹配！

Vue 生命周期

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。

在 Vue 的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册 JS 方法，可以让我们用自己注册的 JS 方法控制整个大局，在这些事件响应方法中的 this 直接指向的是 Vue 的实例。

Vue-Cli

vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板 ;

预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架,我们的开发更加的快速;

主要功能：

统一的目录结构
本地调试
热部署
单元测试
集成打包上线

需要的环境

安装 vue-cli

cnpm install vue-cli -g
# 测试是否安装成功
# 查看可以基于哪些模板创建 vue 应用程序，通常我们选择 webpack
vue list

第一个 Vue-cli 应用程序

1、我们新建一个文件夹 vue-cli；

2、创建一个基于 webpack 模板的 vue 应用程序

# 这里的 myvue 是项目名称，可以根据自己的需求起名
vue init webpack myvue
# 一路都选择no即可;

说明：

Project name：项目名称，默认回车即可
Project description：项目描述，默认回车即可
Author：项目作者，默认回车即可
Install vue-router：是否安装 vue-router，选择 n 不安装（后期需要再手动添加）
Use ESLint to lint your code：是否使用 ESLint 做代码检查，选择 n 不安装（后期需要再手动添加）
Set up unit tests：单元测试相关，选择 n 不安装（后期需要再手动添加）
Setup e2e tests with Nightwatch：单元测试相关，选择 n 不安装（后期需要再手动添加）
Should we run npm install for you after the project has been created：创建完成后直接初始
化，选择 n，我们手动执行;运行结果!

3、初始化并运行

cd myvue
npm install
npm run dev

执行完成后，目录多了很多依赖

Vue 项目结构

build 和 config：WebPack 配置文件
node_modules：用于存放 npm install 安装的依赖文件
src：项目源码目录
static：静态资源文件
.babelrc：Babel 配置文件，主要作用是将 ES6 转换为 ES5
.editorconfig：编辑器配置
eslintignore：需要忽略的语法检查配置文件
.gitignore：git 忽略的配置文件
.postcssrc.js：css 相关配置文件，其中内部的 module.exports 是 NodeJS 模块化语法
index.html：首页，仅作为模板页，实际开发时不使用
package.json：项目的配置文件
name：项目名称
version：项目版本
description：项目描述
author：项目作者
scripts：封装常用命令
dependencies：生产环境依赖
devDependencies：开发环境依赖

Vue Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

功能

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

安装

vue-router 是一个插件包，所以我们还是需要用 npm/cnpm 来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save-dev

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'
// 显示的使用
Vue.use(VueRouter);

vue-element-admin

vue-element-admin是基于vue 和 element-ui 的一套后台管理系统集成方案。

vue-admin-template

vue-admin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。

GitHub地址：https://github.com/PanJiaChen/vue-admin-template

建议：可以在 vue-admin-template 的基础上进行二次开发，把 vue-element-admin 当做工具箱，想要什么功能或者组件就去 vue-element-admin 那里复制过来。

安装

# 解压压缩包 # 安装python2环境
# 进入目录
cd vue-admin-template-master
# 安装依赖
npm install --registry=https://registry.npm.taobao.org
#错误Cannot find module 'node-sass'
cnpm install node-sass@latest
npm run dev

转载：https://blog.csdn.net/weixin_45236880/article/details/115711064

查看评论

飞道的博客

飞道的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章