1.1什么是vue
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动。
vue的数据驱动是通过MVVM(Model-View-ViewModel)模式实现
MVVM主要包括3个部分:
- Model(数据部分,主要负责业务数据)
- View(视图部分,即DOM元素,负责视图处理)
- ViewModel(连接视图与数据的数据模组,负责监听Model或者View的修改)
1.2学习vue的优势
目前国内三大主流框架分三个:Angular、React、Vue,Vue继承了前两个框架的优势,并且代码简洁、上手容易、在市场上也得到重大的应用
优势所在:
- 轻量级:相对简单、直接,所以使用起来更加友好
- 数据绑定:数据双向绑定,即数据发生变化时,视图也就发生相应的变化,当时图发生变化时,数据也会随之同步变化
- 指令:包括内置指令与自定义指令,以“v”开头,作用于HTML。同时会提供一些特殊的特性,指令会给绑定的元素添加一些特殊的行为。常见的如:v-bind(动态绑定)、v-if(条件渲染)、v-for(列表渲染)
- 插件:作用与Vue框架的功能性拓展
1.3Vue开发环境
-
开发软件VScode(Visual Studio Code)
特点:轻巧便捷、语法高亮、自动缩进,代码补全、跨平台、丰富的插件功能
-
Vue下载
官网中下载,点我直达。具体下载点击
Get Start->installation
,有两个版本我们下载Development Version的就行,然后得到一个Vue.js的文件
1.4Vue基础使用
-
Vs code创建一个文件夹将下载好的Vue.js拖进文件夹,我们来进行基础的Vue.js的绑定使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./vue/vue.js"></script> </head> <body> <div id="app"> <!-- 使用{{}}插值表达式输出 --> <p>{{msg}}</p> </div> <script> var vm = new Vue({ el: '#app', //绑定id data:{ msg:'Hello node.js' } }) </script> </body> </html>