快速掌握 Vue 入门

最新推荐文章于 2024-05-14 18:02:05 发布
最新推荐文章于 2024-05-14 18:02:05 发布
阅读量587 收藏 5
点赞数 2
分类专栏： Vue 文章标签： vue.js javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65211978/article/details/126645861
版权

目录

一、Vue简介

1. Vue.js是什么？

2. 库和框架的区别

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

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

3. MVVM的介绍

总结三点

二、Vue入门

使用步骤

Mvvm数据双向绑定 

 三、Vue事件

vue的事件实现

四、Vue的生命周期

Vue生命周期图

钩子函数有哪些

vue初始化默认会触发的钩子函数有哪些？

一、Vue简介

1. Vue.js是什么？

Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架

官网：https://cn.vuejs.org/
Vue作者：尤雨溪/中国无锡

优点：前后端工程师可以并行开发，项目交付更快

2. 库和框架的区别

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

      代表：jQuery
      jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

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

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

3. MVVM的介绍

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

   MVVM ===> M / V / VM
   M：model数据模型
   V：view视图
   VM：ViewModel 视图模型    虚拟dom

   V（修改数据） -> M
   M（修改数据） -> V
   数据是核心

   easyui=jquery+html4
   
    treenodes=
    {
        id:1
        text:后勤管理
        children：【
        
        】
    }
    
    解析成json对象
    将json对象进行遍历
    for node in treenodes.children
    渲染菜单的功能是操作左侧页面的dom节点

   注1：虽然没有完全遵循MVVM模型，Vue的设计无疑受到了它的启发。另外一个js框架“knockout”完全遵循MVVM模型
   注2：学习Vue要转化思想：“不要在想着怎么操作DOM，而是想着如何操作数据！！！”

总结三点

1.渐进式框架
2.可以理解为库，相当jQuery，市面上流行的ElementUI是基于Vue的前端框架
3.vue是遵循的mvvm模型-数据双向绑定 

二、Vue入门

使用步骤

1.导入js依赖2.6.10（cdnjs.com、bootcdn.net）
2.定义vue所管理边界
3.创建vue实例
4.挂载便捷

实现Hello vue!!!的页面 

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

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>
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界	ES6具体体现
		new Vue({
			el:'#app',
			data(){
				return {msg:'oy'};
			}
		})
	</script>
</html>

 三、Vue事件

vue的事件实现

<!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">
		<!-- 弹出输入框中的值 -->
		<input v-model="msg" />
		<button v-on:click="send">打印1</button>
		<button @click="send">打印2</button>
		{{msg}}
		</div>
	</body>
	<script type="text/javascript">
		/* 创测试建Vue实例 绑定边界 */
		new Vue({
			el:'#app',
			data(){
				//设置vue所管理的边界中可以使用的变量
				return {
					msg:'hello vue!!!'
				};
			},
			methods:{
				send(){
					//在方法区是可以拿到变量区中的任意变量
					//this指的是vue实例
					alert(this.msg);
				}
			}
		})
	</script>
</html>

测试

 相比以前，不需要再管dom节点了，只需要关注数据就好了

四、Vue的生命周期

Vue生命周期图

<!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>

钩子函数有哪些

beforeCreate：创建前

created：创建

beforeMount：挂载前

mounted：挂载

beforeUpdate：改变前

Updated：改变后

beforeDestory：销毁前

destoryed：销毁后

vue初始化默认会触发的钩子函数有哪些？

默认触发的钩子函数：beforeCreate、created、beforeMount、mounted

测试

