【01】vue.js — 简析入门

来源：互联网发布：淘宝买家评价多久清空编辑：程序博客网时间：2024/06/01 09:20

Vue.js官方介绍称之为渐进式JavaScript框架，具有易用，灵活，性能高等显著特点，经小编近来由面向DOM编程转向面向模板编程过程学习中发现，Vue.js确实是款不错的框架。通过网上找了一套视频教程，这套视频教程是由智能社发布，现想边学准备把知识点整理发布。如有不妥之处，请立即联系小编，我会火速处理的^_^。

vue雏形

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="lib/vue.js" ></script>        <script>            window.onload = function() {                var c = new Vue({                    el: '#box',                    data: {                        msg: 'welcome vue'                    }                });            }        </script>    </head>    <body>        <div id="box">{{msg}}</div>    </body></html>

vue数据展示

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script src="lib/vue.js"></script>    <script>        window.onload=function(){            new Vue({                el:'#box',                data: {                    msg: 'welcome vue',                    msg2: 12,                    msg3: true,                    arr:['apple','banana','orange','pear'],                    json:{a:'dog',b:'cat',c:'sheep'}                }            });        };    </script></head><body>    <div id="box">        <input type="text" v-model="msg" />        <br />        使用-model双向绑定的字符串：{{msg}}        <br />        字符串：{{msg2}}        <br />        数组：{{arr}}        <br />        JSON：{{json}}    </div></body></html>

展示结果如下图所示：
vue数据展示结果

vue-for：循环

循环遍历数组与JSON

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>有心-vue循环</title>    <script src="lib/vue.js"></script>    <script>        window.onload=function(){            new Vue({                el:'#box',                data:{                    arr:['apple','banana','orange','pear'],                    json:{a:'cat',b:'dog',c:'sheep'}                }            });        };    </script></head><body>    <div id="box">        <!-- 遍历数组 -->        <ul>            <li v-for="value in arr">                值:{{value}}   索引:{{$index}}            </li>        </ul>        <!-- 遍历JSON -->        <ul>            <li v-for="value in json">                 值:{{value}}   键:{{$key}} 索引:{{$index}}            </li>        </ul>        <!-- JSON的第二种遍历方式：(key,value)为一组进行遍历 -->        <ul>            <li v-for="(k,v) in json">                {{k}}   {{v}}   {{$index}}  {{$key}}            </li>        </ul>    </div></body></html>

vue-model：双向绑定

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="lib/vue.js">        </script>        <script>            window.onload = function(){                new Vue({                    el: '#box',                    data: {                        msg: 'welcome vue'                    }                });            }        </script>    </head>    <body>        <div id="box">            <input type="text" v-model="msg" /><br />            <input type="text" v-model="msg" />            <br />            {{msg}}        </div>    </body></html>

当我们录入什么值时，msg就会赋予什么值，然后就会显示什么值，效果如下图所示：
v-model结果

vue事件

vue基础事件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .red {            color: red;        }        .blue {            background-color: blue;        }    </style>    <script src="lib/vue.js"></script>    <script>        window.onload=function(){            new Vue({                el: '#box',                data: {                    arr:['apple','banana','orange','pear']                },                methods: {                    add:function(){                        this.arr.push('tomato');                    }                }            });        };    </script></head><body>    <div id="box">        <input type="button" value="按钮" v-on:dblclick="add()">        <br>        <ul>            <li v-for="value in arr">                {{value}}            </li>        </ul>    </div></body></html>

v-on:click形式注册点击事件

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="lib/vue.js" >        </script>        <script>            window.onload = function(){                new Vue({                    el: '#box',                    methods: {                        show: function(){                            alert(1);                        }                    }                });            }        </script>    </head>    <body>        <div id="box">            <input type="button" value="按钮" v-on:click="show()" />        </div>    </body></html>

:click形式注册点击事件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script src="lib/vue.js"></script>    <script>        window.onload=function(){            new Vue({                el:'#box',                methods:{                    show:function(){                        alert(1);                    }                }            });        };    </script></head><body>    <div id="box">        <input type="button" value="按钮" @click="show()">    </div></body></html>

触发事件方法传入事件对象 - $event

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script src="lib/vue.js"></script>    <script>        window.onload=function(){            new Vue({                el:'#box',                methods:{                    show:function(ev){                        console.info(ev.keyCode);                    }                }            });        };    </script></head><body>    <div id="box">        <input type="text" @keydown="show($event)">    </div></body></html>

@keydown.13和@keydown.enter注册指定按键事件

