Vue入门

最新推荐文章于 2024-08-23 13:45:37 发布

zsm030616

最新推荐文章于 2024-08-23 13:45:37 发布

阅读量88

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/zsm030616/article/details/126660683

版权

这里写目录标题

一，Vue的简介
二，案例演示

一，Vue的简介

1.什么是 Vue？
是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

官网：https://cn.vuejs.org/

Vue作者：尤雨溪/中国无锡

库和框架的区别
库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者

框架(Framework)：是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码

代表：vue
框架规定了自己的编程方式，是一套完整的解决方案
使用框架的时候，由框架控制一切，我们只需要按照规则写代码
框架的侵入性很高(从头到尾)

3.mvm的介绍
MVVM，一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步

相比较于mvc更加便捷；

VM：ViewModel 视图模型虚拟dom

数据是核心

二，案例演示

1.页面展示实现

步骤：
1.导入js依赖（在官网上找,js的版本有很多，之间也存在差异。最好不要随便导入一个js）
查看网址：BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
在这里插入图片描述
2.定义Vue所管理的边界

3.创建Vue实例

4.挂载边界

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> 
	</head>
	<body>
		//定义边界
		<div id="app">
			<h3>{{msg}}</h3>
			{{msg}}
		</div>
	</body>
	<script type="text/javascript">
	//绑定边界 es6的具体体现
		new Vue({
        //设置Vue所管理的边界中可以使用的变量
			el:'#app',
			data(){
				return {msg:'vue哈哈哈'};
			}
		})
	</script>
</html>

在这里插入图片描述
2.Mvvm数据的双向绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> 
	</head>
	<body>
		//定义边界
		<div id="app">
        //数据双向绑定
			<h3>{{msg}}</h3>
			<input type="text" v-model="msg"/>
			<h3>{{msg}}</h3>
			<h3>{{msg}}</h3>
			<h3>{{msg}}</h3>
			{{msg}}
		</div>
	</body>
	<script type="text/javascript">
	//绑定边界 es6的具体体现
		new Vue({
			el:'#app',
			data(){
				return {msg:'vue哈哈哈'};
			}
		})
	</script>
</html>

只要是跟边界相关的变量都会被改变，如果变量写在边界外就不会被Vue进行监管
在这里插入图片描述
3.Vue事件
v-model：为双向绑定

v-on：绑定方法

methods：将所有的方法定义methods里面

send：在里面定义函数

在方法区中可以拿到变量区中任意的变量

优点：提高开发效率

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> 
	</head>
	<body>
		//定义边界
		<div id="app">
			<h3>{{msg}}</h3>
			<input type="text" v-model="msg"/>
			<button v-on:click="getMsg" >获取内容</button>
		</div>
	</body>
	<script type="text/javascript">
	//绑定边界 es6的具体体现
		new Vue({
			el:'#app',
			data(){
				return {msg:'vue哈哈哈'};
			},
			methods:{
				//在方法区中可以拿到变量区中任意的变量
				//this相当于Vue实例
				getMsg(){
					alert(this.msg);
				}
			}
		})
	</script>
</html>

在这里插入图片描述
4.生命周期

在这里插入图片描述
解析：

new Vue()：代表初始化实例（里面什么也没有，只是一个空壳）

int Events…:初始化事件

beforeCreate:执行函数

Compile template:编译模板进行渲染（自定义模板）

beformount：挂载（挂到Vue里面）

beforeupdata：可以改变变量的值

destroy：销毁

初始化Vue一定会执行的构造函数

beforCreate

created

beforeMount

mounted

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="d1">
			<div>number:{{number}}</div>
			<div>{{detail()}}</div>
			<input type="text" v-model="number" />
		</div>
		<script>
			var data = {
				number:999,
				msg:null
			};
			var vm = new Vue({
				el:'#d1',
				data:data,
				methods:{
					detail:function(){
						return "使用方法来插值："+this.msg;
					}
				},
				beforeCreate:function(){
		            console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')           
		            console.log(this.msg)//undefined
		            console.log(document.getElementsByClassName("myp")[0])//undefined
		        },
		        created:function(){
		            console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')
		            this.msg+='!!!'
		            console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
		            console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')
		        },
		        beforeMount:function(){
		            console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')
		            this.msg+='@@@'
		            console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
		            console.log(document.getElementsByClassName("myp")[0])//undefined
		            console.log('接下来开始render，渲染出真实dom')
		        },
		        // render:function(createElement){
		        //     console.log('render')
		        //     return createElement('div','hahaha')
		        // },
		        mounted:function(){ 
		            console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')
		            console.log(document.getElementsByClassName("myp")[0])
		            console.log('可以在这里操作真实dom等事情...')
		
		        //    this.$options.timer = setInterval(function () {
		        //        console.log('setInterval')
		        //         this.msg+='!'  
		        //    }.bind(this),500)
		        },
		        beforeUpdate:function(){
		            //这里不能更改数据，否则会陷入死循环
		            console.log('beforeUpdate:重新渲染之前触发')
		            console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')         
		        },
		        updated:function(){
		            //这里不能更改数据，否则会陷入死循环
		            console.log('updated:数据已经更改完成，dom也重新render完成')
		        },
		        beforeDestroy:function(){
		            console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
		            // clearInterval(this.$options.timer)
		        },
		        destroyed:function(){
		            console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
		        }
			});
		</script>
	</body>
</html>

在这里插入图片描述

zsm030616

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门

1.什么是 Vue？是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。官网：https://cn.vuejs.org/Vue作者：尤雨溪/中国无锡库和框架的区别库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者。
复制链接

扫一扫