Vue基础与指令

目录

• VUE基础
  • VUE介绍
  • Vue导入与挂载点
  • Vue变量
  • 事件
  • 文本指令
  • 过滤器
  • 事件指令
  • 属性指令
  • 表单指令
  • 斗篷指令
  • 条件指令
  • 循环指令
  • 分隔符（修改插值表达式）
  • 计算属性成员
  • 属性的监听

VUE基础

VUE介绍

Vue是渐进式JavaScript框架，通过对框架的了解与运用程度，来决定其在整个项目中的应用范围最终可以独立以框架方式来完成整个web前端项目。

Vue是三大主流框架（Angular React Vue）之一，具备先进的前端设计模式MVVM，可以完全脱离服务器端，以前端代码复用的方式渲染整个页面（组件化开发）

特点：

单页面web应用

数据驱动

数据的双向绑定

虚拟DOM

导入：

下载或云端白嫖
（）

Vue导入与挂载点

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

<div id="app">
    <hr>
</div>

<script>
	new Vue({
        el:'#app',  //CSS选择器语法选择el挂载点
    })
</script>

Vue变量

{{ 变量名 }}

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

<div id="main">
    <p>{{ msg }}</p>
    <p>{{ info }}</p>
</div>

// 实例成员中的data是为vue页面模板通过数据变量的
<script>
    let app = new Vue({
        el: '#app',
        data: {
            a: 1,
            msg: 'abc',
            // b_msg: bpp.msg //报错，因为bpp.msg在下面才有
        }
    });

    let bpp = new Vue({
        el: '#bpp',
        data: {
            a: 2,
            msg: 'efg',
            a_msg: app.msg //没问题
        }
    });

    console.log(app.msg);// 'abc'
    console.log(bpp.msg);// 'efg'
</script>
   
//在两个不同的Vue内部可以有相同的变量
//实例内部变量的调用需要在定义之后
    

事件

v-on:事件 >>(简写)>> @事件

function func1(){} >>(简写)>> func1(){}

<style>
    body {
        /*页面内容不允许被选中*/
        user-select: none;
    }
    .p1:hover {
        cursor: pointer;
        color: green;
    }
</style>

<div id="app">
    <p v-on:click="func1">{{ msg }}</p>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg:'点我呀'
        },
        methods:{
            func1(){
                this.msg='oh yeah'
            }
        }

    });

</script>

文本指令

v-text

v-html

<div id="app">
    <!-- 1、插值表达式，能完成变量渲染，变量基础运算，变量方法调用，不能完成复杂运算(一步解决不了的，不能出现；) -->
    <p>{{ msg }}</p>
    <p>{{ msg + '拼接内容' }}</p>
    <p>{{ msg[1] }}</p>
    <p>{{ msg.slice(2, 4) }}</p>

    <hr>

    <!--2、v-text：将所有内容做文本渲染 -->
    <p v-text="msg + '拼接内容'"></p>

    <!--3、v-html：可以解析html语法标签的文本 -->
    <!-- `${}`相当于python中的%号占位符format语法        -->
    <p v-text="'<b>' + msg + '</b>'"></p>
    <p v-html="'<b>' + msg + '</b>'"></p>


    <p v-text="`<b>${msg}</b>`"></p>
    <p v-html="`<b>${msg}</b>`"></p>
</div>

过滤器

{{ 变量 | 过滤器 }}

<div id="app">
    <p>{{ num | filter0 }}<p>
    
    <!--过滤器可以串联多个-->
    <p>{{ num | filter0 | filter1 }}</p>
    
    <!--可以同时对多个变量进行过滤，变量用，分割，过滤器还可以额外传入参数辅助过滤-->
    <!--过滤器方法接收所有传入的参数，按传入的位置进行接收-->
    <p>{{ num | filter2(num1,num2)}}</p>
</div>


<script>
    let app = new Vue({
        el: '#app',
        data: {
            num:1,
            num1:2,
            num2:3
        },
        filters:{
            filter0(num){
                return num*100
            },
            filter1(num){
                return num*10
            },
            filter2(num,num1,num2){
                return num+num1+num2
            }

        }

    });
</script>

事件指令

<div id="app">
    <button @click="func">func {{ a }}</button>

    <!--  可以加括号传参  -->
    <button @click="func1(b)">func1 {{ a }}</button>

    <!--  如果不加括号，默认传当前事件作为参数  -->
    <button @click="func2">func2 {{ a }}</button>

    <!--  如果想自己传参，还想传事件，使用$event  -->
    <button @click="func3(b,$event)">func3 {{ a }}</button>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            a: '点我呀',
            b: '🔞'
        },
        methods: {
            func() {
                this.a = 'ohyeah'
            },
            func1(symbol) {
                this.a = symbol
            },
            func2(event, v) {
                console.log(event);
                console.log(v) //第二个参数为空
            },
            func3(v,event){
                console.log(v);
                console.log(event)
            }
        }
    });
</script>

属性指令