其中enter不区分大小写，vue还提供了left等其他指定键盘

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script src="lib/vue.js"></script>    <script>        window.onload=function(){            new Vue({                el:'#box',                methods:{                    show:function(ev){                        alert("按Enter了");                    }                }            });        };    </script></head><body>    <div id="box">        <input type="text" @keydown.13="show($event)"><br />        <input type="text" @keydown.enter="show($event)">    </div></body></html>

默认事件

阻止右键默认事件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script src="lib/vue.js"></script>    <script>        window.onload=function(){            new Vue({                el:'#box',                methods:{                    show:function(ev){                        ev.preventDefault();                    }                }            });        };    </script></head><body>    <div id="box">        <input type="button" value="按钮" @contextmenu="show($event)">        <br />    </div></body></html>

vue提供的另一种形式阻止默认事件：@contextmenu.prevent，其中vue还提供了阻止冒泡@click.stop等。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script src="lib/vue.js"></script>    <script>        window.onload=function(){            new Vue({                el:'#box',                methods:{                    show:function(ev){                    }                }            });        };    </script></head><body>    <div id="box">        <input type="button" value="按钮" @contextmenu.prevent="show($event)"><br />    </div></body></html>

vue操作属性 — v-bind

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script src="lib/vue.js"></script>    <script>        window.onload=function(){            new Vue({                el:'#box',                data: {                    url: 'https://www.baidu.com/img/bd_logo1.png',                    w:'200px',                    t:'百度Logo'                }            });        };    </script></head><body>    <div id="box">        <img v-bind:src="url" alt="" />        <!-- 省略写法 -->        <img :src="url" alt="" />        <img :src="url" alt="" :width="w" :title="t">    </div></body></html>

v-model不同数据绑定展示

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script src="lib/vue.js"></script>    <script>        window.onload=function(){            new Vue({                el:'#box',                data: {                    msg: '<span style="color: red;">红色字体</span>'                }            });        };    </script></head><body>    <div id="box">        <input type="text" v-model="msg" />        <br />        {{msg}}        <br />        {{*msg}}<!-- 只执行一次 -->        <br />        {{{msg}}}<!-- 解析html片段 -->    </div></body></html>

显示效果：
v-mode数据展示

vue操作class

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .red {            color: red;        }        .blue {            background-color: blue;        }    </style>    <script src="lib/vue.js"></script>    <script>        window.onload=function(){            new Vue({                el: '#box',                data: {                    a: 'red',                    b: 'blue',                    arr: ['red','blue'],                    json: {                        'red': true                    },                    redFlag: false,                    blueFlag: true                }            });        };    </script></head><body>    <div id="box">        <strong :class="[a,b]">第一行文字...</strong><br />        <strong :class="arr">第二行文字...</strong><br />        <strong :class="json">第三行文字...</strong><br />        <strong :class="{red:redFlag,blue: blueFlag}">第四行文字...</strong><br />    </div></body></html>

显示效果如下图所示：
vue操作class显示效果图

vue操作style属性

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script src="lib/vue.js"></script>    <script>        window.onload=function(){            new Vue({                el: '#box',                data: {                    a: {                        color: 'blue',                        backgroundColor: 'gray'                    },                    b: {color: 'red'},                    c: {backgroundColor: 'blue'}                },                methods: {                }            });        };    </script></head><body>    <div id="box">        <strong :style="{color:'red'}">第一行...</strong>        <br />        <strong :style="[b]">第二行...</strong>        <br />        <strong :style="[c,b]">第三行...</strong>        <br />        <strong :style="a">第四行...</strong>    </div></body></html>

控制显示和隐藏 — v-show

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script src="lib/vue.js"></script>    <script>        window.onload=function(){            new Vue({                el:'#box',                data:{ //数据                    a: true                }            });        };    </script></head><body>    <div id="box">        <input type="button" value="按钮" v-on:click="a = !a" />        <div style="width: 100px;height: 100px;background-color: red;" v-show="a">        </div>    </div></body></html>

vue过滤器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script src="lib/vue.js"></script>    <script>        window.onload = function(){            new Vue({                el: '#box'            });        };    </script></head><body>    <div id="box">        全大写：{{'welcome' | uppercase}}        <br>        全小写：{{'welcome' | lowercase}}        <br />        首字母大写：{{'WELCOME'|lowercase|capitalize}}        <br />        添加美元符号：{{12|currency}}        <br />        添加自定义符号：{{12|currency '￥'}}    </div></body></html>

过滤器显示结果

vue简易留言板案例

阅读全文

0 0