1.简单认识一下Vue.js

  • Vue (读音 /vjuː/，类似于 view)，不要读错。

  • Vue是一个渐进式的框架，什么是渐进式的呢？

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

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

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

2.Vue.js的安装

使用一个框架，我们第一步要做什么呢？安装下载它

安装Vue的方式有很多：

方式一：直接CDN引入

<!-- 开发环境版本，包含了有帮助的命令行警告 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二：下载和引入

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

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

方式三：NPM安装

后续通过webpack和CLI的使用，我们使用该方式。

3.Vue初体验

我们来做我们的第一个Vue程序，体验一下Vue的响应式

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<script src="../js/vue.js"></script>

	</head>

	<body>

		<div id="app">{{message}}</div>

	</body>

	<script type="text/javascript">

		new Vue({

			el: '#app',

			data: {

				message: '你好呀'

			}

		})

	</script>

</html>

运行这段程序，我们可以在浏览器中看到你好呀，那么这段程序做了些什么，为什么可以显示出来？

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

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

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

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

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

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

浏览器执行代码的流程：

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

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

4.Vue中的MVVM

View层：

  • 视图层
  • 在我们前端开发中，通常就是DOM层。
  • 主要的作用是给用户展示各种信息。

Model层：

  • 数据层
  • 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
  • 在我们上面的案例中，就是里面的data区域，当然，里面的数据可能没有这么简单。

VueModel层：

  • 视图模型层
  • 视图模型层是View和Model沟通的桥梁。
  • 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
  • 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

我们现在来看一个计数器的案例，帮助我们理解MVVM模型

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>

		<div id="app">

			<div>当前计数：{{count}}</div>

			<button v-on:click="increment">+</button>

			<button v-on:click="decrement">-</button>

		</div>

	</body>

	<script type="text/javascript">

		new Vue({

			el: '#app',

			data: {

				count: 0

			},

			methods: {

				increment(){

					this.count++;

				},

				decrement(){

					this.count--;

				}

			}

		})

	</script>

</html>

这个例子很简单，就是通过点击按钮触发事件，实现对count的加减。那么在这个案例中MVVM分别对应那块呢？

View层

下面的这个div就是MVVM中的V

<div id="app">

    <div>当前计数：{{count}}</div>

    <button v-on:click="increment">+</button>

    <button v-on:click="decrement">-</button>

</div>

Model层

data: {

	count: 0

},

ViewModel

ViewModel就是我们创建出来Vue实例

5.Vue实例中的options

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

el: '#app',

data: {

	count: 0

},

methods: {

increment(){

	this.count++;

	},

decrement(){

	this.count--;

	}

}

这些参数表示什么意思呢？为什么要传入这些参数，还可以传入其他的参数吗？初学者应该都会有这样的疑问

这个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的更多相关文章

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  3. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  4. vue.js学习笔记

    有了孩子之后,元旦就哪也去不了了(孩子太小),刚好利用一些时间,来公司充充电补补课,学习学习新技术,在这里做一个整理和总结.(选择的东西,既然热爱就把他做好吧!). 下来进入咱们的学习环节: 一.从H ...

  5. 从Vue.js窥探前端行业

    近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大 ...

  6. vue.js初探

    前言 入手2016最火前端框架之一vue.js.大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎. 网上的博客和教程各种组 ...

  7. vue.js几行实现的简单的todo list

    序:目前前端框架如:vue.react.angular,构建工具fis3.gulp.webpack等等...... 可谓是五花八门,层出不穷,眼花缭乱...其实吧只要你想玩还是可以玩玩的..下面是看了 ...

  8. Vue.js——60分钟组件快速入门（上篇）

    组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML ...

  9. Vue.js——60分钟快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

随机推荐

  1. Com训练_1

    初次接触Com大概是2001年,离现在多年了,那时认识比较肤浅,再次接触学习下. //ComPort + D7, 稍后将训练ComPort6 + D10.3.2环境 //MSComm + D7,D10 ...

  2. java并发编程 --并发问题的根源及主要解决方法

    目录 并发问题的根源在哪 缓存导致的可见性 线程切换带来的原子性 编译器优化带来的有序性 主要解决办法 避免共享 Immutability(不变性) 管程及其他工具 并发问题的根源在哪 首先,我们要知 ...

  3. 【JMeter_22】JMeter逻辑控制器__录制控制器<Recording Controller>

    录制控制器<Recording Controller> 个人感觉录制的脚本缺陷太明显,没有研究过,暂不做介绍,等后续空了研究后再写

  4. 阿里P7终于讲完了JDK+Spring+mybatis+Dubbo+SpringMvc+Netty源码

    前言 这里普及一下,每个公司都有职别定级系统,阿里也是,技术岗以 P 定级,一般校招 P5, 社招 P6 起.其实阅读源码也是有很多诀窍的,这里分享几点心得: 首先要会用.你要知道这个库是干什么的,掌 ...

  5. Java学习笔记6（集合类）

    集合类 集合按照其存储结构可以分为两大类,即单列集合Collection和双列集合Map. Collection:单列集合类的根接口,用于存储一系列符合某种规则的元素,有List和Set两个重要子接口 ...

  6. Asp.Net 五大对象及作用

    Connection(连接对象):与数据源建立连接. DataAdapter(适配器对象):对数据源执行操作并返回结果,在DataSet与数据源之间建立通信,将数据源中的数据写入DataSet中,或根 ...

  7. @EnableHystrixDashboard注解无法使用情况

    本人使用的是springboot 2.1.3,在引入hystrix仪表盘时,发现@EnableHystrixDashboard注解无法使用. 原来的pom配置 度娘之后,发现是springboot版本 ...

  8. Java 中的数据结构类 Stack

    JDK 中的 Stack 类便是经典的数据结构栈的实现,它继承于线程安全的 Vector 类,而且它自身的线程不安全的方法上也加上了 synchronized 关键字,所以它的内部操作也是线程安全的哦 ...

  9. 2、尚硅谷_SSM高级整合_创建Maven项目.avi

    第一步我们新建立一个web工程 这里首先要勾选上enable的第一个复选框 这里要勾选上add maven support 我们在pom.xml中添加sevlet的依赖 创建java web项目之后, ...

  10. linux网络编程-socket(37)

    在编程的时候需要加上对应pthread开头的头文件,gcc编译的时候需要加了-lpthread选项 第三个参数是线程的入口参数,函数的参数是void*,返回值是void*,第四个参数传递给线程函数的参 ...