• 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 {
                 100px;
                height: 100px;
                background-color: red;
            }
    
            .box1 {
                 150px;
                height: 150px;
                background-color: darkturquoise;
                transition: .3s;
            }
            .box2 {
                 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=" 200px;height: 200px;background-color: greenyellow"></div>
            <!-- 通常:变量值为字典 -->
            <div :style="mys1"></div>
            <!-- 了解:{中可以用多个变量控制多个属性细节} -->
            <div :style="{ 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: {
                     '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: '父级初始标题';
                }
            }
        })
    
    
  • 相关阅读:
    Elasticsearch 从入门到学会之五(索引API-索引属性)
    jenkins 如何发布用java -jar来启动的java项目
    k8s从入门到精通-Pod定义详解
    Docker从入门到精通<9>-docker配置文件以及重启策略
    Docker从入门到精通<8>-docker-compose任务编排
    如何选择Containerd和docker
    Docker从入门到精通-企业级私有仓库harbor
    Docker从入门到精通<7>-docker存储驱动选择
    Docker从入门到精通<6>-使用Dockerfile构建镜像
    Docker从入门到精通<5>-数据持久化
  • 原文地址:https://www.cnblogs.com/kangwy/p/11883466.html
Copyright © 2020-2023  润新知