1.认识Vuejs

Vue（读音 /vju:/，类似于 view）。
Vue是一个渐进式的框架，什么是渐进式的呢？

渐进式意味着可以将Vue作为应用的一部分嵌入其中，带来更丰富的交互体验。
希望将更多的业务逻辑使用Vue实现，Vue的核心库以及其生态系统。
比如 vuejs Core + Vue-router +Vuex，可以满足各种各样的需求。

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

解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM

2.Vuejs安装方式

方式一：直接CDN引入

对于制作原型或学习，你可以这样使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：
<script type="module">import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'
</script>在生产环境中可以把 vue.js 换成 vue.min.js，可以带来比开发环境下更快的速度体验。

方式二：直接下载使用 script 引入

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

方式三：NPM安装

安装最新稳定版
npm install vue

3.Vuejs初体验

3.1 Hello Vuejs

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app">{{message}}</div><script src="../vue.js"></script><script>// es6 定义变量 const(常量) let(变量)//【 编程范式：声明式编程】const app = new Vue({// 用于挂载要管理的元素el: "#app",// 定义数据data: {message: "Hello Vuejs"}})// 原生写法 【编程范式：命令式编程】// 1.创建div元素，设置id属性// 2.定义一个变量叫message// 3.将message变量放在div中显示</script>
</body></html>

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

{}中包含el属性：该属性决定了这个Vue对象挂载到哪个元素，很明显这里挂载到id为app元素上。

{}中包含了data属性：该属性中通常会存储一些数据
这些数据可以是我们直接定义出来的。如上。

也可以是来自网络，从服务器中加载的。

并且代码是响应式的。

3.2 Vue列表展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app">{{message}} {{movies}}<!-- 之前写法，一个一个取值 --><ul><li>{{movies[0]}}</li><li>{{movies[1]}}</li><li>{{movies[2]}}</li></ul><!-- 现在写法 --><ul><li v-for="item in movies">{{item}}</li></ul></div><script src="../vue.js"></script><script>const app = new Vue({el: "#app",data: {message: "Hello Vuejs",movies: ['摔跤吧爸爸', '星际穿越', '大话西游', '盗梦空间', '少年派']}})</script>
</body></html>

使用 v-for 指令 v-for="item in 数组"

3.3 Vue列表展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><h2>当前计数：{{counter}}</h2><button v-on:click="counter++">+</button><button v-on:click="counter--">-</button><!-- v-on 绑定事件 --><button v-on:click="add">+</button><button v-on:click="sub">-</button><!-- 语法糖 --><button @click="add">-</button><button @click="sub">-</button></div><script src="../vue.js"></script><script>const app = new Vue({el: "#app",data: {counter: 0},methods: {add: function () {this.counter++;console.log('add被执行')},sub: function () {this.counter--;console.log('sub被执行')}},})</script>
</body></html>

使用新的指令和属性

新的属性：methods，该属性用于在Vue对象中定义方法。

新的指令：v-on:click 语法糖 @click，该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法（方法通常是methods定义的方法）。

4.Vuejs的MVVM

什么是MVVM？【维基百科搜索】

维基百科搜索
MVVM（Model-View-ViewModel）
MVVM(Model-view-viewmodel)是一种软件架构模式。
MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑或后端逻辑(数据模型)的开发分离开来，这是通过置标语言或GUI代码实现的。MVVM的视图模型是一个值转换器，这意味着视图模型负责从模型中暴露（转换）数据的对象，以便轻松管理和呈现对象。在这方面，视图模型比视图做得更多，并且处理大多数视图的显式逻辑。视图模型可以实现中介者模式，组织对视图所支持的用例集的后端逻辑访问。
MVVM是马丁-富勒的PM（Presentation Model）设计模式的变体。MVVM以相同的方式抽象出视图的状态和行为，但PM以不依赖于特定用户界面平台的方式抽象出视图（创建了视图模型）。
MVVM和PM都来自于MVC模式。
MVVM由微软构架师Ken Cooper和Ted Peters开发，通过利用WPF（微软.NET图形系统）和Silverlight(WPF的互联网应用派生品)的特性来简化用户界面的事件驱动设计。微软的WPF和Silverlight构架师之一John Gossman于2005年在他的博客上发表了MVVM。
MVVM也被成为model-view-binder，特别是在不涉及.NET平台的实现中。ZK(Java写的一个Web应用框架)和KnockoutJS(一个JavaScript库)使用model-view-binder。MVVM模式的组成部分
模型模型是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。视图就像在MVC和MVP模式中一样，视图是用户在屏幕上看到的结构、布局和外观（UI）。视图模型视图模型是暴露公共和命令的视图的抽象。MVVM没有MVC模式的控制器，也没有MVP模式的presenter，有的是一个绑定器。在视图模型中，绑定器在视图和数据绑定器之间进行通信。绑定器声明性数据和命令绑定隐含在MVVM模式中。在Microsoft解决方案堆中，绑定器是一种名为XAML的标记语言。绑定器使开发人员免于被迫编写样板逻辑来同步视图模型和视图。在微软的堆之外实现时，声明性数据绑定技术的出现是实现该模式的一个关键因素。理论基础MVVM旨在利用WPF中的数据绑定函数，通过从视图层中几乎所有GUI代码（代码隐藏），更好地促进视图层开发与模式其余部分的分离。不需要用户体验（UX）开发人员编写GUI代码，他们可以使用框架标记语言（如XAML），并创建到应用程序开发人员编写和维护的视图模型的数据绑定。角色的分离使得交互设计师可以专注与用户体验需求，而不是对业务逻辑进行编程。这样，应用程序的层次可以在多个工作流中进行开发以提高生产力。即使一个开发人员在整个代码上工作，视图与模型的适当分离也会更加好笑，因为基于最终用户反馈，用户界面通常在开发周期中经常发生变化，而且处于开发周期后期。
MVVM模式试图获得MVC提供的功能性开发分离的两个优点，同时利用数据绑定的优势和通过绑定数据的框架尽可能接近应用程序模型。它使用绑定器、视图模型和任何业务层的数据检查功能来验证传入的数据。结果是模型和框架驱动尽可能多的操作，消除或最小化直接操纵视图的应用程序逻辑（如代码隐藏）。