歐陽。
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue快速入门
wunianisme的博客
05-04 417
MVVM模式 什么是MVVM模式？ MVVM（Model-View-ViewModel）是一种软件架构设计模式，由微软 WPF（用于替代 WinForm，以前就是用这个技术开发桌面应用程序的）和 Silverlight（类似于 Java Applet，简单点说就是在浏览器上运行的 WPF） 的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。 ...
vue小白入门教程
08-27
vue是一套用于构建用户界面的渐进式框架，本文通过实例给大家介绍了vue入门教程适用小白初学者，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2024年最全学习Vue：构建现代化的前端应用，2024非科班生的Web前端面试之路
最新发布
2401_84433769的博客
05-14 963
在学习Vue的过程中，你可以通过查阅官方文档和参考优秀的教程和示例代码，加深对这些概念的理解和应用。通过使用Vue的路由功能，你可以在不同的URL路径下呈现不同的组件，实现多页面应用的效果。通过这个项目，你可以学习如何使用Vue的组件化开发方式，将应用拆分为可重用的组件，使得代码的维护和扩展更加容易。首先，Vue的实例是Vue应用的根实例，它是Vue应用的入口点。2. 学习Vue的核心概念：学习Vue的核心概念是掌握Vue的基础知识，这些基础知识包括Vue的实例、组件、指令和生命周期等核心概念。
大牛教你Vue 快速入门实现？新手小白速度来收藏!!!干货满满！
VUE2020的博客
08-29 628
VUE 简介 什么是VUE? VUE是一个基于MVVM设计模式的渐进式（融合）的纯前端JS框架，基于此框架我们可以让客户端的操作更简单。 如何理解框架？ 什么场景使用VUE？ 绝大多数以数据操作（增删改查）为主的PC端或移动端项目都可用vue开发比如: 美团，饿了么，淘宝，知乎，大众点评，微博… VUE 快速入门 官方js文件下载 cn.vuejs.org 业务及代码实现 构建HTML页面，呈现如下效果，并在图中点击加，减按钮时实现中间数字的变化（要求基于vue技术进行实现）。 第一步：定义HTML页面并引
vue入门
xiaoyi215的博客
09-14 1092
vue入门 1. Vue.js是什么？ Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架 官网：https://cn.vuejs.org/ Vue作者：尤雨溪/中国无锡 2. 库和框架的区别 2.1 库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者 代表：jQuery jQuery这个库的核心：DOM操作，即：封装DOM操作...
Vue介绍与入门（一篇就可入门）
weixin_57504000的博客
04-26 4万+
一、Vue.js是什么？ vue官网说：Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。 渐进式我个人理解就是阶梯式向前。vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染，我就只用vue的声明渲染，而我们要用他的组件系统，我们可以引用它的组件系统。 官网：https://cn.vuejs.org/ Vue作者：尤雨溪/
vue入门vue入门vue入门
05-14
"Vue入门"意味着我们将探讨如何开始学习和掌握这个强大的技术。 Vue.js 的核心理念是通过声明式的数据绑定和组件化来构建用户界面。它的设计目标是使开发过程更加直观和可维护，使得开发者可以专注于应用的业务逻辑...
快速入门Vue
08-31
通过官方文档的指引，你可以逐步掌握Vue的基本用法，比如熟悉组件的创建和使用，理解虚拟DOM的工作原理，以及如何利用Vue Router进行路由管理，或者结合Vuex进行状态管理。 总之，Vue.js以其轻量级、易学习、易整合...
vue入门知识PPT
03-26
在本Vue入门知识PPT中，作者分享了一些基础到进阶的知识点，帮助初学者快速掌握Vue。 一、Vue的基本结构 Vue应用由一个根Vue实例构成，通过`new Vue()`来创建。在这个实例中，我们可以定义数据、方法、计算属性和...
Vue快速入门使用示例附录
03-10
"Vue快速入门使用示例附录"这个压缩包可能是为了帮助初学者快速理解并掌握Vue的基础操作和常见应用场景。让我们通过以下几个关键知识点来深入探讨Vue.js。 1. **安装Vue**: Vue可以通过CDN链接直接在HTML中引入，也...
vue 学习
freeking101的博客
07-17 8261
​Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。................................................
Vue 简单快速入门
woruosuifenglang的博客
07-25 2266
​Vue
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
CYK_byte的博客
10-16 1万+
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
怎么学习 Vue
weixin_35753291的博客
01-09 246
学习 Vue 有以下几种方法： 阅读官方文档：Vue 的官方文档是一个非常不错的学习资源，里面包含了 Vue 的基础知识和使用方法。 完成官方教程：Vue 官方网站上还有一个教程，可以帮助你快速入门 Vue。 参加在线课程或培训：可以在网上找一些在线课程或培训机构，学习 Vue。 自学：自学是学习 Vue 的一种很好的选择，你可以通过阅读书籍、查阅资料、观看视频等方式来自学 Vue。 ...
VUE 超级详细教程
热门推荐
weixin_42371679的博客
06-06 5万+
一、安装 二、基础练习 1）引入vue.js 解释： 注意：被挂载的div要放在vue的上面，否则vue管不到 2）v-for 3）做一个计数器(v-on:click) 方法一：直接在标签里实现 <div id="app"> <h2>当前计数: {{count}}</h2> <button v-on:click="count++">+</button> <button v-on:cl
零基础怎么快速入门vue
07-08
如果你是零基础，想要快速入门Vue，我可以给你一些建议。首先，你可以按照以下步骤进行学习： ... 2. 了解Vue的基本概念：Vue是一个渐进式JavaScript...通过不断的实践和积累，你会逐渐掌握Vue的技能。祝你学习顺利！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

歐陽。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值