第一章：Vue基础

一、Vue入门

1.需要掌握HTML,CSS,JavaScript,AJAX基础知识。

2.选用VSCode作为主要开发工具。

二、Vue简介

1.Vue是一套用于前端开发的JavaScript框架。

2.使用特殊语法简化Dom操作。

3.具有响应式数据驱动的特点。

三、第一个Vue程序实例

1.导入开发版本的Vue.js。

2.创建Vue实例对象，设置el属性和data属性。

3.使用简洁的模板语法把数据渲染到页面上。

    <div id="app">
        {{ message }}
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Vue简单模板实例",
            }
        })
    </script>

四、el:挂载点 data:数据对象

1. el 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例,可以设置除html和body以外的双标签。

2.Vue实例的作用范围：Vue会管理el选项命中元素及其内部的后代元素。

3.可以使用其他选择器，例如id,div,h2...但是，建议使用id选择器。

4.Vue中用到的数据定义在data中。

5.data中可以写复杂类型的数据。

6.渲染复杂类型数据时，遵守js的语法即可。

第二章：Vue本地应用

一、本地应用介绍

本章的核心是如何运用一些Vue的方式去开发常见的网页效果，不同于早期基于DOM元素的Web开发，获取元素，操纵他们，在Vue中，我们使用一系列Vue指令来制作。

二、v-text指令

1.导入开发版本的Vue.js,创建Vue实例对象，添加被挂载的对象app，然后创建一个Vue实例，通过el属性设置挂载的app,在data中添加数据message并赋值,在div内部用v-text指令绑定。

2.测试添加其他数据绑定info,测试一下字符串拼接‘！’。

    <div id="app">
        <h2 v-text="message+'!'">棒！</h2>
        <h2 v-text="info+'!'">棒！</h2>
        <h2>{{ message+"!" }}棒！</h2>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "宁波",
                info: "杭州"
            }
        })
    </script>想·

注意：使用v-text指令时，无论标签内部有什么内容，都不会显示，如果想要部分绑定可使用双大括号，叫做插值表达式，就只会替换大括号内部的值。

三、v-html指令

v-html指令的作用是：设置元素的innerHTML。内容中有html结构会被解析为标签。如果设置的值是普通文本，功能相当于v-text指令，如果设置的html结构，就需要用v-html来解析。

实例操作：

1.导入开发版本的Vue.js，创建一个Vue被el挂载的实例对象app。设置app属性，在data添加数据，在div内部用v-html绑定。

2.设置v-text指令测试，加一个v-html指令对比，内容输入文本，测试结果。

3.设置一个html结构的 a 标签，设置href属性，对比渲染效果。

    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                //content:"zjvtit"，设置为普通文本属性。
                content: "<a href='http://www.zjvtit.edu.cn'>浙交院官网</a>"
            }
        })
    </script>

总结：实际开发中，有html指令并且要渲染，就用v-html指令，如果只是文本，用v-text就可以满足。

四、v-on指令

作用：为元素绑定事件。比如点击，按下键盘，滚动鼠标。

1.准备一个被Vue实例挂载的标签作为容器，在内部添加一个按钮

    <div id="app">
        <input type="button" value="按钮显示名称" v-on:事件名="fangfa">
    </div>

    var app = new Vue({
        el: "#app",
        methods:{
         fangfa:function:(){
         }
        }
    })

2.测试多种事件名例如：单击:click ，双击:dblclick ，鼠标移入:monseenter 方法在methods属性中定义属性。Vue提供一种更简单的写法，支持把v-on:替换为@。

3.设置一个方法名叫做“tanchuang”，在methods属性中绑定一个弹窗逻辑alert（），测试结果。再测试一下@简写和双击事件

4.通this.关键字点出定义在data中的数据，在data属性中设置一个数据food，赋予数据“铁锅炖大鹅”，并在methods添加一个方法“changefood”，使用this.food就可以拿到food里的数据，然后定义内容+="真香!"。

    <div id="app">
        <input type="button" value="v-on指令" @click="tanchuang">
        <input type="button" value="v-on简写" @click="tanchuang">
        <input type="button" value="双击事件" @dblclick="tanchuang">
        <h2 @click="changefood">{{ food }}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                food: "铁锅炖大鹅"
            },
            methods: {
                tanchuang: function () {
                    alert("弹窗hhh");
                },
                changefood: function () {
                    this.food += "真香！"
                }
            },
        })
    </script>

小提示：methods与el，data是平级的。

五、计数器案例

一个计数器的网页效果，通过加减号实现数字的加减，并设置一个数字限度。

重要实现步骤

1.为两个按钮绑定点击事件，语法为@click,方法语法定义在methods：比如add,sub。使用v-text将num 设置在span标签内部，使用简写方式，两个大括号的方法绑定，data中定义数据：比如num。

2.加减限度逻辑设置：使用this.关键字控制data中数据，添加一个if，else判断语句设置逻辑，在界限以内实现加减逻辑，超过则有弹窗提示。

    <div id="app">
        <div class="input-num">
            <button @click="sub">
                -
            </button>
            <span>{{ num }}</span>
            <button @click="add">
                +
            </button>
        </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                num: 1
            },
            methods: {
                add: function () {
                    if (this.num < 10) {
                        this.num++;
                    } else {
                        alert('别点啦，最大啦！');
                    }
                },
                sub: function () {
                    if (this.num > 0) {
                        this.num--;
                    } else {
                        alert('别点啦，最小啦！');
                    }
                }
            }
        });
    </script>

重点：v-on指令作用是绑定时间，简写为@；data中数据使用this.关键字获取。

六、v-show指令

根据表达值的真假，切换元素的显示和隐藏。

重要逻辑步骤

1.设置一张图片的显示状态：使用img标签导入一张图片，再添加一个v-show指令，指令后面设置的值是绑定在data属性中的isShow数据，这个绑定的数据的优点是可响应式的。

2.导入开发版本的Vue代码，准备好一个被挂载的div，内部有一个图片，在data属性中设置一个isShow数据，默认值为false

3.为了能够改变它，在methods中设置一个方法changeisShow，逻辑也十分简单 ! this.isShow，!的目的是取反，能够切换布尔值，为了方便操纵这个方法，将它绑定到一个按钮上。点击按钮就可以切换图片的显示状态。

4.最后测试一下表达式，用一个数字进行限制，在data中设置一个数据age：17，在添加一张图片，在v-show后面跟的条件设置为age>=18，判定不符合，图片不显示。

5.为了使年龄更够有所变化，设置两个加减方法绑定在两个按钮上，实现控制age大小。

    <div id="app">
        <input type="button" value="切换显示"  @click="changeisshow">
        <input type="button" value="加年龄"  @click="addage">
        <input type="button" value="减年龄"  @click="subage">
        <img v-show="isShow" src="Godzilla.jpg" width="480" height="270" >
        <img v-show="age>=18" src="Godzilla.jpg" width="480" height ="270" >
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            isShow:false, 
            age:17
        },
        methods:{
            changeisshow:function(){
                this.isShow = !this.isShow;
            },
            addage:function(){
                this.age++;
            },
            subage:function(){
                this.age--;
            }
        },
    })
</script>

重点总结：v-show指令作用是根据真假值切换元素的显示状态，指令后面的内容都会解析为布尔值。

七、v-if指令

根据表达式的真假，切换元素的显示（操纵dom元素）

小白从零学 Vue