v-bind:属性名='变量' >>(简写)>>:属性名='变量名'

<style>
    .box {
        width: 150px;
        height: 150px;
    }

    .red {
        background-color: red;
    }

    .blue {
        background-color: blue;
    }

    .circle {
        border-radius: 50%;
    }
</style>

<div id="app">
    <div :style="v2"></div> 
    
	<!--{中可以用多个变量控制多个属性细节}-->
    <div :style="{width:'200px',height:'150px',backgroundColor:'orange'}"></div>
    
    <!--class可以写两份，一份写死，一份有vue控制-->
    <div class='box' :class="v1"></div>

    <!--{}控制类名，key为类名，key对应的值为bool类型，决定该类名是否起作用-->
    <div @mouseover='changeRed' @mouseout='changeBlue' :class="{blue:is_blue,red:is_red,circle:true,box:true}"></div>
    
    <!--[]控制多个类名-->
    <div :class="[box,v1]"></div>

</div>


<script>
    let app = new Vue({
        el: '#app',
        data: {
            box:'box',
            v1: 'red',
            v2: {width: '200px', height: '150px', backgroundColor: 'darkcyan'},
            is_blue: 0,
            is_red: 1
        },
        methods: {
            changeRed() {
                this.is_blue = 0;
                this.is_red = 1
            },
            changeBlue() {
                this.is_blue = 1;
                this.is_red = 0
            }
        }
    });
</script>

表单指令

v-model="变量"，v-model绑定的变量控制的是表单元素的value值

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>表单指令</title>
</head>
<body>
    <div id="app">
        <form action="">
            <!--属性指令：v-model="变量"，v-model绑定的变量控制的是表单元素的value值 -->

            <!--普通表单元素，用v-model直接绑定变量控制value值-->
            <input type="text" v-model="v1">
            <input type="text" v-model="v1">
            <textarea name="" id="" cols="30" rows="10" v-model="v1"></textarea>
            <p>{{ v1 }}</p>
            <hr>

            <!--单一复选框-->
            同意：
            <input type="checkbox" name="agree" v-model="v2">
            <hr>
            <!--多个复选框-->
            男:<input type="checkbox" name="hobbies" value="male" v-model="v3">
            女:<input type="checkbox" name="hobbies" value="female" v-model="v3">
            哇塞:<input type="checkbox" name="hobbies" value="wow" v-model="v3">
            <p>{{ v3 }}</p>
            <hr>

            <!--单选框-->
            中午吃啥：<br>
            肉肉:<input  name="food" type="radio" value="rourou" v-model="v4">
            饭饭:<input name="food" type="radio" value="fanfan" v-model="v4">
            <p>{{ v4 }}</p>
            <hr>
            <button type="submit">提交</button>
        </form>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            v1: '',
            v2: false,  // false
            v3: ['male', 'wow'],
            v4: 'rourou',
        }
    })
</script>
</html>

斗篷指令

避免页面闪烁

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>斗篷指令</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <p>{{ msg }}</p>
        <p>{{ msg }}</p>
        <p>{{ msg }}</p>
        <p>{{ msg }}</p>
        <p>{{ msg }}</p>
        <p>{{ msg }}</p>
        <p>{{ msg }}</p>
        <p>{{ msg }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 12345
        }
    })
</script>
</html>

条件指令

v-if="true|false"，为假时，在页面上不渲染，可以隐藏标签中的信息

