• Vue简介&入门&Vue事件&生命周期

                                                                           文章目录

    一、简介

            vue的设计理念：基于MVVM模型完成的

    vue的库：核心库、其他各种的基于vue的插件库

    MVVM的介绍

    二、Vue入门

    使用vue核心的三要素（mvvm模型）

    vue入门需要知道的三个知识点

    Vue入门使用步骤

     Mvvm数据双向绑定

     Vue事件

     Vue生命周期

    库和框架的区别

    一、简介

    Vue：基于ECMAScript5的渐进式JavaScript框架
    作者：尤雨溪(前goole工程师)     官方网址：https://cn.vuejs.org/
    作用：动态构建用户界面

    说明:
    vue所关心的只有UI,所以我们大可以放心的将UI交于vue来处理,而我们只要负责数据就行了

    借鉴:
    1.angular数据绑定
    2.react的组件化和虚拟DOM

    vue的设计理念：基于MVVM模型完成的

    vue的库：核心库、其他各种的基于vue的插件库

    1.ZIP版 下载地址:https://github.com/vuejs/vue
    2.CDN加速服务
    3.npm安装版(构建大工程适用)
    说明：
    1、下载出来的vue.js有两个版本，一个压缩的生产环境的版本，一个是未经过压缩的。生产环境的版本体积更小，性能更好。但是学习的时候建议使用，因为未经压缩的版本，在实际学习的途中，语法错误的话，是有错误提示的，而生产环境的版本是没有的。

    vue.js与vue.min.js的说明:
    开发建议采用vue.js,vue.js相对于生产版拥有完整的错误提示
    vue.min.js默认是禁用devtools的 devtools:vue的调式工具

    2、所谓cdn加速服务，就是通过镜像文件地址，引入vue，这种方式方便，但是需要联网，否则是无法进行开发的

    MVVM的介绍

       MVVM，一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步相比较于mvc更加便捷；

       MVVM ===> M / V / VM

       M：model数据模型

       V：view视图

       VM：ViewModel 视图模型     虚拟dom

       V（修改数据） —> M

       M（修改数据） —> V

       数据是核心❗❗❗

    二、Vue入门

    使用vue核心的三要素（mvvm模型）

    1. 使用vue前得有view，也是咱们的html标签
    2. 从后台拿数据，也就是咱们的model
    3. 创建vue实例，也就是viewmodel，它是中间桥梁，将model与view进行关联

    vue入门需要知道的三个知识点

    1. 常用实例属性:
      el：vm（vue实例）通过el来绑定view（html代码）
      data：vm（vue实例）通过el来绑定model（后台返回的数据）
      methods：给绑定的html代码块去预定义事件
    2. 计算属性(getter、setter方法):用于进行复杂运算
    3. 生命周期钩子

    Vue入门使用步骤

    1）导入js依赖

    访问一下，如页面展示如下该依赖则没有问题 

    2）定义Vue所管理边界

    3）创建Vue实例

    4）挂在边界

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 	head>
    8. 	<body>
    9. 		
    10. 	<div id="app">
    11. 				{{msg}}
    12. 			div>
    13. 	body>
    14. 		<script type="text/javascript">
    15. 			// 绑定边界	ES6具体体现
    16. 			new Vue({
    17. 				el:'#app',
    18. 				data(){
    19. 					//设置Vue所管理的边界中可以使用的变量
    20. 					return {msg:'hello vue!!!'};
    21. 				}
    22. 			})
    23. 		script>
    24. html>

     Mvvm数据双向绑定

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 	head>
    8. 	<body>
    9. 		
    10. 	<div id="app">
    11. 				
    12. 				<input v-model="msg" />
    13. 				{{msg}}
    14. 				{{msg}}
    15. 				{{msg}}
    16. 				{{msg}}
    17. 			div>
    18. 	body>
    19. 		<script type="text/javascript">
    20. 			// 绑定边界	ES6具体体现
    21. 			new Vue({
    22. 				el:'#app',
    23. 				data(){
    24. 					//设置Vue所管理的边界中可以使用的变量
    25. 					return {msg:'hello vue!!!'};
    26. 				}
    27. 			})
    28. 		script>
    29. html>

     v-model 实现双向数据绑定的属性

     Vue事件

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<title>title>
    7. 		
    8. 	head>
    9. 	<body>
    10. 		<div id="app">
    11. 			
    12. 			<input v-model="msg" />
    13. 			<button v-on:click="send">打印1button>
    14. 			<button @click="send">打印2button>
    15. 			{{msg}}
    16. 		div>
    17. 	body>
    18. 	<script type="text/javascript">
    19. 		new Vue({
    20. 			el:'#app',
    21. 			data(){
    22. 				// 设置vue所管理的边界中可以使用的变量
    23. 				return {
    24. 					msg:'hello vue!!!'
    25. 				};
    26. 			},
    27. 			methods:{
    28. 				send(){
    29. 					// 在方法区中是可以拿到变量区中的任意变量
    30. 					// this 指的vue实例
    31. 					alert(this.msg);
    32. 				}
    33. 			}
    34. 		})
    35. 	script>
    36. html>

    第一种： 运行结果如图所示

     通常我们最常用的是第二种写法 ,这里输入什么打印什么

     以前要实现这样的功能:       

    实现一个弹幕发送的功能

    1.拿到弹幕对应的输入框dom对象

    var input = document.getElementByID("inputId");

    2.拿到输入框dom对象的value值

    var text = input.value;

    3.通过点击事件   弹出输入框内容   alert（text）
    现在使用Vue，只需关注数据，更高效

    Vue生命周期

    重要点：

    1.所有钩子函数有哪些？

           创建前：beforeCreate                                创建了：created

           挂载前：beforeMount                                 已经挂载：mounted

           当数据发生改变之前：beforeUpdate          改变后：Update 

           销毁前：beforeDestory                               销毁后：destroyed

    2.vue初始化默认会触发的钩子函数有哪些？一定会执行四个钩子函数

            创建前：beforeCreate                创建了：created

            挂载前： beforeMount                已经挂载：mounted

    钩子函数

    向Vue事件里添加一行代码 

     

     4生命周期.html

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script>
    7. 	head>
    8. 	<body>
    9. 		<div id="d1">
    10. 			<div>number:{{number}}div>
    11. 			<div>{{detail()}}div>
    12. 			<input type="text" v-model="number" />
    13. 		div>
    14. 		<script>
    15. 			var data = {
    16. 				number:999,
    17. 				msg:null
    18. 			};
    19. 			var vm = new Vue({
    20. 				el:'#d1',
    21. 				data:data,
    22. 				methods:{
    23. 					detail:function(){
    24. 						return "使用方法来插值："+this.msg;
    25. 					}
    26. 				},
    27. 				beforeCreate:function(){
    28. 		            console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')           
    29. 		            console.log(this.msg)//undefined
    30. 		            console.log(document.getElementsByClassName("myp")[0])//undefined
    31. 		        },
    32. 		        created:function(){
    33. 		            console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')
    34. 		            this.msg+='!!!'
    35. 		            console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
    36. 		            console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')
    37. 		        },
    38. 		        beforeMount:function(){
    39. 		            console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')
    40. 		            this.msg+='@@@'
    41. 		            console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
    42. 		            console.log(document.getElementsByClassName("myp")[0])//undefined
    43. 		            console.log('接下来开始render，渲染出真实dom')
    44. 		        },
    45. 		        // render:function(createElement){
    46. 		        //     console.log('render')
    47. 		        //     return createElement('div','hahaha')
    48. 		        // },
    49. 		        mounted:function(){ 
    50. 		            console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')
    51. 		            console.log(document.getElementsByClassName("myp")[0])
    52. 		            console.log('可以在这里操作真实dom等事情...')
    53. 		
    54. 		        //    this.$options.timer = setInterval(function () {
    55. 		        //        console.log('setInterval')
    56. 		        //         this.msg+='!'  
    57. 		        //    }.bind(this),500)
    58. 		        },
    59. 		        beforeUpdate:function(){
    60. 		            //这里不能更改数据，否则会陷入死循环
    61. 		            console.log('beforeUpdate:重新渲染之前触发')
    62. 		            console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')         
    63. 		        },
    64. 		        updated:function(){
    65. 		            //这里不能更改数据，否则会陷入死循环
    66. 		            console.log('updated:数据已经更改完成，dom也重新render完成')
    67. 		        },
    68. 		        beforeDestroy:function(){
    69. 		            console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
    70. 		            // clearInterval(this.$options.timer)
    71. 		        },
    72. 		        destroyed:function(){
    73. 		            console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
    74. 		        }
    75. 			});
    76. 		script>
    77. 	body>
    78. html>

    运行结果如图并使用：用F12查看

    还有四个在这里执行，我们在去文本框中，随便输入abc 把控制台先清空

    我们修改了，它就会触发beforeUpdate和Update，触发之后它就会执行我们方法里面所对应的代码

    每输入一个它就触发一次 

    库和框架的区别

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

          代表：jQuery

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

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

          代表：vue

          框架规定了自己的编程方式，是一套完整的解决方案

          使用框架的时候，由框架控制一切，我们只需要按照规则写代码

          框架的侵入性很高(从头到尾)

    个人认为Vue更像库，因为它具有一定的函数功能，基于Vue有封装了一个框架--ElementUI

  • 相关阅读:
    运动颈挂式蓝牙耳机推荐，推荐几款适合佩戴的骨传导耳机
    ipv6学习笔记221029
    【DL】时间序列的深度学习
    【Flutter】Flutter Web 开发 如何从 URL 中获取参数值
    优雅的处理POST请求URL带参数的情况
    【C++】SLT 六大组件之一：容器总结
    定时获取每天早盘数据并自动拼接整理存
    【保姆级教程】：docker搭建MongoDB三节点副本集
    Linux中sudo命令的添加和操作
    Android12之DRM基本接口实现(二)
  • 原文地址：https://blog.csdn.net/weixin_67450855/article/details/126637091