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