Vue框架——基本知识点+示例（2）

最新推荐文章于 2022-06-16 10:02:20 发布

Whuiry

最新推荐文章于 2022-06-16 10:02:20 发布

阅读量285

点赞数

分类专栏：前端 Vue框架

本文链接：https://blog.csdn.net/Whuiry/article/details/107902675

版权

前端同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

Vue框架

7 篇文章 0 订阅

订阅专栏

01 总结

使用vue

1.引入框架；
2.实例化对象；
3.配置参数;**

vue指令

v-cloak
v-if 和 v-show
v-html 和 v-text
v-pre 和 v-once
v-model
v-bind
v-on
v-for

02 发微博

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <textarea name="" id="" cols="30" rows="10" v-model="val"></textarea>
    <button v-on:click="send()">发布微博</button>
    <ul>
        <li v-for="(item,index) in list">
            <p>{{item.con}} {{item.date}}</p>
            <span v-on:click="del(index)">X</span>
        </li>
    </ul>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            val:'',
            list:[
                {
                    con:'昨日天气',
                    date:'20200706'
                },
                {
                    con:'昨日天气',
                    date:'20200706'
                },
                {
                    con:'昨日天气',
                    date:'20200706'
                }
            ]
        },
        methods:{
            send(){
                if (this.val==''){
                    alert('请输入内容');
                }else {
                    var date = new Date();
                    date = date.getFullYear()+'0'+(date.getMonth()+1)+'0'+date.getDate();
                    this.list.unshift({
                        con: this.val,
                        date: date
                    });
                    this.val=''
                }
            },
            del(a){
                this.list.splice(a,1);
            }
        }
    })
</script>
</body>
</html>

03 Tab栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul{
        overflow: hidden;
    }
    ul li{
        float: left;
        padding: 4px 10px;
    }
    .current{
        background-color: #FF6600;
    }
</style>
<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in listTop" v-on:click="change(index)" v-bind:class="{current:index==msg}">
            {{item}}
        </li>
    </ul>
    <section>
        <div v-for="(item,index) in listCon" v-show="msg==index">{{item}}</div>
    </section>
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:0,
            listTop:[
                '公告',
                '规则',
                '论坛',
                '安全',
                '公益'
            ],
            listCon:[
                '公告内容',
                '规则内容',
                '论坛内容',
                '安全内容',
                '公益内容'
            ]
        },
        methods:{
            change(a){
                this.msg=a;
            }
        }
    })

</script>
</body>
</html>

04 v-if

1.if(){ }else if(){ }else{ }；
2.类似于之前的if else语句，else if语句可以有多个情况：
v-if
v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- if(){

    }else if(){

    }else{

    } -->

<ul id="app">
<!--    v-for遍历指定的次数-->

<!--    显示1~10的数字-->
<!--    <li v-for="n in 10">-->
<!--        {{n}}-->
<!--    </li>-->

<!--    只显示num=1-->
<!--    <li v-for="n in 10" v-show="num==n"></li>-->

<!--    类似于之前的if else语句 else if语句可以有多个情况-->
<!--    <li v-if="num==1">1</li>-->
<!--    <li v-else-if="num==2">2</li>-->
<!--    <li v-else>3</li>-->

    <li v-if="num==1">1</li>
    <li v-else>2</li>
</ul>
</body>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            num:1
        }
    })
</script>
</html>

05 watch监听数据

watch监听数据，有变化的时候执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="add()">按钮</button>
    {{num}}
    <br>
    {{msg}}
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            num:0,
            msg:'hello'
        },
        //watch监听数据,有变化的时候执行
        watch:{
            // 数据名(){} 要监听谁就写谁的名字
            num(){
                console.log('num发生变化了');
            },
            msg(){
                console.log('msg发生变化了');
            }
        },
        methods:{
            add(){
                this.num++;
                this.msg=this.msg+'1'
            }
        }
    })
</script>
</body>
</html>

06 computed

1.计算属性，效率比较高，数据存储在缓存里面。如果数据不变化去缓存读数据；
2.写在了computed里面，数据不会发生变化，除非里面的变量值发生改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="add()">加法</button>
    <br><br>
    {{t}}
    <br><br>

<!--    每一次页面中有数据渲染的时候，都会重新渲染-->
    {{msg+num+Math.random()}}
    <br><br>

<!--    写在了computed里面，数据不会发生变化，除非里面的变量值发生改变-->
    {{n}}
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            num:1,
            msg:2,
            t:3
        },
        //计算属性，效率比较高，数据存储在缓存里面。如果数据不变化去缓存读数据
        computed:{
            n(){
                return this.msg+this.num+Math.random();
            }
        },
        methods:{
            add(){
                this.t++;
                // this.num++;
            }
        }
    })
</script>
</body>
</html>

07 自定义全局指令