v-show="true|false"，为假时，在页面中用display:none渲染，虽然没展示，但是任在页面结构中

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>条件指令案例</title>
    <style>
        .box {
            width: 400px;
            height: 200px;
        }

        .r {
            background-color: red
        }

        .y {
            background-color: yellow
        }

        .g {
            background-color: green
        }

        .action {
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="app">
    <!--条件指令：
v-if="true|false"，为假时，在页面上不渲染，可以隐藏标签中的信息
v-show="true|false"，为假时，在页面中用display:none渲染，虽然没展示，但是任在页面结构中
-->
    <p v-if="false">if指令</p>
    <p v-show="false">show指令</p>

    <!-- v-if是一个家族
    v-if
    v-else-if
    v-else
    1、上分支成立，下分支会被屏蔽
    2、else分支只要在所有上分支都为假时显示，且不需要条件
    -->
    <p v-if="v1 === '1'">if分支</p>
    <p v-else-if="v1 === '2'">elif分支1</p>
    <p v-else-if="v1 === '3'">elif分支2</p>
    <p v-else>else分支</p>
    <hr>
    <p>
        <button @click="changeC('red')" :class="{action: c === 'red'}">红</button>
        <!--<button @click="changeC('red')" :class="c === 'red'? 'action': ''">红</button>-->
        <button @click="changeC('yellow')" :class="{action: c === 'yellow'}">黄</button>
        <button @click="changeC('green')" :class="{action: c === 'green'}">绿</button>
    </p>
    <div class="wrap">
        <div class="box r" v-if="c === 'red'"></div>
        <div class="box y" v-else-if="c === 'yellow'"></div>
        <div class="box g" v-else></div>
    </div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    // sessionStorage的生命周期与页面标签绑定，当标签页被关闭，数据库被清空
    // localStorage是前台永久数据库

    // sessionStorage.name = '123';
    // localStorage.name = 'xyz';
    // localStorage.clear();


    new Vue({
        el: '#app',
        data: {
            // 页面重新刷新加载，可以从数据库中获取缓存，如果没有，再取默认值
            // c: 'red',
            v1:'0',
            c: localStorage.c ? localStorage.c : 'red',
        },
        methods: {
            changeC(color) {
                this.c = color;
                // 每一次改变c的值，将值同步到前台数据库
                localStorage.c = color;  // 存
            }
        }
    })
</script>
</html>

循环指令

​ v-for="成员 in 容器"

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <!--循环指令：
            v-for=""
            语法：
            v-for="成员 in 容器"
        -->
        <!--1、字符串循环渲染: 可以只遍历值，也可以遍历值与索引-->
        <p>
            <span v-for="v in title">{{ v }}</span>
        </p>

        <p>
            <span v-for="(v, i) in title">
                <span v-if="i != 0"> | </span>
                {{ v }}
            </span>
        </p>

        <!--2、数组循环渲染: 可以只遍历值，也可以遍历值与索引-->
        <div>
            <p v-for="(v, i) in arr">第{{ i }}元素：{{ v }}</p>
        </div>

        <!--3、对象循环渲染: 可以只遍历值，也可以遍历值与键，还可以遍历值、键与索引-->
        <div>
            <p v-for="v in people">{{ v }}</p>
        </div>
        <div>
            <p v-for="(v, k) in people">{{ k }}:{{ v }}</p>
        </div>
        <div>
            <p v-for="(v, k, i) in people">{{ i }}-{{ k }}:{{ v }}</p>
        </div>
        <br>

        <div>
            <div v-for="(stu, i) in stus">
                <hr v-if="i != 0">
                <p v-for="(v, k) in stu">{{ k }}:{{ v }}</p>
            </div>
        </div>

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            title: '循环指令',
            arr: [1, 4, 2, 5, 3],
            people: {
                name: '兔子',
                color: '粉白',
                price: 6.66,
            },
            stus: [
                {
                    name: "Bob",
                    age: 18
                },
                {
                    name: "Tom",
                    age: 17
                },
                {
                    name: "Jerry",
                    age: 19
                }
            ]
        }
    })
    
    // 数组操作万能方法，可以完成增删改
    let arr = [1, 2, 3];
    // 参数：开始索引，操作长度，操作的结果们
    arr.splice(2, 0, 100);
    arr.splice(1, 1);
    console.log(arr);
</script>
</html>

分隔符（修改插值表达式）

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>分隔符</title>
</head>
<body>
    <div id="app">
        <p>{{ num }}</p>
        <!--<p>{[ num ]}</p>-->
        <p>{ num ]}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 100
        },
        // 用来修改插值表达式符号
        // delimiters: ['{[', ']}'],
        delimiters: ['{', ']}'],
    })
</script>
</html>

计算属性成员

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="v1">
        +
        <input type="text" v-model="v2">
        =
        <button>{{ res }}</button>

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            v1: '',
            v2: '',
            // res: '结果',
        },
        // 1、computed中定义的是方法属性，data中定义的也是属性，所以不需要重复定义(省略data中的)
        // 2、方法属性的值来源于绑定的方法的返回值
        // 3、方法属性必须在页面中渲染后，绑定的方法才会被启用(调用)
        // 4、方法中出现的所有变量都会被监听，任何变量发生值更新都会调用一次绑定的方法，重新更新一下方法属性的值
        // 5、方法属性值不能手动设置，必须通过绑定的方法进行设置
        computed: {
            res () {
                console.log('该方法被调用了');
                return this.v1 && this.v2 ? +this.v1 + +this.v2 : '结果';
            }
        }
    })
</script>
<script>
    console.log(1 + '2');
    console.log(1 - '2');
    console.log(+'2');
</script>
</html>

属性的监听

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>属性的监听</title>
</head>
<body>
    <div id="app">
        <p>
            姓名：<input type="text" v-model="full_name">
        </p>
        <p>
            姓：<span>{{ first_name }}</span>
        </p>
        <p>
            名：<span>{{ last_name }}</span>
        </p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            full_name: '',
            first_name: '',
            last_name: '',
        },
        watch: {
            // 1、watch中给已有的属性设置监听方法
            // 2、监听的属性值一旦发生更新，就会调用监听方法，在方法中完成相应逻辑
            // 3、监听方法不需要返回值(返回值只有主动结束方法的作用)
            full_name() {
                if (this.full_name.length === 2) {
                    k_v_arr = this.full_name.split('');
                    this.first_name = k_v_arr[0];
                    this.last_name = k_v_arr[1];
                }
            }
        }
    })
</script>
</html>