Vue基础

Posted 2020-11-22 kangwy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue基础相关的知识，希望对你有一定的参考价值。

Vue基础

渐进式Javascript框架

通过对框架的了解与运用程度,来决定其在整个项目的应用范围,最终可以独立的以框架方式完成整个web前端项目.

1.什么是Vue

可以独立的完成前后端分离式web项目的javascript框架

2.为什么学习Vue

三大主流框架: Angular React Vue
先进的前端设计模式: MVVM
可以完全脱离服务端,以前端代码复用的方式渲染整个页面: 组件化开发

3.特点

单页面web应用
数据驱动
数据的双向绑定
虚拟DOM

4.如何使用Vue

去百度官网并且下载

<div id='app'>
    {{ }}
</div>
<script src='js/vue.min.js'>
    new Vue({
        el: '#app'
    })
</script>

# 1.el为挂载点, 采用css3选择器语法与页面进行绑定,决定该vue对象控制的页面范围
# 2.挂载点只会匹配第一个匹配到的结果,所以一般采用id选择器
# 3.但是html与body标签不可以作为挂载点

5.vue变量

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

    </div>

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


</body>
<script src="vue.min.js"></script>

// data里面是为vue页面模板通过数据变量的.
<script>
    let app = new Vue({
        el: '#app',
        data: {
            msg: 'message',
            info: '变量信息'
        }
    });

    let main = new Vue({
        el: '#main',
        data: {
            msg: '傻逼',
            info: '脑残'
        }
    });
    // 这种方式也可以调用
    console.log(app.info);
    console.log(main.info);
    
    // 创建vue实例(new Vue) 传进去的字典(对象)的key值, 称之为实例成员(变量)
    // 访问实例成员,用vue实例.$成员名, eg: app.$el
    console.log(app.$el);
    console.log(app.$data);

    console.log(app.$data.info);
</script>

6.Vue事件

<div id="app">
        <p class="p1" v-on:click="fn">这是一个段落，被点击了{{ count }}下</p>
        <p class="p2" v-on:mouseover="overAction" v-on:mouseout="outAction" >该便签被{{ action }}</p>

        <div v-on:mouseover="overAction" v-on:mouseout="outAction">div被{{ action }}</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            count: 0,
            action: '渲染',
            // fn: function () {
            //     // console.log(app.count);
            //     // app.count ++
            //     console.log(this);  // this不是该vue实例对象，是顶级Window对象
            // }
        },
        // methods就是为vue实例提供事件函数的
        methods: {
            fn: function () {
                // console.log(app.count);
                // app.count ++;
                // console.log(this);  // this代表当前该vue实例对象
                this.count ++
            },
            overAction: function () {
                this.action = '悬浮'
            },
            outAction: function () {
                this.action = '离开'
            }
        }
    });

7.js的对象

  // 1.js中没有字典，只要对象类型，可以把对象当做字典来使用
    // 2.key本质是属性名，所以都是字符串类型（可以出现1，true），其实都是省略引号的字符串

    let sex = '男';
    let dic = {
        'name': 'Owen',
        1: 100,
        true: 12345,
        age: 18,
        // sex: 'sex',
        sex,
    };
    console.log(dic['name']);
    console.log(dic['1']);
    console.log(dic['true']);
    console.log(dic['age']);
    console.log(dic.sex);

    dic.price = 3.5;
    console.log(dic.price);

    // 声明类创建对象，类可以实例化n个对象，哪个对象调用，this就代表谁
    function People(name, age) {
        this.name = name;
        this.age = age;
        this.eat = function () {
            console.log(this.name + '在吃饭');
            return 123
        }
    }
    let p1 = new People('Owen', 17.5);
    console.log(p1.name);
    let res = p1.eat();
    console.log(res);

    // 直接声明对象，{}内的key都属于当前对象的
    // {}中的方法通常会简写
    let stu1 = {
        name: '张三',
        age: 18,
        // eat: function () {
        //     console.log(this.name + '在吃饭');
        // }
        eat () {
            console.log(this.name + '在吃饭');
        }
    };
    stu1.eat()

    // 总结：
    // 1.{}中直接写一个变量：key与value是同名，value有该名变量提供值
    // 2.es5下，所有的函数都可以作为类，类可以new声明对象，在函数中用 this.资源 为声明的对象提供资源
    // 3.{}中出现的函数叫方法，方法可以简写 { fn: function(){} } => { fn(){} }
</script>

8.文本指令

<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语法标签的文本 -->
        <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>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '文本信息'
        }
    })
</script>

9.vue过滤器

 <div id="app">
        <!-- 默认将msg作为参数传给filterFn -->
        <p>{{ msg | filterFn }}</p>

        <!--过滤器串联-->
        <p>{{ num | f1 | f2 }}</p>

        <!--可以同时对多个变量进行过滤，变量用，分割，过滤器还可以额外传入参数辅助过滤-->
        <!--过滤器方法接收所有传入的参数，按传入的位置进行接收-->
        <p>{{ msg, num | f3(666, '好的') }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '文本内容',
            num: 1
        },
        filters: {
            filterFn(v1, v2) {
                // console.log(v1);
                // console.log(v2);
                return v1;
            },
            f1(v1) {
                return v1 * 100;
            },
            f2(v1) {
                return v1 * 100;
            },
            f3(v1, v2, v3, v4) {
                console.log(v1);
                console.log(v2);
                console.log(v3);
                console.log(v4);
            }
        }
    })

