软件框架——vue

一、vue 框架

• 前端的框架，渐进式的框架，具有从底到上的层次。前端有三个组主要的框架，react，anglejs，vue。

二、vue 框架的内容

• 内容比较多，它的设计模式采用的是 MVVM，M 就是模型，V 就是 视图，VM 就是模型视图，其中 VM 紧密结合在一起称为双向绑定。双向绑定指数据发生变化视图随之发生变化，当视图的内容发生变化对应的数据也会随之改变。
• vue 的实例，所有与 vue 相关的内容都要用 vue 的实例来表示，我们用 vue 来编程都是在 vue 的实例当中来实现的。因此需要学习的内容都包括在 vue 的实例中。

三、如何构造一份以vue设计的网页

1. 创建一份网页，在网页中添加一个id=“app” 的 div，作为 vue 的模板；在 <script> 中创建一个 vue 的实例对象，并把 el 属性指定为 “#app”。

2. 在 vue 的实例中定义本页面所需要使用的变量，这张方式采用名称为 data 的一个对象来表示或包括各种类型的变量，这些变量可以是简单类型，也可以是对象类型，也可以是数组等，此处的 data 可以作为 vue 的模型使用。

3. 当变量确定后，变量可以在页面上使用，这本身就是页面渲染的一个部分。

   • 使用插值表达式来呈现数据。{{变量名}}
   • 使用 v-text 属性来呈现数据。例如 <span v-text=“age”></span>
   • 在表单控件中使用 v-model 来绑定数据可以实现双向绑定。

4. 实现控件与数据之间的双向绑定

5. 创建事件函数

   • 在元素内部使用 v-on：事件名=“” 的方式可以指定事件函数或方法。可以简写为 @click=“”
   • 事件函数要写在 vue 实例的 methods 对象中，函数可以被事件属性所指定。

6. 在页面中使用 vue 的指令。

   • 条件分支

     • <h3 v-if="age > 25">{{name}}比较老</h3>
       <h3 v-if="age <= 25">{{name}}比较小</h3>
       

   • 循环或迭代

     • <h4 v-for="(item,index) in list" :key="index">{{item}}</h4>
       

     • :key 属性相当于主键值，当页面第一次渲染时，list 的值已按固定顺序排列，每一项并没有一个唯一的标识符来表示，当数组的顺序发生改变时，页面上内容的顺序不会变。如果添加了一个 key，对每一项都指定了唯一的标识，当数组的顺序发生改变，内容也会随之改变。

7. 使用 vue 框架时，页面的生命周期。

   • 在生命周期中划分了几个阶段，结合这几个阶段，我们可以使用 vue 所提供的钩子函数。
   • 钩子函数对应于每个阶段，当生命周期到达某个阶段时，对应的钩子函数就会被自动执行。
   • 比如，vue 实例创建后进行到 created 阶段，如果我们指定了 created() 这个钩子函数，该函数就会被调用执行。
   • 在钩子函数中可以操作 vue 中的数据。
   • 在项目中，使用最频繁的是 created() 钩子，此时 vue 实例已创建，那么我们就可以使用其中的变量，就可以对变量进行初始化，也可以调用其它的函数来完成一些前期工作。也就是如果网页在可使用之前需要完成一些前期工作，就会使用钩子。

四、node.js 及 npm

• node.js 是基于 chrome 的 v8 版本打造的一个 js 的执行平台，js 写的后台代码可以基于 node.js 来执行。
• npm 是包管理工具。
• axios 是 node.js 平台的一个包文件，它封装 ajax 的各种操作，我们可以用它来实现 ajax 的功能。

五、elementUI 框架（https://element.eleme.cn/）

• 这是一个 UI 框架，UI 框架会提供大量的可在网页上使用的控件，我们在设计时可以直接把这些组件用到网页上。
• 如何在官网中获取我们需要的组件：
  • 所有组件都是分类排列的；
  • 所有的组件都有案例展示；
  • 所有的案例都有源码，直接复制该源码是最快的方式。