Vue第一天学习笔记（后端适用）

Vue

1. Vue引言

Vue是一个渐进式的JavaScript框架（易用、高效、灵活）：让我们通过操作很少的DOM，甚至不需要操作页面中任何DOM元素，就很容易完成数据和视图的绑定。双向绑定（MVVM）。

注意：日后再使用Vue过程中页面不要再引入Jquery框架。

2. Vue入门

2.1 Vue下载

创建一个.html文件，然后通过如下方式引入Vue：

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

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.2 Vue入门应用

	<div id="app">
        {{ msg }}   {{ username }}  {{ pwd }}

        <br>
        <span>
            {{ username }}
            <h1>{{ msg }}</h1>
        </span>
    </div>

    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue ({
            el:"#app",	//element 用来给Vue实例定义一个作用范围
            data:{	//用来给Vue实例定义一些相关数据
                msg:"好好学习，天天向上",
                username:"hello vue",
                pwd:"12345",
            },
        });
    </script>

	<div id="app">
        <h3>{{ msg }}</h3>

        <h3>名称：{{ user.name }}  信息：{{ user.msg }}</h3>

        <h3>年龄：{{ age }}</h3>

        <h3>{{ lists[0] }}--{{ lists[1] }}--{{ lists[2] }}</h3>

        <h3>{{ users[0].name }}</h3>
    </div>

    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue ({
            el:"#app",
            data: {
                msg:"hello vue",
                user:{name:"Kaiii",msg:"好好学习"},
                age:23,
                lists:["学习","看书","编码"],
                users:[{name:"小白",age:18},{name:"小黑",age:20}],
            }
        });
    </script>

总结：

1. Vue实例（对象）中el属性：代表Vue的作用范围，日后在Vue的作用范围都可以使用Vue的语法。
2. Vue实例（对象）中data属性：用来给Vue实例绑定一些相关数据，绑定的数据可以通过{{变量名}}在Vue的作用范围内取出。
3. 在使用{{}}进行获取data中数据时，可以在{{}}中书写表达式，运算符，调用相关的方法，以及逻辑运算符。

	<div id="app">
        <span>{{ msg.toUpperCase() }}</span>
	</div>

4. el属性中可以书写任意的CSS选择器[Jquery选择器]，但是在使用Vue开发时推荐使用id选择器。

3. v-text和v-html

3.1 v-text

v-text：用来获取data中数据，将数据以文本的形式渲染到指定标签内部，类似于JavaScript中的innerText。

	<div id="app">
        <span>{{ message }}</span>

        <span v-text="message"></span>
    </div>

    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
              message:"努力"
            },
        });
    </script>

总结：

{{}}（插值表达式）和v-text获取数据的区别在于：

• 使用v-text取值会将标签中原有的数据覆盖，使用插值表达式不会覆盖标签中原有的数据。
• 使用v-text可以避免在网络环境较差的情况下出现插值闪烁，使用插值表达式在网络较慢的情况下会先显示表达式本身。

3.2 v-html

v-html：用来获取data中数据，将数据中含有的html标签先解析再渲染到指定标签的内部类似于JavaScript中的innerHTML。

	<div id="app">
        <span>{{ message }}</span>

        <br>
        <span v-text="message"></span>

        <br>
        <span v-html="message"></span>
    </div>

    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
              message:"<a href=''>点我</a>"
            },
        });
    </script>

运行结果：

4. Vue中的事件绑定（v-on）

4.1 绑定事件语法

	<!--
        1.页面中提供按钮
        2.给按钮绑定单击事件
        3.在单击事件中修改年龄的值，同时渲染页面

    -->
    <div id="app">
        <h2>{{ message }}</h2>
        <h2 v-text="message"></h2>
        <h2>年龄：{{ age }}</h2>
        <br>

        <input type="button" value="点我改变年龄" v-on:click="changeage">
    </div>

    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:"hello 今天也是学习的一天",
                age:23,
            },
            methods:{    //methods:用来定义Vue中的事件
                changeage:function () {
                    alert('点击触发');
                }
            }
        });
    </script>

