【一文学会】vue.js入门到放弃

最新推荐文章于 2023-10-26 13:36:31 发布

伯nulee

最新推荐文章于 2023-10-26 13:36:31 发布

阅读量7.3k

点赞数 86

文章标签： js与vue对比 vue入门 axios 前端最火爆框架 v-on

本文链接：https://blog.csdn.net/liyunfu233/article/details/91885064

版权

最近正好学习了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的对比)

1.  v-on  简写'@ ' 可以用 v-on 指令监听 DOM 事件，例如：v-on:click
2.  v-text 与 v-html  对应js的innerText和innerHTML
3.  v-bind 简写':'   属性修饰  
4.  v-model  获取对象的属性  如：student.name
5.  v-for	循环
6.  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(if是直接不进行编译，而show则类似于display编译了，但是有可能隐藏或显示）

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>

4 ajax （axios）（暂定）

伯nulee

关注

86
点赞
踩
249

收藏

觉得还不错? 一键收藏
15
评论
【一文学会】vue.js入门到放弃

最近正好学习了vue.js就准备将此记录下来，希望能给各位做个参考，当然因为技术有限所以出现很多错误，烦请大佬们能够不吝赐教，此篇博客会一直保持更新，以后关于vue就在本篇博文上填加内容了。VueJs简单入门1.1、vuejs概述Vue.js是一个渐进式框架(主张少：调用多少算多少，没有赠品)1.2 mvvm模式mvc的改进版，主要目的是分离视图（View）和模型（Model）...
复制链接

扫一扫