前端框架VUE的MVVM模式简介和安装使用
日期：2018-05-13
来源：程序思维浏览：1338次
1.4.1. 概述
大致可以分为三个部分:
1. M: model,模型,在这里指的是数据模型
2. V: view,视图,在这里指的就是我们写的页面
3. VM ViewModel,是数据模型和视图连接的纽带(桥梁)
我们要把数据模型上面的数据绑定到视图上,要通过这个纽带(桥梁)来实现
1.4.2. 图解
1.5. 第一个vue案例
1.5.1. vue的安装
1.5.1.1. 兼容
兼容性提示： Vue.js 不支持 IE8 及其以下版本。
1.5.1.2. 版本
1. 开发版本: 包含完整的警告和调试
2. 生产版本: 删除了警告
1.5.1.3. 使用
- 使用本地的vue.js
存在的缺点
需要提前进行下载 使用的时候受本地路径的限制,如果路径引入错误,会报错
- 也可以使用cdn加速服务,在有网络的情况下,直接引入
<script src="https://unpkg.com/vue/dist/vue.js"></script>存在的缺点
没有网络的时候没法使用
- 还有另外一种使用的方式,就是在项目模板中使用,关于这一部分内容,稍后进行讲解
1.5.2. 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门之Helloworld</title>
<!--第1步：引入Vue库-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!--第2步: 通过id属性设置视图的入口-->
<div id="app">
<!--Vue的模板的绑定数据的方法， 类似于很多其他前端的模板，可以用两对花括号进行绑定Vue中的数据对象的属性 -->
{{ message }}
</div>
<script>
//第3步：创建模型数据
var modelData = {
message: 'Hello Vue!'
}
//第4步: 创建vue对象
var app = new Vue({ // 创建Vue对象。Vue的核心对象。
el: '#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
data: modelData// data: 是Vue对象中绑定的数据模型
});
</script>
</body>
</html>
- 上一篇：为什么要用VueJS
- 下一篇：VUE实例的属性和一些基础的指令
精品好课
React是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习React高薪就...
React和VUE是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React和VUE并应用到实战，教你如何解决内存泄漏，常用库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习Re...
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程，本课程教你如何快速学会VUE和uni-app并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己...
jquery视频教程从入门到精通，课程主要包含：jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器，利用mp4转成m3u8格式的视频，并在移动端和PC端进行播放支持m3u8直播格式，兼容...
HTML5基础入门视频教程，教学思路清晰，简单易学必会。适合人群：创业者，只要会打字，对互联网编程感兴趣都可以学。课程概述：该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
VUE是目前最火的前端框架之一，就业薪资很高，本课程教您如何快速学会VUE+ES6并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习VUE高薪就...
React是前端最火的框架之一，就业薪资很高，本课程教您如何快速学会React并应用到实战，对正在工作当中或打算学习React高薪就业的你来说，那么这门课程便是你手中的葵花宝典。