Vue的MVVM

View层

视图层

在前端开发中，通常就是DOM层

主要作用是给用户展示各种信息

Model层
数据层

数据可能是固定的死数据，更多的来自我们的服务器，从网络上请求下来的数据。

VueModel层：
视图模型层

视图模型曾是view和Model沟通的桥梁

一方面它实现了Data Binding 也就是数据绑定，将Model的改变实时的反应到View中

另一方面实现了DOM Listener，也就是DOM监听，当DOM发生一些事件（点击，滚动，touch等），可以监听到，并在需要的情况下改变对应的Data

01-邂逅Vuejs相关推荐

Vue学习(一)-邂逅Vuejs
Vue学习(一)- 邂逅Vuejs 零.视频链接一.邂逅Vuejs 1.认识Vuejs 1.1 为什么学习Vuejs 1.2 简单认识一下Vuejs 2.Vuejs安装方式 2.1 CDN引入 2. ...
【OpenCV学习】《OpenCV3编程入门》--毛星云 01 邂逅OpenCV（OpenCV基本概念与基本架构） ROS系统上的运用（python实现）
对 <OpenCV3编程入门>第一章的学习笔记:理解什么是计算机视觉,什么是OpenCV,以及其中的联系等等. PS:此书为2014年出版,opencv的版本和接口也与现在有些不一致了,作 ...
codewhy_vue笔记01
Vue.js安装这里我们使用方式二: 去官网,下载vue.js(开发版本) 使用webstorm新建项目,然后新建js文件夹,把刚才下载的vue.js放到js文件夹下修改数据第一个vue代码 & ...
Vuejs另辟蹊径(基础篇+小案例)
邂逅Vuejs 学习视频来自b站,传送门 https://www.bilibili.com/video/BV15741177Eh 内容概述简单认识 Vue.js安装下载地址 https://cn. ...
vue入门笔记（一）
Vue Day 01 B站原视频地址注:本文只是记录自己的学习过程文章目录 Vue Day 01 一.邂逅Vuejs 1.1.认识Vuejs 1.2.Vue的初体验 1.3.创建Vue时, opt ...
Vuejs --01 起步
一.是什么 1.是一套构建用户界面的渐进式框架,Vue采用自底向上增量开发的设计 1.1 解释:框架譬如angular,是强主张,如果用之---必须使用它的模块机制,必须使用它的依赖注入,必须 ...
知否，知否，交通数据邂逅【数据故事计划二等奖】
摘要:细听学长学姐讲故事,或许在他们的路上也有你的身影! [第一届数据故事计划] "数据故事计划"旨在收集各类有关大数据的故事然后进行比赛及相关的宣传和推广.包括同学们接触大数据. ...
vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
vue点击按钮切换显示不同内容_邂逅Vue
01 什么是Vue.js Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架. 看到这里,你就会问了,什么是渐进式? 渐进式就是你可以将Vue作为一个项目中的部分组件改 ...
（三）HTTP再邂逅--熟悉HTTP协议结构和通讯原理
HTTP再邂逅--熟悉HTTP协议结构和通讯原理 HTTP协议特点 URL和URI的区别和联系 HTTP报文结构分析 HTTP请求方法剖析 HTTP响应状态码拆解用telnet分析http协议的通讯 ...

01-邂逅Vuejs

1.认识Vuejs

2.Vuejs安装方式

3.Vuejs初体验

3.1 Hello Vuejs

3.2 Vue列表展示

使用 v-for 指令 v-for="item in 数组"

3.3 Vue列表展示

4.Vuejs的MVVM

什么是MVVM？【维基百科搜索】

Vue的MVVM

01-邂逅Vuejs相关推荐

最新文章

热门文章