总结：
事件
事件源：发生事件的dom元素。
事件：发生特定的动作 click。
监听器：发生特定动作之后的事件处理程序，通常是js中的函数。

1. 在Vue中绑定事件是通过v-on指令完成的，v-on:事件名，如 v-on:click。
2. 在v-on:事件名的赋值语句中是当前事件触发调用的函数名。
3. 在Vue中事件的函数统一定义在Vue实例的methods属性中.。
4. 在Vue定义的事件中this指的就是当前的Vue实例，日后可以在事件中通过使用this获取Vue实例中的相关数据。

	methods:{    //method:用来定义Vue中的事件
                changeage:function () {
                    //在函数中获取Vue实例中data的数据
                    //在事件函数中this就是Vue实例
                    //console.log(this);
                    //this.age = this.age + 1;
                    this.age++;
                }
            }

4.2 Vue中事件的简化

	<div id="app">
        <h2>{{ age }}</h2>

        <input type="button" value="通过v-on事件修改年龄每次+1" v-on:click="changeage">

        <input type="button" value="通过@绑定事件修改年龄每次-1" @click="editage">
    </div>

    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                age:23,
            },
            methods:{
                changeage:function () {
                    this.age++;
                },
                editage:function () {
                    this.age--;
                }
            }
        });
    </script>

总结：
日后在Vue中绑定事件时可以通过@符号形式简化v-on的事件绑定。

4.3 Vue事件函数两种写法

	<div id="app">
        <span>{{ count }}</span>
        <input type="button" value="改变count的值" @click="changecount">
    </div>
    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                count:1,
            },
            methods:{
                /*changecount:function () {
                    this.count++;
                }*/
                changecount(){
                    this.count++;
                }
            }
        });
    </script>

总结：
在Vue中事件定义存在两种写法：

1. 函数名:function(){}
2. 函数名(){}，更推荐这种写法。

4.4 Vue事件参数传递

	<div id="app">
        <span>{{ count }}</span>
        <input type="button" value="改变count为指定的值" @click="changecount(23,'Kaiii')">
    </div>
    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                count:1,
            },
            methods:{
                changecount(count,name){
                    this.count = count;
                    alert(name);
                }
            }
        });
    </script>

总结：
在使用事件时，可以直接在事件调用处给事件进行参数传递，在事件定义处通过定义对应变量接受传递的参数。

4.5 小案例

	<div id="app">
        <input type="button" value="-" @click="editcount">
        <h2>{{ count }}</h2>
        <input type="button" value="+" @click="addcount">
    </div>
    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                count:1,
            },
            methods:{
                editcount(){
                    if(this.count > 1){
                        this.count--;
                    }else{
                        alert("不能再少了");
                    }
                },
                addcount(){
                    if(this.count < 10){
                        this.count++;
                    }else{
                        alert("每个人不能超过10件");
                    }
                }
            }
        });
    </script>

5. v-show,v-if和v-bind

5.1 v-show

v-show：用来控制页面中的标签元素是否展示，底层控制标签display属性。

	<div id="app">
        <!--
            v-show用来控制标签是展示还是隐藏,底层是通过控制元素的display属性
        -->
        <h2 v-show="false">好好学习，天天向上</h2>
        <h2 v-show="show">好好学习，天天向上</h2>

        <input type="button" value="点我显示隐藏" @click="showHide">
    </div>
    <!-- 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                show:true,
            },
            methods:{
                showHide(){
                    this.show = !this.show;
                }
            }
        });
    </script>

总结：

1. 在使用v-show时可以直接书写boolean值控制元素展示，也可以通过变量控制标签展示和隐藏。
2. 在v-show中可以通过boolean表达式控制标签的展示和隐藏。

5.2 v-if

v-if：用来控制页面中的标签元素是否展示，底层是通过对dom树节点进行添加和删除来控制展示和隐藏。

5.3 v-bind

v-bind：用来给页面中标签元素绑定相应的属性。
简化写法：v-bind:属性名====> :属性名。