Vue简介及简单应用

目录

一、Vue简介

1、Vue介绍

官方说法:Vue是一个构建用户界面(UI)的渐进式JavaScript框架。并且颠覆了传统的MVC模式(js)使用了MVVM模型开发,它实现了前后端分离。

2、库和框架的区别

3、MVVM模型的介绍

二、Vue入门

1、首先我们需要在项目中导入Vue的依赖

2、定义边界、创建Vue实例、挂载边界

3、利用MVVM实现双向数据绑定

4、Vue事件(点击事件):当点击获取输入框中的内容时,将会将输入框的内容提示出一个提示框,而提示框中的内容也会随着文本框中的内容改变而改变!(数据双向绑定)

 三、Vue生命周期


今天来与大家分享一个热门的前端框架Vue

一、Vue简介

1、Vue介绍

官方说法:Vue是一个构建用户界面(UI)的渐进式JavaScript框架。并且颠覆了传统的MVC模式(js)使用了MVVM模型开发,它实现了前后端分离。

官方网址:https://cn.vuejs.org/      Vue作者:尤雨溪/中国无锡

个人认为Vue是一个前端库,Vue包含了大量的特定函数,同时因为ElEmentUI是在Vue的基础上结合Html5所开发的一个前端框架,等于再一次封装了Vue。与基于JQuery开发的easyUI相似,JQuery作为库,easyUI作为前端框架。

2、库和框架的区别


  2.1 库(Library),本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者
      代表:jQuery
      jQuery这个库的核心:DOM操作,即:封装DOM操作,简化DOM操作

  2.2 框架(Framework),是一套完整的解决方案,使用框架的时候,需要把你的代码放到框架合适的地方,框架会在合适的时机调用你的代码 
      代表:vue
      框架规定了自己的编程方式,是一套完整的解决方案
      使用框架的时候,由框架控制一切,我们只需要按照规则写代码
      框架的侵入性很高(从头到尾)
 

3、MVVM模型的介绍

MVVM一套更好UI的解决方案,MVVM通过数据双向绑定让数据自动地双向同步

M:Model模型   V:View视图  VM:视图模型  虚拟Dom 

不再需要程序员手动编写DOM节点(比如<input><table>)

二、Vue入门

我将通过案例来向大家讲解Vue入门

1、首先我们需要在项目中导入Vue的依赖

可以在官方中查找自己需要的版本并下载引入,也可以在CDN中查找(需要联网)

比如说在CDN,直接输入搜索需要的vue版本即可 

<script                         src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值