• Vue 入门

    目录

    一 . vue2_templates模型实例:

    二. vue3_templates模型实例: 

    三. v-text,v-html,v-on,v- show,v-if,v-else-if,v-else,v-for实例应用:

    四. vue面试题分享： 

    1、什么是mvvm 、 mvc 模型？

    2、vue双向数据绑定的原理？

    3.v-if 和v-show有什么区别？ 

    • vue ui 图形化指令

    1. 指令化：npm init(初始化）
    2. npm install vue@2 安装软件 
    3. vue create myapp 创建vue项目
    4. npm run server 运行项目

    一 . vue2_templates模型实例:

    1. <!DOCTYPE html>
    2. <html lang="zh">
    3. <head>
    4. 	<meta charset="UTF-8">
    5. 	<title>Document</title>
    6. 	<!-- 引入vue2.xx -->
    7. 	<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
    8. </head>
    9. <body>
    10. 	<!-- 2.dom节点 -->
    11. 	<div id="app">
    12. 		{{msg}}
    13. 	</div>
    14. 	<!-- 3.vue对象 -->
    15. 	<script>
    16. 		var vm = new Vue({
    17. 			el:'#app',
    18. 			data:{
    19. 				msg:'qikuedu'
    20. 			}
    21. 		})
    22. 	</script>
    23. 	
    24. </body>
    25. </html>

    二. vue3_templates模型实例: 

    1. <!DOCTYPE html>
    2. <html lang="zh">
    3. <head>
    4. 	<meta charset="UTF-8">
    5. 	<title>Document</title>
    6. 	<!-- 引入vue2.xx -->
    7. 	<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
    8. </head>
    9. <body>
    10. 	<!-- 2.dom节点 -->
    11. 	<div id="app">
    12. 		{{msg}}
    13. 	</div>
    14. 	<!-- 3.vue对象 -->
    15. 	<script>
    16. 		var app =Vue.createApp({
    17. 			data(){
    18. 				return{
    19. 					msg:'qikuedu'
    20. 				}
    21. 			}
    22. 		})
    23. 		var vm = app.mount("#app")
    24. 	</script>
    25. 	
    26. </body>
    27. </html>

     

    三. v-text,v-html,v-on,v- show,v-if,v-else-if,v-else,v-for实例应用:

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title></title>
    6.  
    7. 		<!--1. 引入Vue 2.xx -->
    8. 		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
    9.  
    10. 	</head>
    11. 	<body>
    12.  
    13. 		<!-- 2. Dom节点 -->
    14. 		<div id="app">
    15. 			{{msg}}
    16.  
    17. 			<!--1. v-text  innerText 的属性用法 -->
    18. 			<h1 v-text='flag?msg:say'></h1>
    19. 			<!--2. v-html innerHTML 的属性用法 ， html可以识别标签 -->
    20. 			<h1 v-html='flag?msg:say'></h1>
    21. 			<h1>{{flag?msg:say}}</h1>
    22.  
    23. 			<!-- 4. v-on 事件绑定 -->
    24. 			<button v-on:click="flag = !flag;count+=1" type="button">按钮{{count}}</button>
    25.  
    26. 			<br>
    27.  
    28. 			<!-- 3. v-show  -->
    29. 			<!-- <img v-show="flag" src="img/pic72.jpg" > -->
    30. 			<!-- <img v-if="flag" src="img/npm.png" > -->
    31.  
    32.  
    33. 			<!-- 5. 条件渲染 v-if  v-else-if  v-else  -->
    34.  
    35. 			<!-- <img v-if="count==1" src = 'img/lesscss.png'>
    36. 		   <img v-else-if="count==2" src = 'img/nodejs.png'>
    37. 		<img v-else src = 'img/npm.png'> -->
    38.  
    39.  
    40. 			<!-- 6. 列表渲染  v-for -->
    41. 			<!--  v-for  在严格情况下 要添加 :key 唯一标识 -->
    42. 			<!-- <div v-for="item,index in myImgs" :key="index"  class="item">
    43. 				<h1>{{index+1}}-{{item.title}}</h1>
    44. 				<img :src="item.img">
    45. 			</div> -->
    46.  
    47.  
    48. 		</div>
    49.  
    50. 		<!-- 3.Vue对象 -->
    51. 		<script type="text/javascript">
    52. 			var vm = new Vue({
    53. 				el: '#app',
    54. 				data: {
    55. 					msg: 'qikuedu',
    56. 					say: '你好奇酷',
    57. 					flag: true,
    58. 					count: 0,
    59. 					myImgs: [{
    60. 							title: 'nodejs',
    61. 							img: 'img/nodejs.png'
    62. 						},
    63. 						{
    64. 							title: 'npm',
    65. 							img: 'img/npm.png'
    66. 						},
    67. 						{
    68. 							title: 'lesscss',
    69. 							img: 'img/lesscss.png'
    70. 						},
    71. 						{
    72. 							title: 'pic72',
    73. 							img: 'img/pic72.jpg'
    74. 						}
    75. 					]
    76. 				}
    77. 			});
    78. 		</script>
    79. 	</body>
    80. </html>

    四. vue面试题分享： 

    1、什么是mvvm 、 mvc 模型？

     MVC: MVC即model-view-controller（模型-视图-控制器）是项目的一种分层架构思想，它把复杂的业 务逻辑，抽离为职能单一的小模块，每个模块看似相互独立，其实又各自有相互依赖关系。它的好处 是：保证了模块的智能单一性，方便程序的开发、维护、耦合度低。

    mvvm: MVVM：MVVM即 Model-View-ViewModel，(模型-视图-控制器)它是一种双向数据绑定的模式， 用viewModel来建立起model数据层和view视图层的连接，数据改变会影响视图，视图改变会影响数据 。

    2、vue双向数据绑定的原理？

            vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属 性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

    具体步骤：

            第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化 。

            第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每 个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图 黑马程序员。

             第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是: 1、在自身实例化时往属性订阅器(dep)里面添加自己 2、自身必须有一个update()方法 3、待属性变动dep.notice()通知时，能调用自身的 update() 方法，并触发Compile中绑定的回 调，则功成身退。         第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer 来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和 Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向 绑定效果。

    3.v-if 和v-show有什么区别？ 

            v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁 和重建，操作的实际上是dom元素的创建或销毁。

             v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换 它操作的是display:none/block属性。

            一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地 切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

  • 相关阅读:
    OpenCV项目开发实战---进行曝光融合（使用不同曝光设置拍摄的图像组合成一张图像）
    港联证券：市场有望从2024年起进入大众化折叠屏手机时代
    使用Qt Creator 创建 一个 QML 工程（一）
    008-BSP学习笔记-buildroot构建
    【Linux】项目日志——输出重定向
    华为机试 - 任务最优调度
    基于springboot的计算机类考研交流平台（源码+论文）
    基于Java+SpringBoot+Vue前后端分离流浪动物管理系统设计和实现
    机器学习笔记 - 时间序列的季节性
    好心情：6种会加重抑郁症的食物，你却每天都在吃
  • 原文地址：https://blog.csdn.net/weixin_48494427/article/details/125487387