认识Vuejs

Vue简介

Vue（读音/vju:/）。

Vue是一个渐进式的框架：

  • 渐进式意味着可以将Vue作为应用的一部分嵌入其中，带来丰富的交互体验。
  • Vue全家桶：Vue Core+Vue-router+Vuex可以满足更多的业务逻辑

Vue特性

Vue特点：

  • 数据驱动视图
  • 双向数据绑定

前置基础

学习Vue需要的基础：

  1. HTML
  2. CSS
  3. JavaScript

MVVM

MVVM（Model、View、ViewModel的缩写）。

MVVM是Vue实现数据驱动视图和双向数据绑定的和核心原理。

  • Model：表示当前页面渲染时所依赖的数据源
  • View：表示当前页面渲染的DOM结构
  • ViewModel：Vue实例，它是MVVM的核心。

Vuejs安装

安装方式：

方式一：CDN引入

1
2
3
4
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二：下载和引入

1
2
开发环境：https://vuejs.org/js/vue.js
生产环境：https://vuejs.org/js/vue.min.js

方式三：NPM安装

构建大型应用时，推荐使用NPM安装。

1
2
# 最新稳定版
$ npm install vue

Vue基本使用

基本使用步骤

  1. 引入vue.js脚本。

  2. 在页面中声明一个将要被Vue控制的DOM区域。

  3. 创建Vue实例对象。

    1
    2
    3
    4
    5
    6
    7
    8
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                username: 'zs'
            }
        })
    </script>

    其中，el属性使用css选择器指定页面区域。data属性指定数据源。

基本例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='app'> {{ username }} </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                username: 'zs'
            }
        })
    </script>

</body>
</html>