前言

Vue在目前来讲，是最主流的一种前端框架，使用Vue会更加便捷，不像JQuery或其他JS库，在我们使用Vue之前，需要到它的官网查看开发文档：https://cn.vuejs.org/guide/quick-start.html#with-build-tools

基础使用

我们首先需要建立一个div当作Vue的容器，创建好后，在script中实例化Vue对象，在Vue中必须定义el属性，data属性有点类似定义变量

<div id="app">
    {{msg.substring(0,2)}}
</div>

<script src="./js/vue_2.0.js"></script>
<script>
    const { createApp } = Vue
    const app = new Vue({
        el: "#app",
        data: {
            msg: "欢迎使用Vue",
        }
    });
</script>

在使用data定义变量的时候，也可以选择定义很多其他不同的类型
在div中使用变量时，也可以使用各种方法，例如substring()

<div id="app">
        <!-- 插值表达式 -->
        {{msg.substring(0,2)}}
        {{user.name}}
        {{user.msg}}
        <br>
        {{lists[0]}}
        {{lists}}
        <br>
        {{users}}
        {{users[0].name}} {{users[0].age}}
    </div>

    <script src="./js/vue_2.0.js"></script>
    <script>
        const { createApp } = Vue
        // 创建一个vue实例
        const app = new Vue({
            // 用来给vue创建一个作用域
            el: "#app",
            // data用来给Vue定义一些相关的数据
            data: {
                msg: "欢迎使用Vue",
                user: {
                    msg: "user msg",
                    name: "user name",
                },
                lists: ["BeiJing","ShangHai"],
                users: [{name:"小强",age:"25"},
                        {name:"小红",age:"21"}],
            },
        });

    </script>

插值闪烁

什么是插值闪烁？当我们的网速很慢，网页无法全部加载的时候，我们的变量就会显而易见的出现，显示为{{msg}}，那么我们该如何解决呢？在标签内使用v-text或者v-html属性来使用变量值

<div id="app">
    {{msg}}
    <!-- 下面的方式不会有插值闪烁 -->
    <h1 v-text="msg"></h1>
    <h1 v-html="aaa"></h1>
</div>

<script src="./js/vue_2.0.js"></script>
<script>
    const { createApp } = Vue
    const app = new Vue({
        el: "#app",
        data: {
            msg: "<em>欢迎使用Vue</em>",
            aaa: "<em>hello!!!</em>"
        }
    });
</script>

函数&事件

在标签中加入 v-on:click 属性，里面的值就是对应方法的名字
如下，方法名字可以写addAge，也可以写addAge()，带不带括号均可
可以直接使用@click来代替 v-on:click
在实例化对象中建立methods，里面写函数方法，可以使用changeAge(age) 可以代替这种写法subAge: function()
想要更改对象data中的值时，可以直接使用 this.值 来更改

基础运用

对年龄的增加、减少和直接改变（函数传参）

<div id="app">
    <h1>年龄：{{age}}</h1>
    <input type="button" value="通过vue事件改变年龄（每次+1）" v-on:click="addAge">
    <input type="button" value="通过vue事件改变年龄（每次-1）" @click="subAge">
    <input type="button" value="通过vue事件改变年龄" @click="changeAge(24)">
</div>

<script src="./js/vue_2.0.js"></script>
<script>
    const { createApp } = Vue
    const app = new Vue({
        el: "#app",
        data: {
            msg: "hello vue",
            age: 23
        },
        methods: {
            addAge: function() {
                // 想办法拿到data中的age属性，让他自增
                this.age++;
            },
            subAge: function() {
                this.age--;
            },
            changeAge(age) {
                this.age = age;
            }
        }
    });
</script>

订单增加减少

使用Vue函数来更改值更加简易了，不像JQuery或者Javascript需要get模型，然后更改值

<div id="app">
    <h1>数量：{{num}}</h1>
    <input type="button" value="点击-1" @click="subNum"></input>
    <input type="button" value="点击+1" @click="addNum"></input>
</div>

<script src="./js/vue_2.0.js"></script>
<script>
    const { createApp } = Vue
    const app = new Vue({
        el: "#app",
        data: {
            num: 0
        },
        methods: {
            addNum() {
                if(this.num >= 10) {
                    alert("你不可以继续加了");
                } else {
                    this.num++;
                }
            },
            subNum() {
                if(this.num >0) {
                    this.num--;
                } else {
                    alert("你不可以继续减了");
                }
            }
        }
    });
</script>