Vue的学习（Web前端）

于 2019-08-06 22:32:02 发布
阅读量557 收藏 5
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyq1614406553/article/details/98667717
版权

vue的核心理念

使用vue可以使开发前端非常简单，它是一个轻量级，api简单，文档齐全，简单强大，是一套构建用户界面的渐进式框架。

那么,怎样理解什么是渐进式框架?在这之前,我们首先要理解什么是框架.在最初的前端开发中,为了完成某个功能,我们需要通过js在HTML页面中获得dom节点,随后获得dom节点中的文本内容或者在dom节点上添加事件,进行一系列的程序操作,但是,如果任务量很大的情况下,代码会随着业务的增加而变得臃肿和混乱,在现实的开发中,负责的逻辑和巨大的开发量,是原生js无法完成的.

这个时候,开发人员将js代码分为了三个板块,数据(Model),逻辑控制(*),视图(View),数据板块只负责数据部分,视图板块负责更改样式,逻辑控制负责联系视图板块和数据板块,这样子有很大的好处,当需求发生变动时,只需要修改对应的板块就好

在这里插入图片描述
在这里插入图片描述

插值表达式
插值表达式：
语法：{{要插入的值}}，此时相当于占位符，到时候{{关键字}}会被替换成
Model中的数据
bug点：
当网速较慢时，Vue初始化未完成时，插值表达式不能被解析，会直接显示
出来，加载完毕之后又会被替换成真实结果，造成闪烁（Vue的加载代码写在
HTML元素之后时会出现该bug）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg1}}</p>
    <p v-cloak>{{msg1}}</p>
    <p v-text="msg1"></p>
    <p v-text="msg2"></p>
    <p>{{msg2}}</p>
    <p v-html="msg2"></p>
</div>

<script>

    var vm=new Vue({
        el:"#app",
        data:{
            msg1:"我为自己代言",

            msg2:"<p style='color: red'>你看我是什么我就是什么</p>"
        }

        }
    )


</script>

</body>
</html>

页面效果：
在这里插入图片描述
v-text：
语法：


作用：和插值表达式一样，用于给HTML元素添加文本
区别：
1.v-text不会存在闪烁问题
2.v-text会将Model中的数据完全替换到HTML元素中（覆盖）
3.插值表达式只会将Model中的数据替换到插值表达式中（占位符内容的替换）
相同点：
1.插值表达式和v-text都可以给HTML元素显示文本
2.插值表达式和v-text都不会解析要添加文本中的HTML标签（原样显示）

bind-on指令

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
    <label>用户名：<input type="text" name="username" v-bind:value="msg"/></label>

    用户名：<input type="text" name="username" :value="msg"/>

    用户名：<input type="text" name="username" :value="msg+'小可爱'"/>

    用户名：<input type="text" name="username" :value="msg+msg2"/>

    <button v-on:click="sayHello(name)">点击显示</button>
    <button @click="sayHello(name)">点击显示2</button>
</div>



<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"加油，少年",
            msg2:"我命由我，不由天"
        },
        methods:{
            sayHello:function (name) {
                alert("你好！"+name);
            }
        }


    })

</script>

</body>
</html>

页面效果：
在这里插入图片描述
注意：
1.【v-bind:】用于绑定HTML元素属性的值
2.【v-bind:】可以简写为:
3.Vue框架会把使用了v-bind:标识的HTML的属性的值当作一个Javascript表达式来使用
只要表达式合法，就能执行（当然，数据必须时字面量或来自于Model中）
如：

                :value="msg+'你好'"
                :value="msg+name"

v-on：
语法：在HTML的事件属性（不带on）前加上绑定标识，此时HTML触发此事件时，会执行事件中绑定的代码
注意：
1.常见的web网页的事件都支持绑定
2.事件名字不带on
3.事件触发的方法必须在methods中定义
4.v-on标识的属性会被Vue解析为特定JavaScript，只要内容符合JavaScript规范
都能正确执行（比如传入参数）
4.【v-on:】等价于【@】

