邂逅 Vuejs
简单认识 Vuejs
-
Vue
(读音 /vjuː/,类似于view
),不要读错。 -
Vue
是一个渐进式的框架,什么是渐进式的呢?- 渐进式意味着你可以将
Vue
作为你应用的一部分嵌入其中,带来更丰富的交互体验。 - 或者如果你希望将更多的业务逻辑使用
Vue
实现,那么Vue
的核心库以及其生态系统。 - 比如
Core+Vue-router+Vuex
,也可以满足你各种各样的需求。
- 渐进式意味着你可以将
-
Vue
有很多特点和Web
开发中常见的高级功能- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟
DOM
-
学习
Vuejs
的前提?- 从零学习
Vue
开发,并不需要你具备其他类似于Angular
、React
,甚至是jQuery
的经验。 - 但是你需要具备一定的
HTML
、CSS
、JavaScript
基础。
- 从零学习
Vue.js 安装
-
使用一个框架,我们第一步要做什么呢?安装下载它
-
安装
Vue
的方式有很多:-
方式一:直接
CDN
引入- 你可以选择引入开发环境版本还是生产环境版本
-
方式二:下载和引入
-
BootCDN/Vue
https://www.bootcdn.cn/vue/
-
-
方式三:
NPM
安装- 后续通过
webpack
和CLI
的使用,我们使用该方式。
- 后续通过
-
Hello Vuejs
-
我们来做我们的第一个
Vue
程序,体验一下Vue
的响应式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <h1>{{msg}}</h1> </div> </body> <script src="../vue.js"></script> <script> const app = new Vue({ // 挂载DOM,Vue实例的作用范围 el: "#app", data: { msg: "hello Vuejs", }, }); </script> </html>
-
代码做了什么事情?
-
我们来阅读
JavaScript
代码,会发现创建了一个Vue
对象。 -
创建
Vue
对象的时候,传入了一些options:{}
-
{}
中包含了el
属性:该属性决定了这个Vue
对象挂载到哪一个元素上,很明显,我们这里是挂载到了id
为app
的元素上 -
{}中包含了
data
属性:该属性中通常会存储一些数据- 这些数据可以是我们直接定义出来的,比如像上面这样。
- 也可能是来自网络,从服务器加载的。
-
浏览器执行代码的流程:
- 执行到
9~13
行代码显然出对应的HTML - 执行第
16
行代码创建Vue
对象,并且对原HTML
进行解析和修改。
- 执行到
-
并且,目前我们的代码是可以做到响应式的。
Vue 列表显示
-
现在,我们来展示一个更加复杂的数据:数据列表。
- 比如我们现在从服务器请求过来一个列表
- 希望展示到
HTML
中。
-
HTML
代码中,使用v-for
指令-
该指令我们后面会详细讲解,这里先学会使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> <ul> <li v-for="(item,index) in moives">{{index}}{{item}}</li> </ul> </div> </body> <script src="../vue.js"></script> <script> const app = new Vue({ el: "#app", data: { moives: ["星际穿越", "盗梦空间", "复仇者联盟", "大话西游"], }, }); </script> </html>
-
-
是不是变得
So Easy
,我们再也不需要在JavaScript
代码中完成DOM
的拼接相关操作了 -
而且,更重要的是,它还是响应式的。
-
也就是说,当我们数组中的数据发生改变时,界面会自动改变。
- 依然让我们打开开发者模式的
console
,来试一下
- 依然让我们打开开发者模式的
-
案例:计数器
-
现在,我们来实现一个小的计数器
- 点击
+
计数器+1
- 点击
-
计数器-1
- 点击
-
这里,我们又要使用新的指令和属性了
-
新的属性:
methods
,该属性用于在Vue
对象中定义方法(函数)。 -
新的指令:
@click
, 该指令用于监听某个元素的点击事件,并且需要指定当发生点击时,执行的方法(方法通常是methods
中定义的方法)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> button { border: none; width: 60px; height: 35px; } </style> </head> <body> <div id="app"> <h1>当前计数:{{counter}}</h1> <button @click="increment">+</button> <button @click="decrement">-</button> </div> </body> <script src="../vue.js"></script> <script> const app = new Vue({ el: "#app", data: { counter: 0, }, methods: { increment() { this.counter++; }, decrement() { this.counter--; }, }, }); </script> </html>
-
-
你可能会疑惑?
- 这些
@click
是什么东西? Vue
对象中又是定义el/data/methods
,到底都有哪些东西可以定义,以及它们的作用是什么?
- 这些
-
这些疑惑在后续学习中都会一一解开。
Vue 中的 MVVM
-
View
层:视图层- 在我们前端开发中,通常就是
DOM
层。 - 主要的作用是给用户展示各种信息。
- 在我们前端开发中,通常就是
-
Model
层:数据层- 数据可能是我们固定的死数据,更多的是来自我们服务器,从网络上请求下来的数据。
- 在我们计数器的案例中,就是后面抽取出来的
data
,当然,里面的数据可能没有这么简单。
-
ViewModel
层:视图模型层- 视图模型层是
View
和Model
沟通的桥梁。 - 一方面它实现了
Data Binding
,也就是数据绑定,将Model
的改变实时的反应到View
中 - 另一方面它实现了
DOM Listener
,也就是DOM
监听,当DOM
发生一些事件(点击、滚动、touch
等)时,可以监听到,并在需要的情况下改变对应的Data
。
- 视图模型层是
计数器的MVVM
-
计数器的
MVVM
-
我们的计数器中就有严格的
MVVM
思想View
依然是我们的DOM
Model
就是我们我们抽离出来的data
ViewModel
就是我们创建的Vue
对象实例
-
它们之间如何工作呢?
- 首先
ViewModel
通过Data Binding
让obj
中的数据实时的在DOM
中显示。 - 其次
ViewModel
通过DOM Listener
来监听DOM
事件,并且通过methods
中的操作,来改变data
中的数据。
- 首先
-
-
有了
Vue
帮助我们完成ViewModel
层的任务,在后续的开发,我们就可以专注于数据的处理,以及DOM
的编写工作了。
创建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
的一些方法,可以在其他地方调用,也可以在指令中使用。
- 类型:
-