【01】vue.js — 简析入门

xiaoxiao2021-02-28 94

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-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>  <ul> <li v-for="value in json"> 值:{{value}} 键:{{$key}} 索引:{{$index}} </li> </ul>  <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就会赋予什么值，然后就会显示什么值，效果如下图所示：

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}}} </div> </body> </html>

显示效果：

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操作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简易留言板案例

转载请注明原文地址: https://www.6miu.com/read-61895.html

技术

最新回复(0)