关于前端:01Vue-快速入门实现

38次阅读

共计 1115 个字符,预计需要花费 3 分钟才能阅读完成。

VUE 简介

什么是 VUE?

VUE 是一个基于 MVVM 设计模式的渐进式(交融)的纯前端 JS 框架,基于此框架咱们能够让客户端的操作更简略。

如何了解框架?
能够将其了解为曾经蕴含局部外围性能的半成品代码,短少个性化定制,次要用于防止反复编码实现。

什么场景应用 VUE?

绝大多数以数据操作(增删改查)为主的 PC 端或挪动端我的项目都可用 vue 开发比方: 美团,饿了么,淘宝,知乎,公众点评,微博 …

VUE 疾速入门

官网 js 文件下载

cn.vuejs.org

业务及代码实现

构建 HTML 页面,出现如下成果,并在图中点击加,减按钮时实现两头数字的变动(要求基于 vue 技术进行实现)。

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

<!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 代码实现

在 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 对象监控页面元素和事件,进而实现页面上数据的更新。

正文完
 0