• vue入门

    目录

    一、Vue

    1.1什么是Vue

     库与框架的区别

    1. 2.2 框架(Framework)

    二、Vue 入门

     代码展示

    3.数据双向绑定

    三.Vue事件

    四.Vue的生命周期

    一、Vue

    1.1什么是Vue

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

     库与框架的区别


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

    1. 2.2 框架(Framework)


    框架是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码 
    代表：vue
    框架规定了自己的编程方式，是一套完整的解决方案
    使用框架的时候，由框架控制一切，我们只需要按照规则写代码
    框架的侵入性很高(从头到尾)
    1.3 MVVM的介绍
       MVVM，一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步
    MVVM ===> M / V / VM
    M：model数据模型
    V：view视图
    VM：ViewModel 视图模型    虚拟dom

    V（修改数据） -> M
    M（修改数据） -> V

    其中数据是核心
     

     

    二、Vue 入门

    首先安装Vue

    BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

     

    点击复制script标签，放入Hbuildx中即可 

     

     代码展示

    1. <!DOCTYPE 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. 			<h3>{{msg}}</h3>
    12. 		</div>
    13. 		<script type="text/javascript">
    14. 			/* 绑定边界 */
    15. 			new Vue({
    16. 				el:'#app',
    17. 				data(){
    18. 					return{msg:'vue啵啵'};
    19. 				}
    20. 			})
    21. 			
    22. 		</script>
    23. 	</body>
    24. </html>

    3.数据双向绑定

    代码展示：

    1. <!DOCTYPE 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. 			<h3>{{msg}}</h3>
    12. 			<input type="text" v-model="msg" />
    13. 			<h3>{{msg}}</h3>
    14. 			<h3>{{msg}}</h3>
    15. 			<h3>{{msg}}</h3>
    16. 		</div>
    17. 		<script type="text/javascript">
    18. 			/* 绑定边界 */
    19. 			new Vue({
    20. 				el:'#app',
    21. 				data(){
    22. 					return{msg:'vue啵啵'};
    23. 				}
    24. 			})
    25. 			
    26. 		</script>
    27. 	</body>
    28. </html>

    三.Vue事件

    代码展示：

    1. <!DOCTYPE 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. 			<h3>{{msg}}</h3>
    12. 			<input type="text" v-model="msg" />
    13. 			<button v-on:click="getMsg">获取输入框内容</button>
    14. 		</div>
    15. 	</body>
    16. 	<script type="text/javascript">
    17. 		// 绑定边界	ES6具体体现
    18. 		new Vue({
    19. 			el:'#app',
    20. 			data(){
    21. 				return {msg:'vue啵啵',n:1};
    22. 			},
    23. 			methods:{
    24. 				getMsg(){
    25. 					alert(this.msg);
    26. 				}
    27. 			}
    28. 			
    29. 		})
    30. 	</script>
    31. </html>

    因为博主浏览器出现些小问题，这边我们就自行运行

    四.Vue的生命周期

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

    beforeCreate

    created

    beforemount

    mounted

    beforeupdate

    update

    beforedestory

    destory

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

    beforeCreate

    created

    beforemount

    mounted


     

     

  • 相关阅读:
    基于echarts的带流动光效的折线图-lowline-for-echarts使用记录
    Apollo 应用与源码分析：Monitor监控-硬件监控-GPS
    spring
    MySQL数据库（基础)——期末复习总结
    Oracle Unifier 22.12 ~ 23.10 功能改进清单表
    因果引擎(Causal Engine)是基于因果推理的人工智能系统
    渗透测试-应急响应思路分享
    centos7.x本地挂载阿里云oss
    Docker部署系列之Docker Compose安装Redis三主三从集群
    你必须知道的数据查询途径！！
  • 原文地址：https://blog.csdn.net/weixin_63544775/article/details/126660614