1.vue简介 2.vue入门 3.vue的生命周期

Vue.js是一个渐进式JavaScript框架,用于构建用户界面。它与库如jQuery不同,因为框架提供了一套完整的解决方案,具有较高的侵入性。MVVM模式在Vue中用于实现数据的双向绑定。文章通过示例展示了如何在HTML中引入Vue并建立数据与DOM的关联,以及如何实现数据双向绑定。此外,还介绍了Vue的生命周期,包括beforeCreate、created、mounted等关键阶段。
摘要由CSDN通过智能技术生成

1. Vue.js是什么?
   Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架

2. 库和框架的区别
  2.1 库(Library),本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者
      代表:jQuery
      jQuery这个库的核心:DOM操作,即:封装DOM操作,简化DOM操作

document.getElementById("id_").innerHTML
$("#id_").html()

  2.2 框架(Framework),是一套完整的解决方案,使用框架的时候,需要把你的代码放到框架合适的地方,框架会在合适的时机调用你的代码 
      代表:vue
      框架规定了自己的编程方式,是一套完整的解决方案
      使用框架的时候,由框架控制一切,我们只需要按照规则写代码
      框架的侵入性很高(从头到尾)

<div></div>
<button>按钮</button>

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

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

   V(修改数据) -> M
   M(修改数据) -> V
   数据是核心

4.代码部分

4.1先引入vue

4.2 代码和展示效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	<body>
		<div id="app">
			{{msg}}
		</div>
		<script>
			const app=new Vue({
				el:'#app',//挂载
				data:{
					msg:'hello 你好',
				}
			})
			
		</script>
	</body>
</html>

 

 此时数据和dom建立了关联,他们都是响应式的

4.3查看数据如何双向绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	<body>
		<div id="app">
			<p>{{msg}}</p>
			<input type="text" v-model="msg" @keyup="change()">
			<button @click="fn">按钮</button>
		</div>
		<script>
			const vm=new Vue({
				el:'#app',//挂载
				data:{
					msg:'hello 你好'
				},
				methods:{
					change(){
						this.msg=msg
					},
					fn(){
						this.msg='change'
					}
				}
			})
			
		</script>
	</body>
</html>

 

5.Vue生命周期
vue的生命周期分为8个阶段,分别是:

beforeCreate:在实例初始化之后,数据观测和事件配置之前调用。
created:在实例创建完成后调用,在这一步,实例已完成数据观测,属性和方法的运算,但是还没有进行DOM的挂载。
beforeMount:在挂载开始之前被调用,相关的render函数首次被调用。
mounted:挂载完成后调用,此时,组件已经显示到页面上。
beforeUpdate:在数据更新之前调用,在这一步,可以对更新之前的状态进行修改。
updated:数据已经更新完成后调用,此时,组件已经重新渲染完成。
beforeDestroy:在实例销毁之前调用,此时,实例仍然完全可用。
destroyed:实例销毁之后调用,此时,组件已经被完全卸载,所有的事件监听器和子实例已经被移除。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值