1.1什么是vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。

vue的数据驱动是通过MVVM(Model-View-ViewModel)模式实现

Mvvm

MVVM主要包括3个部分：

  1. Model(数据部分，主要负责业务数据)
  2. View(视图部分，即DOM元素，负责视图处理)
  3. ViewModel(连接视图与数据的数据模组，负责监听Model或者View的修改)

1.2学习vue的优势

目前国内三大主流框架分三个：Angular、React、Vue，Vue继承了前两个框架的优势，并且代码简洁、上手容易、在市场上也得到重大的应用

优势所在：

  1. 轻量级：相对简单、直接，所以使用起来更加友好
  2. 数据绑定：数据双向绑定，即数据发生变化时，视图也就发生相应的变化，当时图发生变化时，数据也会随之同步变化
  3. 指令：包括内置指令与自定义指令，以“v”开头，作用于HTML。同时会提供一些特殊的特性，指令会给绑定的元素添加一些特殊的行为。常见的如：v-bind(动态绑定)、v-if(条件渲染)、v-for(列表渲染)
  4. 插件：作用与Vue框架的功能性拓展

1.3Vue开发环境

  1. 开发软件VScode(Visual Studio Code)

    vscode

    特点：轻巧便捷、语法高亮、自动缩进，代码补全、跨平台、丰富的插件功能

  2. 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>

    Vue1