尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

vue学习(白话功能版)

vue学习(白话功能版) 注此篇文章是用大白话说明vue的功能实际实现代码不多目的是让读者了解该框架的思想功能若想看具体代码实现请看vue学习代码实践版chapter 1 vue的产生说到vue就不得不说angular。最开始谷歌大团队前端代码写得很混乱不同的团队写的代码风格不一样html、css、js混着写写的项目换个人就看不懂了更别提给它复用开发了。为了解决这个问题在谷歌工作的Hevery开发出了angular框架名字取自html的标签尖括号angle brackets。他给出的解决方案是把混乱的程序分一分同类的放一起并且以后就按这个分类来程序就很清晰了。也就是通过模块化程序来消除混乱。这个模块化思想深深影响到了后续其他前端框架的开发。后面尤雨溪也来到谷歌工作艺术出身的他觉得angular好复杂好难啊要学好多好多东西难道就不能简化一下吗于是他决定开发一种前端框架更简洁明了更容易上手。顺便说一句笔者最开始对前端一无所知也没人带居然也能用vue框架写成项目说明这个vue真是绝好。chapter 2 vue的功能使用接下来我会用白话说明vue的各项功能。vue是一种前端框架。前端框架是什么打比方的话前端框架就是装修中的全屋定制团队。没有这些前端框架就好比你从0到1装修毛坯房要去市场买每块砖、每个材料还要去计算水电布局…这些又麻烦又容易出错。有了前端框架就好比有了全屋定制团队他们有固定的装修模板你只用选自己喜欢的家具、布局就OK了。页面之所以写着麻烦就是因为html是为静态文本设立的咱们要写动态网站只能写很多复杂的交互代码实在是琐碎繁杂。好了我们要建造项目了首先要把装修团队vue请来。vue在哪呢在一个全球共享仓库。这个仓库放满了卧龙凤雏全是前人写的js源码你可以下载下来复制别人的源码就不用自己写某个功能了当然你也可以把自己写的上传上去供他人使用。这个仓库的地址是https://registry.npmjs.org/用该仓库的管理器下载npminstallvue //npm 安装 vuenpm就是该仓库的管理器关于npm的内容在另一篇博文看。那怎么用vue呢众所周知vue是一个类一个提前定义好的类。类就是个图纸用这个图纸造出来的东西叫实例实际例子怎么取了这样的名字要我说应该叫实物。图纸虽然规定了功能结构但却不可以直接用用图纸造出来的实物才能用。所以我们先造个实物出来。varvmnewVue({})//变量 vm 新建的 vue 实例好啦咱们新建的vue实物出来了我把它装在了变量vm里以后提到vm就是指咱们新建的vue实物。放变量里挺好的以后用的话可以直接直呼其名了。在官网中可以看到将vm称呼为根实例为啥叫根呢是由于vue的设计思想决定的。vue是由很多小组件组成的这些组件嵌套在一起像一棵树一样而我们建造的这个实例就是这棵树的根节点。未完待续……
返回列表