1.自定义全局指令：Vue.directive(‘指令名字’,{钩子函数})；
2.使用指令：
①v-指令名字:参数；
②v-指令名字=参数(变量处理) ；
③无参数 v-指令名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../../../../17外包1班/FileRecv/library.js"></script>
</head>
<body>
<!--
    输入框聚焦
    autofocus在一些苹果手机上会有问题，所以一般用的是 选择标签.focus()

    定义指令实现自动聚焦
-->
<div id="app">
    <input type="text" id="txt">
    <button v-on:click="change()">切换</button>
    <button v-color:red v-if="show">{{msg}}</button>
    <p v-color:blue>dfghjg</p>
    <div v-color="yellow">waerdfgb</div>
    <div v-color>asdfgasfd</div>
</div>
<div id="box">
    <p v-color:orange>waesrgbn</p>
</div>

<script src="js/vue.js"></script>
<script>
// <!--自定义全局指令: Vue.directive('指令名字',{钩子函数})
// 使用指令 ①v-指令名字:参数 或者 ②v-指令名字=参数(变量处理) ③无参数 v-指令名字-->

    Vue.directive('color',{
        //钩子函数（框架提供的对外接口，可以进行操作） bind inserted unbind update 可选
        bind(el,obj){
            console.log(el,obj);
            console.log('绑定到元素身上了');
        },
        inserted(el,obj){
            console.log(el,obj)
        //    el当前标签,obj指令相关的参数
        //    obj.arg用户传递参数(通过 v-指令名字：参数 传递)
        //    obj.value(通过 v-指令名字=参数(变量处理) 传递)

        //    在inserted里面实现指令的功能
        //     if (obj.arg){
        //         //这串代码的意思是：如果 【v-指令名字：参数】 传递的 arg 存在，则执行el.style.color=obj.arg，
                   //否则传递的是 【v-指令名字=参数(变量处理)】 对象的 value ，执行el.style.color=obj.value;
        //         el.style.color=obj.arg;
        //     }else {
        //         el.style.color=obj.value;
        //     }

            //v-color
            el.style.background='red';
            console.log('标签插入到文档中了');
        },
        unbind(el,obj){
            console.log('解除绑定')
        },
        update(el,obj){
            console.log('数据有更新')
        }
    })

    new Vue({
        el:'#app',
        data:{
            //v-指令名字=参数(变量处理)，此时的yellow被当作变量处理，需要被定义
            yellow:'green',
            //v-if控制标签是否存在，可以用来检测unbind方法，标签变化可以引起标签解绑和数据更新
            show:true,
            msg:0
        },
        methods:{
            change(){
                this.show=!this.show;
                //检测update()方法
                this.msg++
            }
        }
    })

    new Vue({
        el:'#box'
    })
</script>
</body>
</html>

08 自定义局部指令

自定义局部指令 directives:{
指令名字:{
钩子函数 bind inserted update unbind
内部结构和全局指令一样
}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-focus v-color>
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        // 自定义局部指令 directives:{
        //     指令名字:{
        //         钩子函数 bind inserted update unbind
        //         内部结构和全局指令一样
        //     }
        // }
        directives:{
            color:{
                inserted(el){
                    el.style.background='red';
                }
            },
            focus:{
                inserted(el){
                    //自动聚焦
                    el.focus();
                }
            }
        }
    })
</script>
</body>
</html>

09 自定义全局过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--    {{1 | mul}}-->
    {{1 | mul(98)}}
    <br>
    {{1 | mul}}

    <br>
    {{'aaa' | Cap}}
</div>

// <!--    过滤器处理数据-->
<script src="js/vue.js"></script>
<script>
    // Vue.filter('mul',(n)=>{
    //     if (n<10){
    //         return '0'+n+'元';
    //     }else {
    //         return n+'元'
    //     }
    // })

    //Vue.filter('过滤器的名字',(n,b,a)=>{}) 第一个参数代表的是要处理的数据 其余参数是可选参数
    //使用过滤器 {{所要处理的数据 | 过滤器名字}} 如果没有多余参数，直接数据即可，否则要加括号(12)
    Vue.filter('mul',(n,a,b)=>{
        if (a){
            console.log(a);
            return n+a;
        }else {
            console.log(b)
            return b+':没有传递参数';
        }
    })

    Vue.filter('Cap',(n)=>{
        return n.slice(0,1).toUpperCase()+n.slice(1,n.length);
    })

    new Vue({
            el:'#app'
            // data:{
            //
            // }
    })
</script>
</body>
</html>

10 自定义局部过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{'asdfg'|Cap}}
    <br>
    {{a | mul}}
    <br>
    {{1 | mul(123)}}
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        filters:{
            Cap(n){
                return n.slice(0,1).toUpperCase()+n.slice(1,n.length);
            },
            mul(n,a){
                // if (n<10){
                //     return '0'+n+'元';
                // }else {
                //     return n+'元'
                // }
                if(a){
                    return n+a;
                }else {
                    return '没有传递参数'
                }
            }
        }
    })
</script>
</body>
</html>

11 生命周期

