一、Vue概述

1、简介

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

官方文档：https://cn.vuejs.org/v2/guide/

参考文章：

https://www.jb51.net/list/list_269_1.htm

2、Vue安装

方式一：直接使用`<script>`引入

开发版本（包含完整的警告和调试模式）：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产版本（删除了警告，33.30KB min+gzip）：

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏；

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：

<script type="module">
    import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js'
</script>

下载到本地引入：

开发版本下载地址：https://cn.vuejs.org/js/vue.js

生产版本下载地址：https://cn.vuejs.org/js/vue.min.js

方式二：NPM

在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件；

# 最新稳定版
$ npm install vue

方式三：命令行工具 (CLI)

vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅 Vue CLI 的文档；

二、Vue初体验

1、简单数据渲染

代码演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">{
   {message}}Hello {
   {name}}！</div>
        <script src="js/vue.js"></script>
        <script>
            // 编程范式：声明式编程
            // 创建一个vue对象
            const app = new Vue({
                el: '#app', // 用于挂载要管理的元素
                data: { // 定义数据
                    message: 'Hello Vue！',
                    name: '訾博'
                }
            })
            // 响应式：数据发生变化，页面内容会自动跟着变化
            app.name = 'zibo';
            // 编程范式：命令式编程；
            // 原生js做法
            // 1、创建div元素，设置id属性；
            // 2、定义一个变量message；
            // 3、将message变量放在前面的div中显示；
        </script>
    </body>
</html>

截图：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70

运行结果：

2、Vue列表的展示

代码演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            {
   {message}}
            <ul>
                <!-- 每一次取一个元素赋值给item -->
                <!-- 元素循环的同时所在标签也进行循环 -->
                <li v-for="item in people">{
   {item}}</li>
            </ul>
        </div>
        <script src="../../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    message: "你好！",
                    people: ['大哥','二哥','三哥','四哥']
                }
            })
        </script>
    </body>
</html>

运行结果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1

3、计数器

代码演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            当前计数：{
   {counter}}
            <!-- 绑定事件：v-on -->
            <!-- 简单的表达式可以直接写里面执行 -->
            <!-- <button @click="counter++">+</button>
            <button @click="counter--">-</button> -->
            <button @click="add()">+</button>
            <button @click="remove()">-</button>
        </div>
        <script src="../../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    counter: 0
                },
                // 定义方法
                methods:{
                    add(){
                        // this表示当前对象
                        this.counter++;
                    },
                    remove(){
                        this.counter--;
                    }
                }
            })
        </script>
    </body>
</html>