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