外国网站邀请做编辑,重庆的公需科目在哪个网站做,wordpress密码无法重置密码错误,网站对接app2.1 Vue概述
通过我们学习的htmlcssjs已经能够开发美观的页面了#xff0c;但是开发的效率还有待提高#xff0c;那么如何提高呢#xff1f;我们先来分析下页面的组成。一个完整的html页面包括了视图和数据#xff0c;数据是通过请求 从后台获取的#xff0c;那么意味着我…2.1 Vue概述
通过我们学习的htmlcssjs已经能够开发美观的页面了但是开发的效率还有待提高那么如何提高呢我们先来分析下页面的组成。一个完整的html页面包括了视图和数据数据是通过请求 从后台获取的那么意味着我们需要将后台获取到的数据呈现到页面上很明显 这就需要我们使用DOM操作。正因为这种开发流程所以我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开发思想即让我们开发者更加关注数据而非数据绑定到视图这种机械化的操作。那么具体什么是MVVM思想呢
MVVM:其实是Model-View-ViewModel的缩写有3个单词具体释义如下 Model: 数据模型特指前端中通过请求从后台获取的数据 View: 视图用于展示数据的页面可以理解成我们的htmlcss搭建的页面但是没有数据 ViewModel: 数据绑定到视图负责将数据Model通过JavaScript的DOM技术将数据展示到视图View上
如图所示就是MVVM开发思想的含义 基于上述的MVVM思想其中的Model我们可以通过Ajax来发起请求从后台获取;对于View部分我们将来会学习一款ElementUI框架来替代HTMLCSS来更加方便的搭建View;而今天我们要学习的就是侧重于ViewModel部分开发的vue前端框架用来替代JavaScript的DOM操作让数据展示到视图的代码开发变得更加的简单。可以简单到什么程度呢可以参考下图对比 在更加复杂的dom操作中vue只会变得更加的简单在上述的代码中我们看不到之前的DOM操作因为vue全部帮我们封装好了。 接下来我们来介绍一下vue。
Vue.js读音 /vjuː/, 类似于 view 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层并且非常容易学习非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
框架即是一个半成品软件是一套可重用的、通用的、软件基础代码模型。基于框架进行开发更加快捷、更加高效。 2.2 快速入门
接下来我们通过一个vue的快速入门案例来体验一下vue。
第一步在VS Code中创建名为12. Vue-快速入门.html的文件并且在html文件同级创建js目录将资料/vue.js文件目录下得vue.js拷贝到js目录如下图所示 第二步然后编写script标签来引入vue.js文件代码如下
script srcjs/vue.js/script
第三步在js代码区域定义vue对象,代码如下
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{message: Hello Vue}})
/script
在创建vue对象时有几个常用的属性 el: 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值 data: 用来定义数据模型 methods: 用来定义函数。这个我们在后面就会用到
第四步在html区域编写视图其中{{}}是插值表达式用来将vue对象中定义的model展示到页面上的
bodydiv idappinput typetext v-modelmessage{{message}}/div
/body
浏览器打开效果如图所示 整体代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-快速入门/titlescript srcjs/vue.js/script
/head
body
div idappinput typetext v-modelmessage{{message}}/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{message: Hello Vue}})
/script
/html