跑马灯效果
1.定时器的使用
步骤1：定义全局的定时器编号，初始值为null
步骤2：判断定时器编号是否为null
如果不为null，直接返回（表示此时定时器已经启动，不可重复启动）
如果为null，则使用setInterval()启动定时器，并保存定时器编号到全局定时器变量中
步骤3：停止定时器
使用clearInterval()停止定时器，并把全局的定时器编号变量赋值为null
便于下次继续启动
2.Vue对象
vue对象中data、methods里面声明的内容全部都会成为vm的直接属性、方法
所有这些内容应该直接使用this访问，而不是【this.data.xxx、this.methods.xxx()】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用Vue实现跑马灯效果</title>
</head>
<body>
<div id="light">
    <button @click="start()">浪起来</button>
    &nbsp;&nbsp;|&nbsp;&nbsp;
    <button @click="stop()">成盒</button>
    <h3 v-html="info"></h3>
</div>



<script src="../lib/vue.js" type="text/javascript"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:"#light",
        data:{
            info:"刺激澡堂，AK搓背，十元一位 ",
            lightIntervalID:null
        },
        methods:{
            start(){
                if (this.lightIntervalID!==null){
                    return;
                }
                var _this=this;
                this.lightIntervalID=setInterval(function () {
                    _this.info=_this.info.substring(1).concat(_this.info.charAt(0));
                },200);
            },
            stop(){
                clearInterval(this.lightIntervalID);
                this.lightIntervalID=null;
            }
        }


    })

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

在这里插入图片描述

使用V-for遍历
1.使用v-for指令遍历简单数组

{{name}}



2.使用v-for指令遍历对象数组

id：{{user.id}}—name：{{user.name}}


3.使用v-for指令遍历对象属性值

{{key+’–’+value}}


4.使用v-for指令遍历数字（作用就是标准的for循环次数遍历） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>

<body>
<div id="app">
    <h1>Vue中的for指令</h1>
    <p v-for="name in names">{{name}}</p>
    <hr/>
    <p v-for="name,index in names" v-text="name+'---'+index"></p>
    <hr>
    <p v-for="user in users" v-text="user"></p>
    <hr>
    <p v-for="user in users">id：{{user.id}}---name：{{user.name}}---age：{{user.age}}</p>
    <hr/>
    <p v-for="value,key in cqCity">{{key+'--'+value}}</p>
    <hr/>
    <p v-for="num in 12" v-text="num"></p>
    <hr/>
    <p v-for="num,index in 12" v-text="num+'---'+index"></p>

    <h1>Vue中的for指令实现数据绑定</h1>
    <label>id：<input type="text" v-model="id"/></label>
    <label>name：<input type="text" v-model="name"/></label>
    <label>age：<input type="text" v-model="age"/></label>
    <label><button @click="add()">添加人员信息</button></label>
    <p v-for="user in users" :key="user.id">
        <label><input type="checkbox"/>{{user.id}}---{{user.name}}---{{user.age}}</label>
    </p>
</div>


<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            names:["詹姆斯","乔丹","杜兰特","科比","库里"],
            users:[
                {id:1,name:"李现",age:23},
                {id:2,name:"林允儿",age:24},
                {id:3,name:"吴亦凡",age:25},
            ],
            xanCity:{no:"陕",level:"市",area:["雁塔区","未央区","长安区","临潼区"]},
            id:'',
            name:'',
            age:''



        },
        methods:{
            add(){
                this.users.push({id:this.id,name:this.name,age:this.age});
                this.users.unshift({id:this.id,name:this.name,age:this.age})
            }
        }

    });
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
vue中的if和show指令

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue中的if和show指令</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
    <h1>使用vue中的v-if和v-show指令实现元素的显示和隐藏</h1>
    <div id="app">
        <!--
            v-if和v-show的区别？
                1.v-if切换元素状态的具体操作是（创建元素--删除元素）
                    比较消耗创建性能
                2.v-show切换元素状态的具体操作是（修改css的display样式）
                    比较消耗渲染性能
            使用技巧：
                如果该元素会经常显示/隐藏，则使用v-show
                如果该元素默认情况下不会显示（大多数时候不会显示），则使用v-if
            代码技巧：
                如果使用vue绑定的方法只有一句代码，则可以直接写在绑定结果中
                <button @click="flag=!flag">控制元素的显示隐藏</button>
        -->
        <button v-on:click="toggle()">控制元素的显示隐藏</button>
        <button @click="flag=!flag">控制元素的显示隐藏</button>
        <p v-if="flag">我是使用v-if控制的p标签</p>
        <p v-show="flag">我是使用v-show控制的p标签</p>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                flag:true
            },
            methods:{
                toggle(){
                    this.flag = !this.flag;
                }
            }
        });
    </script>
