【一文学会】vue.js入门到放弃
栏目: JavaScript · 发布时间: 5年前
内容简介:最近正好学习了vue.js就准备将此记录下来,希望能给各位做个参考,当然因为技术有限所以出现很多错误,烦请大佬们能够不吝赐教,此篇博客会一直保持更新,以后关于vue就在本篇博文上填加内容了。Vue.js是一个渐进式框架(主张少:调用多少算多少,没有赠品)
最近正好学习了vue.js就准备将此记录下来,希望能给各位做个参考,当然因为技术有限所以出现很多错误,烦请大佬们能够不吝赐教,此篇博客会一直保持更新,以后关于vue就在本篇博文上填加内容了。
VueJs简单入门
1.1、vuejs概述
Vue.js是一个渐进式框架(主张少:调用多少算多少,没有赠品)
1.2 mvvm模式
mvc的改进版,主要目的是分离视图(View)和模型(Model)
1.3 vuejs快速入门
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vuejs-2.5.16.js"></script> </head> <body> <div id="app"> {{message}} </div> <script> new Vue({ el:"#app",//表示当前vue接管div区域 data:{ message:'Hello World'//结尾不写分号 } }) </script> </body> </html>
主要分为两部分,一部分网页内容使用插值表达式{{}}将要显示的内容变量名圈起来,一部分定义vue,el是不可或缺的,代表需要圈起来给vue管理的区域,另外的内容后面实例中慢慢述说。
2、常用系统指令(加入和普通js的对比)
- v-on 简写’@ ‘ 可以用 v-on 指令监听 DOM 事件,例如:v-on:click
- v-text 与 v-html 对应js的innerText和innerHTML
- v-bind 简写’:’ 属性修饰
- v-model 获取对象的属性 如:student.name
- v-for 循环
- v-if 与 v-show v-if是根据表达式的值来决定是否渲染元素
v-show是根据表达式的值来切换元素的display css属性
2.1.1 v-on:click
js实现代码:
<div id="app"> hello </div> <button onclick="change()">点击改变</button> <script> function change() { document.getElementById("app").innerText="你好" } </script>
*vue实现代码 : *
<div id="app"> {{message}} </div> <button v-on:click="fun1('good')">点击改变</button> <script> new Vue({ el:"#app", data:{ message:'hello' }, methods:{ fun1:function (msg) { this.message=msg; } } }) </script>
主要做了一个带参的方法,方法内部其实和普通方法一样的,随意定义逻辑就好。
2.1.2 v-on:keydown
*js实现代码: * <div id="app"> <input type="text" onkeydown="showKeyCode()" /> </div> <script> //view model function showKeyCode() { var keyCode=event.keyCode; if (keyCode < 48 || keyCode > 57) { //不让键盘的按键起作用 event.preventDefault(); } if (keyCode == 13) { alert("你按的是回车") } } </script>
vue实现代码:
<div id="app"> <input type="text" v-on:keydown="fun($event)"> </div> <script> //view model new Vue({ el:"#app", methods:{ /* $event 是vue中的事件对象,和我们传统js的event对象是一样的 */ fun:function (event) { if (keyCode < 48 || keyCode > 57) { //不让键盘的按键起作用 event.preventDefault(); } } } }); } </script>
本实例主要做了输入框内只能输入数字的方法,输入其他键盘自动不起作用。具体event事件后面会有叙述。
2.1.3 v-on:mouseover
js实现代码:
<div id="app"> <div onmouseover="divmouseover()" id="div"> <textarea onmouseover="textareamouseover()">这是一个文件域</textarea> </div> </div> <script> //view model function divmouseover() { alert("鼠标移动到div上"); } function textareamouseover() { alert("鼠标移动到了text上") event.stopPropagation(); //阻止传递事件,即鼠标移动到文本域中,触发文本 域的事件,但是不触发他的父标签的方法。 } </script> //css自己添加到合适位置 <style> #div { background-color: red; } </style>
vue实现代码:
<div id="app"> <div @mouseover="fun1" id="div"> <textarea @mouseover="fun2($event)">这是一个文件域</textarea> </div> </div> <script> //view model new Vue({ el:"#app", methods:{ fun1:function () { alert("鼠标停在div上") }, fun2:function (event) { alert("鼠标停在text上"); event.stopPropagation(); } } }); </script>
经过三个常用实例,应该可以了解到v-on的使用方法了吧,举一反三,这可是举三岂不是全部精通了。
2.1.4 按键修饰符(常用按键在v-on的别名)
全部的按键别名:
- .enter 回车
- .tab tab
- .delete 删除和退格
- .esc esc
- .space 空格
- .up 方向上
- .down 方向下
- .left 方向左
- .right 方向右
- .ctrl ctrl
- .alt alt
- .shift shift
- .meta 很多键盘没有的键
随便举个按键例子吧_回车键
<div id="app"> <input type="text" v-on:keyup.enter="fun1"> </div> <script> new Vue({ el:"#app", methods:{ fun1:function () { alert("你按了回车键") } } }) </script>
2.2 v-text与v-html
这边就不对比了,v-text相当于jq的text(),v-html相当于jq的html(),很简单的。一个会解析标签,一个原样输出这就不用说了吧。
<div id="app"> <div v-text="message"></div> <div v-html="message"></div> </div> <script> new Vue({ el:'#app', data:{ message:"<h1>hello</h1>" } }) </script>
2.3 v-bind
<div id="app"> <font size="5" v-bind:color="ys1">{{message}}</font> <font size="5" :color="ys1">{{message2}}</font> </div> <script> new Vue({ el:"#app", data:{ message:"第一个font", message2:"第二个font", ys1:"red", ys2:"blue", } }); </script>
2.4 v-model 获取对象属性
<div id="app"> 姓名:<input type="text" id="username" v-model="user.username"> <input type="button" @click="fun" value="获取名字"> </div> <script> new Vue({ el:"#app", data:{ user:{username:"",password:""} }, methods:{ fun:function () { this.user.username="alex"; } } }) </script>
2.5 v-for
操作array
<div id="app"> <ul> <li v-for="(item) in arr">{{item}}</li> </ul> </div> <script> new Vue({ el:"#app", data:{ arr:[1,2,3,4,5] } }) </script>
操作对象 (很奇怪的一点是key不是最先获取到的,value才是,尚未理解)
<div id="app"> <ul> <li v-for="(key,value) in product">{{key}}=={{value}}</li> </ul> </div> <script> new Vue({ el:"#app", data:{ product:{id:1,name:"电脑",price:100} } }) </script>
操作对象数组
<div id="app"> <table border="1"> <tr> <td>序号</td> <td>名称</td> <td>价格</td> </tr> <tr v-for="p in products"> <td> {{p.id}} </td> <td> {{p.name}} </td> <td> {{p.price}} </td> </tr> </table> </div> <script> new Vue({ el:"#app", data:{ products:[ {id:1,name:"张三",price:500}, {id:2,name:"李四",price:200}, {id:3,name:"王五",price:100} ] } }) </script>
2.6 v-if 与 v-show(真没看出来有什么差别)
- v-if是根据表达式的值来决定是否渲染元素
- v-show是根据表达式的值来切换元素的display css属性
<div id="app"> <span v-if="flag">百度</span> <span v-show="flag">阿里</span> <button @click="toggle">切换</button> </div> <script> new Vue({ el:"#app", data:{ flag:false }, methods:{ toggle:function () { this.flag=!this.flag; } } }) </script>
3 生命周期(了解)
先放上一张官方图片,对应的内容仔细看还是挺简单的,当然如果后期用到,深入理解会很难的,不过我们还是来简单的了解一下就好了。后面放上一张运行时的控制台输出内容,以及运行的代码,代码都是只包含body以及script所以引用js这些请自己进行。
我们可以看到在创建前状态只进行了new vue和生命周期初始化和事件初始化,当前元素和数据都没有值,创建完毕状态就可以看出,vue是先有数据然后在寻找挂载点,这就很好解释了为什么要先new vue然后再在界面中使用插值符{{}},(原先自己都是先插值)然后再new vue,之后就是挂载过程了,介于知识有限,所以以后使用过程中再详细解释,只需要知道几个阶段:创建前->创建后->挂载前->挂在后->[更新数据前后(可选)]->销毁前->销毁后
<body> <div id="app"> <h1>{{message}}</h1> </div> <script> new Vue({ el: "#app", data: { message: "Vue生命周期" }, beforeCreate: function () { console.group('------beforeCreate创建前状态------'); console.log("%c%s", "color:red", "el : " + this.$el); //undefined console.log("%c%s", "color:red", "data : " + this.$data); //undefined console.log("%c%s", "color:red", "message: " + this.message) }, created: function() { console.group('------created创建完毕状态------'); console.log("%c%s", "color:red","el : " + this.$el); //undefined console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, beforeMount: function() { console.group('------beforeMount挂载前状态------'); console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, mounted: function() { console.group('------mounted 挂载结束状态------'); console.log("%c%s", "color:red","el : " + this.$el); //已被初始化 console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 console.log("%c%s", "color:red","message: " + this.message); //已被初始化 }, beforeUpdate: function () { console.group('beforeUpdate 更新前状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, updated: function () { console.group('updated 更新完成状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, beforeDestroy: function () { console.group('beforeDestroy 销毁前状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message); }, destroyed: function () { console.group('destroyed 销毁完成状态===============》'); console.log("%c%s", "color:red","el : " + this.$el); console.log(this.$el); console.log("%c%s", "color:red","data : " + this.$data); console.log("%c%s", "color:red","message: " + this.message) } }) </script> </body>
作者:夕花思影
原文:https://blog.csdn.net/liyunfu233/article/details/91885064
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。