Vue Day 01
概述:
- 认识Vuejs
- 为什么学习Vuejs
- 简单认识一下Vuejs
- Vuejs安装方式
- CDN引|入
- 下载和引入
- NPM安装管理
- Vuejs初体验
- Hello Vuejs
- Vue列表示
- 案例:计数器
- Vuejs的MVVM
- Vue中的MVVM
一、Vuejs的起步
1.1. 认识Vuejs
-
为什么学习Vuejs
作为学习者我们知道Vuejs目前非常火,可以说是前端必备的一个技能
-
Vue的渐进式
- 渐进式意味着你可以将Vue作为你应用的一 部分嵌入中,带来更丰富的交互体验。
- 或者如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及生态系统。
- 比如Core +Vue-router +Vuex, 也可以满足你各种各样的需求。
-
Vue的特点
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
1.2. 安装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的使用,我们使用该方式
1.3. Vue的初体验
-
Hello Vuejs
<div id="app"> <h2>{{message}}</h2> <h1>{{name}}</h1> </div> <script src="../js/vue.js"></script> <script> let app=new Vue({ el:'#app',//用于挂载要管理的元素 data:{//定义数据 message:'你好啊', name:'云澈' } }) </script>
我们来阅读JavaScript代码,会发现创建了一个Vue对象。
创建Vue对象的时候,传入了一些options:{}- {}中包含了el属性:该属性决定了这个Vue对象挂载到哪一个元素上,很明显,我们这里是挂载到了id为app的元素上
- {}中包含了data属性:该属性中通常会存储一些数据
这些数据可以是我们直接定义出来的,比如像上面这样。
也可能是来自网络,从服务器加载的。
浏览器执行代码的流程:
- 执行到1行代码显然出对应的HTML
- 执行第7行代码创建Vue实例,并且对原HTML进行解析和修改
并且,目前我们的代码是可以做到响应式的。
- mustache -> 体验vue响应式
-
Vue列表展示
现在,我们来展示一个更加复杂的数据:数据列表。
- 比如我们现在从服务器请求过来一个列表
- 希望展示到HTML中。
HTML代码中,使用v-for指令
- 该指令我们后面会详细讲解,这里先学会使用
<div id="app"> <ul> <li v-for="item in movies">{{item}}</li> </ul> </div> <script src="../js/vue.js"></script> <script> const app=new Vue({ el:'#app', data:{ message:'你好啊', movies:['海王','星际穿越','大话西游','少年派'] } })
而且,更重要的是,它还是响应式的。
- 也就是说,当我们数组中的数据发生改变时,界面会自动改变
- 可以打开开发者模式的console,来试一下
小结:后面给数组追加元素的时候, 新的元素也可以在界面中渲染出来
-
Vue计数器小案例
- 事件监听: click -> methods
现在,我们来实现一个小的计数器
- 点击 + 计数器+1
- 点击 - 计数器 -1
<div id="app"> <h2>当前计数:{{counter}}</h2> <!-- <button v-on:click="counter++">+</button>--> <!-- <button v-on:click="counter--">-</button>--> <!-- <button v-on:click="add">+</button>--> <!-- <button v-on:click="sub">-</button>--> <button @click="add">+</button> <button @click="sub">-</button> </div> <script src="../js/vue.js"></script> <script> const app=new Vue({ el:'#app', data:{ counter: 0 }, methods:{ add:function () { console.log('add被执行'); this.counter++ }, sub:function () { console.log('sub被执行'); this.counter-- } } }) </script>
这里,我们又要使用新的指令和属性了
- 新的属性:methods,该属性用于在Vue对象中定义方法。
- 新的指令:@click, 该指令用于监听某个元素的点击事件,并且需要指定当发生点击时,执行的方法(方法通常是methods中定义的方法)
你可能会疑惑?
- 这些@click是什么东西?
- Vue对象中又是定义el/data/methods,到底都有哪些东西可以定义,以及它们的作用是什么?
- 这些疑惑在后续学习中都会一一解开。
1.4. Vue中的MVVM
通常我们学习一个概念,最好的方式是去看维基百科(对,千万别看成了百度百科)
-
MVVM(Model–view–viewmodel)是一种软件架构模式。
MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑(数据模型)的开发分离开来,这是通过置标语言或GUI代码实现的。MVVM的视图模型是一个值转换器,[1] 这意味着视图模型负责从模型中暴露(转换)数据对象,以便轻松管理和呈现对象。在这方面,视图模型比视图做得更多,并且处理大部分视图的显示逻辑。[1] 视图模型可以实现中介者模式,组织对视图所支持的用例集的后端逻辑的访问
我们直接来看Vue的MVVM
View层:
- 视图层
- 在我们前端开发中,通常就是DOM层。
- 主要的作用是给用户展示各种信息。
Model层:
- 数据层
- 数据可能是我们固定的死数据,更多的是来自我们服务器,从网络上请求下来的数据。
- 在我们计数器的案例中,就是后面抽取出来的obj,当然,里面的数据可能没有这么简单。
VueModel层:
- 视图模型层
- 视图模型层是View和Model沟通的桥梁。
- 一方面它实现了Data Binding,也就是数据绑定,将Model的改变实时的反应到View中
- 另一方面它实现了DOM Listener,也就是DOM监听,当DOM发生一些事件(点击、滚动、touch等)时,可以监听到,并在需要的情况下改变对应的Data。
计数器的MVVM
- 我们的计数器中就有严格的MVVM思想
- View依然是我们的DOM
- Model就是我们我们抽离出来的obj
- ViewModel就是我们创建的Vue对象实例
- 它们之间如何工作呢?
- 首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。
- 其次ViewModel通过DOM Listener来监听DOM事件,并且通过methods中的操作,来改变obj中的数据。
有了Vue帮助我们完成VueModel层的任务,在后续的开发,我们就可以专注于数据的处理,以及DOM的编写工作了。
1.5. 创建Vue时, options可以放那些东西
- el:
- 类型:
string | HTMLElement
- 作用:决定之后Vue实例会管理哪一个DOM。
- 类型:
- data:
- 类型:
Object | Function (组件当中data必须是一个函数)
- 作用:Vue实例对应的数据对象。
- 类型:
- methods:
- 类型:
{ [key: string]: Function }
- 作用:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用。
- 类型:
- 生命周期函数
1.6. vue生命周期
具体详情可vuejis官网查阅
类型:Object | Function (组件当中data必须是一个函数)
- 作用:Vue实例对应的数据对象。
- methods:
- 类型:
{ [key: string]: Function }
- 作用:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用。
- 类型:
- 生命周期函数
1.6. vue生命周期
具体详情可vuejis官网查阅