生命周期指的是一个对象从创建到销毁的过程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
</head>
<body>
<div id="app">
    <p id="txt">{{msg}}</p>
</div>

<script src="js/vue.js"></script>
<script>
// <!-- 生命周期指的是一个对象从创建到销毁的过程   -->
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'hello world'
        },
        beforeCreate() {
            console.log('beforeCreate....');
            console.log(txt.innerHTML);  //{{msg}}
            //打印$el 代表的是绑定的标签
            console.log(this.$el);  //undefined
            console.log(this.msg);  //undefined
        },
        created(){
            console.log('created....');
            console.log(txt.innerHTML);  //{{msg}}
            console.log(this.$el);  //undefined
            console.log(this.msg);  //hello world
        },
        //挂载之前
        beforeMount(){
            console.log('beforeMount....');
            console.log(txt.innerHTML); //{{msg}}
            console.log(this.$el); //<div id="app">...</div>
            console.log(this.msg); //hello world
        },
        //挂载成功
        mounted(){
            console.log('mounted....');
            console.log(txt.innerHTML);  //hello world
            console.log(this.$el);  //<div id="app">...</div>
            console.log(this.msg);  //hello world
        },
        // 销毁实例对象 vm.$destroy()
        beforeDestroy() {
            console.log('beforeDestroy....')
        },
        destroyed(){
            console.log('destroyed....');
        },
        beforeUpdate() {
            console.log('数据更新了');
        },
        updated(){
            console.log('数据更新完毕');
        }
    })
</script>
</body>
</html>

12 动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div>p{
        width: 100px;
        height: 100px;
        background-color: lime;
        transition: all 1s;
        opacity: 1;
        position: relative;
        left: 100px;
    }
    .c{
        opacity: 0;
        width: 0px;
        transform: rotate(360deg);
        left: 0px;
    }
</style>
<body>
<div id="app">
    <button v-on:click="change()" id="btn">淡入淡出</button>
    <p v-bind:class="{c:show}"></p>
    <h3>这是标题</h3>
<!--    {{change()}}类似于（computed.html那样）死循环的效果，会一直不断地渲染，直到报错，因为show在不断变化-->
</div>
<script src="js/vue.js"></script>
<script>
    setTimeout(()=>{
    //    选择标签.click() 自动触发click方法
        btn.click();
    },10)

    new Vue({
        el:'#app',
        data:{
            show:true
        },
        methods:{
            change(){
                console.log(111);
                this.show=!this.show;
            }
        }
    })
</script>
</body>
</html>

13 transition

Vue中transition方法：
1.实现显示与隐藏；
2.用transition包裹实现动画的标签；
3.书写各个状态的类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    p{
        width: 100px;
        height: 100px;
        background-color: lime;
    }
/*<!--    离开的开始一瞬间-->*/
    .fade-leave{
        /*opacity: 1;*/
        /*width: 100px;*/
        transform:rotate(0deg) scale(1);
    }
    /*离开的结束一瞬间*/
    .fade-leave-to{
        transform:rotate(360deg) scale(0);
    }
    /*离开的过程*/
    .fade-leave-active{
        transition: all 2s;
    }
    /*进入的开始一瞬间*/
    .fade-enter{
        transform: rotate(360deg) scale(0);
    }
    /*进入的结束一瞬间*/
    .fade-enter-to{
        transform: rotate(0deg) scale(1);
    }
    /*进入的过程*/
    .fade-enter-active{
        transition: all 1s;
    }
</style>
<body>
    <div id="app">
        <button v-on:click="change()">动画效果</button>
        <transition name="fade">
            <p v-show="show"></p>

<!--    vue中transition方法:
        1.实现显示与隐藏；
        2.用transition包裹实现动画的标签；
        3.书写各个状态的类
-->
        </transition>
    </div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            show:true
        },
        methods:{
            change(){
                this.show=!this.show;
            }
        }
    })
</script>
</body>
</html>

watch 与computed区别？

1.区别
watch中的函数是不需要调用的
computed内部的函数调用的时候不需要加()

watch：属性监听监听属性的变化
computed：计算属性通过属性计算而得来的属性

watch：需要在数据变化时执行异步或开销较大的操作时使用
对于任何复杂逻辑或一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性computed。

computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
computed中的函数必须用return返回最终的结果

当computed中的函数所依赖的属性如果没有发生改变的时候，那么调用当前函数的时候结果会从缓存中读取

watch：一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；

2.使用场景
computed 　　　　
　　　　当一个属性受多个属性影响的时候就需要用到computed
　　　　最典型的例子：购物车商品结算的时候
watch
　　　　当一条数据影响多条数据的时候就需要用watch
　　　　搜索数据

Whuiry

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue框架——基本知识点+示例（2）

01 总结使用vue1.引入框架；2.实例化对象；3.配置参数;**vue指令v-cloakv-if 和 v-showv-html 和 v-textv-pre 和 v-oncev-modelv-bindv-onv-for02 发微博<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&g
复制链接

扫一扫