01-Vue 快速入门实现？

时间 2020-08-30

标签 vue 快速入门实现繁體版

原文原文链接

VUE 简介

什么是VUE?

VUE是一个基于MVVM设计模式的渐进式（融合）的纯前端JS框架，基于此框架咱们能够让客户端的操做更简单。html

如何理解框架？
能够将其理解为已经包含部分核心功能的半成品代码，缺乏个性化定制，主要用于避免重复编码实现。

什么场景使用VUE？

绝大多数以数据操做（增删改查）为主的PC端或移动端项目均可用vue开发好比: 美团，饿了么，淘宝，知乎，大众点评，微博...前端

VUE 快速入门

官方js文件下载

cn.vuejs.orgvue

业务及代码实现

构建HTML页面，呈现以下效果，并在图中点击加，减按钮时实现中间数字的变化（要求基于vue技术进行实现）。设计模式

第一步：定义HTML页面并引入vue.js文件。app

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="/js/vue.js"></script>
</head>
<body>
</body>
</html>

第二步：在html页面中的body内部添加以下元素。框架

<div id="app">
    <button @click="minus">-</button>
    <span>{{n}}</span>
    <button @click="add">+</button>
 </div>

说明：函数

1)在界面中要添加vue对象要监控元素,习惯上都用 id="app"
2)找到界面中未来可能发生变化的位置，用{{变量名}}特殊语法标记出来
3)找到界面中能够点击的位置绑定事件处理函数。

第三步：在html页面中的body底端部分构建JS代码实现this

在JS中建立一个Vue类型的对象来监视页面中的内容。编码

<script>
    new Vue({
      el:"#app",
      data:{
        n:0 //起始值为0
      },
      methods:{
        add(){
          this.n++ //访问data中变量必须用this
        },
        minus(){
          if(this.n>0){ this.n-- }
        }
      }
    })
  </script>

其中：
1)el(element缩写)属性:"选择器"，为Vue对象要监视的范围。
2)页面全部变量，都必须保存在data属性中，且以对象属性形式保存。
3)页面全部事件处理函数，都必须保存在methods属性中，且以对象方法形式保存。

总结(Summary)

本小节为Vue的一个快速入门案例，基于此案例，咱们要了解在页面引入vue.js时，实际上是引入了一种Vue类型，若是使用vue框架作开发，必须都要建立new Vue()对象，对象建立时咱们指定el,data,methods属性。而后可基于vue对象监控页面元素和事件，进而实现页面上数据的更新。spa

1. JMS实现之ActiveMQ快速入门
2. ES6快速入门 ES6 快速入门
3. SpringBoot入门实践(一)-快速入门
4. Vue.js快速入门实例
5. Docker实践快速入门
6. RocketMQ实战快速入门
7. eCharts 快速入门实例
8. 快速入门
9. Hadoop快速入门
10. Sqoop 快速入门
更多相关文章...
• SQL 快速参考 - SQL 教程
• Eclipse 快速修复 - Eclipse 教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用