10.事件的指令

<div id="app">
        <!--事件指令：v-on:事件名="事件函数"  -->
        <!--简写：@事件名="事件函数"  -->
        <p v-on:click="f1">被点击了{{ count }}下</p>
        <hr>
        <p @click="f2">{{ p2 }}</p>
        <hr>
        <!--绑定的事件函数可以添加()，添加括号就代表要传递参数-->
        <ul>
            <li @click="f3(100)">{{ arr[0] }}</li>
            <li @click="f3(200)">{{ arr[1] }}</li>
            <li @click="f3(300)">{{ arr[2] }}</li>
        </ul>
        <ul>
            <li @click="f4(1)">{{ arr[0] }}</li>
            <li @click="f4(2)">{{ arr[1] }}</li>
            <li @click="f4(0)">{{ arr[2] }}</li>
        </ul>
        <hr>
        <!--绑定的事件函数如果没有传递参数，默认传入 事件对象 -->
        <div class="box" @click="f5"></div>
        <hr>
        <!--事件函数一旦添加传参()，系统就不再传递任何参数，需要事件对象时，可以手动传入 $event -->
        <div class="box" @click="f6(10, $event)"></div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            count: 0,
            p2: '第二个p',
            arr: [1, 2, 3],
        },
        methods: {
            f1() {
                this.count ++
            },
            f2() {
                console.log(this.p2)
            },
            f3(num) {
                console.log(num);
            },
            f4(index) {
                console.log(this.arr[index]);
            },
            f5(ev, b) {
                console.log(ev);
                console.log(b);
            },
            f6(num, ev) {
                console.log(num);
                console.log(ev);
            }
        },
    })

11.属性指令

<head>
    <meta charset="UTF-8">
    <title>属性指令</title>
    <style>
        .b1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box1 {
            width: 150px;
            height: 150px;
            background-color: darkturquoise;
            transition: .3s;
        }
        .box2 {
            width: 300px;
            height: 100px;
            background-color: darkgoldenrod;
            transition: .3s;
        }

        .circle {
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--1.下方的class、id、title、abc等是div标签的属性，属性指令就是控制它们的-->
        <div class="b1" id="b1" v-bind:title="title" :abc="xyz"></div>
        <!--2.属性指令：v-bind:属性名="变量"，简写方式 :属性名="变量" -->

        <!--3.属性指令操作 style 属性-->
        <div style="width: 200px;height: 200px;background-color: greenyellow"></div>
        <!-- 通常：变量值为字典 -->
        <div :style="mys1"></div>
        <!-- 了解：{中可以用多个变量控制多个属性细节} -->
        <div :style="{width: w,height: '200px',backgroundColor: 'deeppink'}"></div>


        <!--重点：一般vue都是结合原生css来完成样式控制 -->
        <!--<div :class="c1"></div>-->

        <!--class可以写两份，一份写死，一份有vue控制-->
        <div class="box1" :class="c1"></div>

        <!--{}控制类名，key为类名，key对应的值为bool类型，决定该类名是否起作用-->
        <div :class="{box2:true, circle:cable}" @mouseover="changeCable(1)" @mouseout="changeCable(0)"></div>


        <!--[]控制多个类名-->
        <div :class="[c3, c4]"></div>
    </div>


</body>
<script src="js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            title: '12345',
            xyz: 'opq',
            mys1: {
                width: '200px',
                height: '200px',
                // 'background-color': 'greenyellow'
                backgroundColor: 'pink',
            },
            w: '200px',
            c1: 'box1',
            c2: 'circle',
            cable: false,
            c3: 'box1',
            c4: 'circle'
        },
        methods: {
            changeCable(n) {
                this.cable = n;
            }
        }
    });
    // 实现一个动图
    setInterval(function () {
        // app.c1 = app.c1 === 'box1' ? 'box2' : 'box1';
        if (app.c1 === 'box1') {
            app.c1 = 'box2';
        } else {
            app.c1 = 'box1';
        }
    }, 300)

12.表单属性

<div id="app">
    <form action="">
<!--        属性指令: v-model='变量',控制的是表单元素的value值-->
        
        
<!--        普通表单元素,用v-model直接绑定变量控制value值-->
        <input type="text" v-model="v1">
        <input type="text" v-model="v1">
        <p>{{ v1 }}</p>
        <hr>

<!--        单一复选框-->
        同意:
        <input type="checkbox" name="agree" value="v2">
        <br>

<!--        多个复选框-->
        <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>

<!--        单选框-->
        中午吃啥:
        肉:<input type="radio" name="food" value="rou" v-model="v4">
        菜:<input type="radio" name="food" value="cai" v-model="v4">
        <p>{{ v4 }}</p>


    </form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            v1:'',
            v2: false,
            v3: ['male'],
            v4: 'rou',
        }
    })