</body>
</html>

页面效果：
在这里插入图片描述
使用vue实现简答的计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的双向数据绑定指令v-mode</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
    <div class="box">
        <h1>Vue中的双向数据绑定指令v-mode</h1>
        <label>单价：<input type="text" v-model="price"></label><br/>
        <label>数量：<input type="text" v-model="num"></label><br/>
        <button @click="calc()">点击计算总价</button><br/>
        <label>总价：<span style="color:deeppink" v-text="sum"></span></label>

        <hr/>

        <h1>使用v-mode双向数据绑定实现建议计算器</h1>
        <label>操作数1：<input type="text" v-model="num1" /></label>
        <select v-model="opr">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">x</option>
            <option value="/">/</option>
        </select>
        <label>操作数1：<input type="text" v-model="num2" /></label>
        <button @click="doCalc()">=</button>
        <span style="font-size: 20px;color:deeppink" v-text="result"></span>
    </div>
    <script type="text/javascript">
        var vm2 = new Vue({
            el:".box",
            data:{
                price:12,
                num:1,
                sum:12,
                num1:'0',
                num2:'0',
                opr:'+',
                result:0
            },
            methods:{
                calc(){
                    this.sum = this.price*this.num;
                },
                doCalc(){
                    //标准的switch分支根据计算类型不同得到不同结果
                    /*switch(this.opr){
                        case "+":
                            this.result = parseInt(this.num1)+parseInt(this.num2);
                            break;
                        case "-":
                            this.result = parseInt(this.num1)-parseInt(this.num2);
                            break;
                        case "*":
                            this.result = parseInt(this.num1)*parseInt(this.num2);
                            break;
                        case "/":
                            this.result = parseInt(this.num1)/parseInt(this.num2);
                            break;
                    }*/

                    //使用eval计算获取结果
                    this.result = eval("parseInt(this.num1)"+this.opr+"parseInt(this.num2)");
                }
            }
        });
    </script>
</body>
</html>

页面效果：
在这里插入图片描述

自定义过滤器：
Vue全局过滤器：
1.必须定义在创建Vue对象之前（Javascript的边解析边执行原理）
2.定义之后在整张页面中可以使用（一个页面一个Window，一个Window下只有一个Vue）
3.定义方式
参数1：固定（需要被过滤处理的数据）
参数2…参数n：过滤器被调用时传递的参数
Vue.filter(“过滤器名字”,function(data,param1,param2…){
});
4.调用方式

{{msg|v-过滤器名字(参数值1,参数值2…)|过滤器2…|过滤器n…}}


Vue具体对象（特定作用域）过滤器：
1.定义在一个Vue对象中
2.定义方式
var vm = new Vue({
el:"#app1",
data:{},
methods:{},
filters:{
过滤器名字:function(data,param1,param2…){
}或
过滤器名字(data,param1,param2…){
}
}
});
【注意】
1.全局过滤器一定要定义在使用Vue之前
2.Vue的过滤器执行原理
渲染内容 – 交给第一个处理器 – 得到结果 – 交给第二个处理器 – 得到结果 … 得到结果–渲染 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在Vue中自定义过滤器</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
    <h1>在Vue中自定义过滤器</h1>
    <div id="app1">
        <h4>{{msg|replaceWords('猪','*')|addStartInfo('----')}}</h4>
    </div>
    <hr/>
    <div id="app2">
        <h4>{{msg|replaceWords('狗','&')|addStartInfo('----')|addEndInfo('~~~~~')}}</h4>
    </div>
    <script type="text/javascript">
        //定义全局过滤器
        Vue.filter("replaceWords",function (data,oldWorld,newWorld) {
            var reg = new RegExp(oldWorld,"g");
            return data.replace(reg,newWorld);
        });
        Vue.filter("addEndInfo",function (data,endInfo) {
            return data.concat(endInfo);
        });
        var vm1 = new Vue({
            el:"#app1",
            data:{
                msg:"我看见一头猪！"
            },
            methods:{

            },
            filters:{
                addStartInfo(data,startInfo){
                    return startInfo.concat(data);
                }
            }
        });
        var vm2 = new Vue({
            el:"#app2",
            data:{
                msg:"我养了一条小狗"
            },
            methods:{

            }
        });
    </script>
</body>
</html>

在这里插入图片描述

奇比翼凡
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值