vue学习笔记—基础语法简介

介绍:
vue是一个专注于前端UI的框架,他的主要能力是:
01.声明式的绑定。包括数据绑定、事件绑定。
02.基于组件的编程。让开发者可以把整个应用分为若干组件,从而达到分而治之的目的。
vue的特点:
想要更好的理解vue,那么对于下面这几个词汇就应该有个更深刻的理解,单页面应用,数据驱动,模板语法,组件化
(1)单页面应用:
单页面应用(single page web application SPA)单页面应用层程序就是加载单个html页面并在用户与应用程序交互时动态更新该页面的web应用程序。

单页面应用
图(1) 单页应用
多页面应用
图(2)多页应用

个人理解的单页面应用就是在重新加载一个html页面时是否需要对整个页面都进行刷新,比如上面的图(1)。传统的多页面在加载新的页面的时候会加载该页面所必须的html、css、javascript,比如上面的图(2),这样就会加大加载一个页面的工作量,使得网页加载慢,减弱用户体验,下面这张表详细的说明了多页面应用于单页面应用的区别:
在这里插入图片描述
(2)数据驱动
a.什么是数据驱动?
所谓的数据驱动就是当数据发生改变的时候,用户界面发生相应的变化,开发者不需要手动的去修改DOM。
b.vuejs还是如何实现数据驱动的呢?
vue实现数据绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.definProperty() 来劫持各个属性的getter和setter,在数据变动时发布消息给订阅者,出发相应监听回调。用户看不到getter/setter,而是在他们的内部让Vue追踪依赖,在属性被访问和修改时通知变化。

在这里插入图片描述
在这里插入图片描述
(3)组件化
在这里插入图片描述
(4)模板语法:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

vue安装
https://blog.csdn.net/u013408061/article/details/88238592
笔者安装是参考上述链接进行安装的,首先安装node环境,然后用npm安装需要的webpack和vue-cli;读者可以根据具体的步骤进行安装。。
vue程序简单解释
个人理解一个vue实例程序可以分为3部分:

这部分主要写html部分,可以写一些想要的布局,例如部署一些文字,图片,动画,链接等等; 这部分主要是写一些JavaScript部分,比如模板部署的具体数据实例,事件,实现方法 这部分主要可以写一些对模板部分的样式渲染,字体大小,动态效果等等;
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