13.条件指令

<div id="app">
<!--    条件指令:
v-if="true|false",为假时,在页面上不渲染,可以隐藏标签中的信息
v-show="true|false", 为假时, 在页面中用display:none渲染,虽然没有展示,但是在页面结构中
-->
    <p v-if="v1 === '2'">if指令</p>
    <p v-show="v1 === '1'">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>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            v1: '2'
        }
    })

14.循环指令

<div id="app">
<!--    循环指令:
v-for=""
语法:
v-for="成员 in 容器"
-->
<!--    字符串,数组,对象都可以遍历值-->
    <div>
        <p v-for="(v, k, i) in arr">{{ i }}-{{ k }}:{{ v }}</p>
    </div>
</div>

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            arr: [
                {
                    name: 'Kang',
                    age: 18,
                },
                {
                    name: 'Wei',
                    age: 17
                },
            ]
        }
    })

15.计算属性成员

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

16.属性的监听

<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];
                }
            }

        }
    })

Vue组件

<div id="app">
    {{ msg }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
    // 1.组件: 由html,css,js三部分组成的独立单位,可以类似于变量,重复使用
    // 2.组件其实就是vue实例(对象),一个组件就是一个vue实例(对象)
    // 3.new Vue()产生的也是实例(对象),所以也是组件,我们称之为根组件,一个页面
    // 建议只出现一个根组件,
    // 4.组件的html页面结构由template 实例成员提供.
    // template提供的html结构是用来构造虚拟DOM
    // 真实的DOM最终会被虚拟DOM替换
    // 根组件一般不提供template,就由挂载点el来提供构建虚拟DOM的页面结构,
    // 根组件如果提供了template，还需要设置挂载点作为替换占位
    // template模板有且只有一个根标签
    let c1 = '';
    new Vue({
        el: '#app',
        data: {
            msg: '123',
            c1: 'red'
        },
        template:`
        <div id="app">
            <p :style="{color:c1}">{{ msg }}</p>
            <p :style="clickAction">{{ msg }}</p>
        `,
        methods: {
            clickAction() {
                console.log(this.msg)
            }
        }
    })

1.子组件

<div id="app">

    <my-tag></my-tag>
    <tag></tag>
</div>

</body>
<script src="js/vue.js"></script>

<!--1.定义组件  2.注册组件  3.使用组件-->
<!--如何定义子组件: 组件就是一个普通的对象,内部采用vue语法结构,被vue注册解释后,就会成为vue组件-->
<script>
    let myTag = {
        template:`
        <div>
            <h3>子组件</h3>
            <p>我是自定义子组件</p>
        </div>
        `,
    };

    // 了解: 全局组件, 不需要注册就可以直接使用
    Vue.component('tag', {
        template:`
        <div>
            <h3>全局组件</h3>
            <p>我是自定义的全局组件</p>
        `,
    });

    // 子组件注册
    new Vue({
        el: '#app',
        components: {
            myTag,
        }
    })
</script>

</html>

父传子

<div id="app">
    <div class="wrap">
<!--        通过绑定自定义属性,传送给子-->   第一步
        <tag v-for="dog in dogs" :dog="dog"></tag>

    </div>
</div>


</body>
<script src="js/vue.js"></script>
<script>
    let dogs = [
        { title: '一号', img: 'img/1.jpg'},
        { title: '二号', img: 'img/2.jpg'},
        { title: '三号', img: 'img/3.jpg'},
        { title: '四号', img: 'img/4.jpg'}
    ];
    // 子组件通过props反射机制,来拿到父传过来的值.
    let tag = {
        props: ['dog'],   第二步
        template: `
        <div class="box">
            <img :src="dog.img" alt="">
            <p>
                <b>
                    {{ dog.title }}
                </b>
            </p>
            <p @click="fn">
            点击:<b>{{ num }}</b>
            </p>
        `,
        data () {
            return {
                num:0,
            }
        },
        methods: {
            fn(){
                this.num ++
            }
        },
    };

    new Vue({
        el: '#app',
        data: {
            dogs,
        },
        components: {
            tag,
        }
    });
</script>

子传父

<div id="app">
    <h1>{{ title }}</h1>
    <tag @self_action="changeTitle"></tag> # 第三步拿取

</div>
</body>
<script src="js/vue.js"></script>
<script>
    let tag = {
        template:`
        <div>
            <input type="text" v-model="sub_title">
        </div>
        `,
        data() {
            return {
                sub_title:''    # 第一步
            }
        },
        // 将sub_title与父级的title建立链接
        // 使用$emit激活(触发)self_action自定义事件
        watch: {
            sub_title() {
                this.$emit('self_action', this.sub_title) # 第二步送过去
            }
        }
    };

    new Vue({
        el: '#app',
        components: {
            tag,
        },

        data: {
            title: '父级初始标题'
        },
        // 拿到子传过来的  # 第四步使用.
        methods: {
            changeTitle(sub_title) {
                this.title = sub_title ? sub_title: '父级初始标题';
            }
        }
    })

以上是关于Vue基础的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板