Vue学习笔记(篇一)——Vue.js基础知识

一、Vue.js基础知识

(一)Vue是一个渐进式框架,什么是渐进式?

​ 1、渐进式意味着你可以将Vue作为你的应用的一部分嵌入其中,带来更丰富的交互体验。

​ 2、或者如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统。

​ 3、比如Core+Vue+router+Vuex,也可以满足你各种各样的需求。

(二)Vue有很多特点和Web开发中常见的高级功能

​ 1、解耦视图和数据

​ 2、可复用的组件

​ 3、前端路由技术

​ 4、状态管理

​ 5、虚拟DOM

(三)安装Vue的方式:

1、直接CDN引入

​ 你可以选择引入开发环境版本还是生产环境版本:

2、下载和引入

开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js

3、NPM安装

(三)第一个Vue程序

代码做了什么事情?

我们来阅读JavaScript代码,会发现创建了一个Vue对象。

创建Vue对象的时候,传入了一些options:{}

​ {}中包含了el属性:该属性决定了这个Vue对象挂载到哪一个元素上,很明显,我们这里是挂载到 了id为app的元素上

​ {}中包含了data属性:该属性中通常会存储一些数据

​ 这些数据可以是我们直接定义出来的,比如像上面这样。

​ 也可能是来自网络,从服务器加载的。

浏览器执行代码的流程:

​ 执行到10~13行代码显然出对应的HTML

​ 执行第16行代码创建Vue实例,并且对原HTML进行解析和修改。

并且,目前我们的代码是可以做到响应式的。

{{message}}

{{name}}

{{name}}

{{message}}

(四)Vue中的MVVM,组成部分

模型

模型是指代表真实状态内容的领域模型(面向对象),或指代表内容的数据访问层(以数据为中心)。

视图

就像在MVC和MVP模式中一样,视图是用户在屏幕上看到的结构、布局和外观(UI)。

视图模型

视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器,也没有MVP模式的presenter,有的是一个绑定器。在视图模型中,绑定器在视图和数据绑定器(英语:Data binding)之间进行通信。

绑定器

声明性数据和命令绑定隐含在MVVM模式中。在Microsoft解决方案堆(英语:solution stack)中,绑定器是一种名为XAML的标记语言。绑定器使开发人员免于被迫编写样板式逻辑来同步视图模型和视图。在微软的堆之外实现时,声明性数据绑定技术的出现是实现该模式的一个关键因素。

(五)创建Vue实例传入的参数(options)

你会发现,我们在创建Vue实例的时候,传入了一个对象options。

这个options中可以包含哪些选项呢?

​ 详细解析: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE

目前掌握这些选项:

el:

​ 类型:string | HTMLElement

​ 作用:决定之后Vue实例会管理哪一个DOM。

data:

​ 类型:Object | Function (组件当中data必须是一个函数)

​ 作用:Vue实例对应的数据对象。

methods:

​ 类型:{ [key: string]: Function }

​ 作用:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用。

你可能感兴趣的:(Vue.js,学习笔记,vue,js,Vue学习笔记)