关于VUE

最新推荐文章于 2023-05-26 21:27:18 发布

cx_129

最新推荐文章于 2023-05-26 21:27:18 发布

阅读量163

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/cx_129/article/details/119797245

版权

前言

vue笔记

1.概念

VUE是一种用于构建用户界面的渐进式框架。可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

渐进式：构建项目可以由简单到复杂。

VUE优点：

1.体积小，压缩后文件只有33k。

2.运行效率高。采用虚拟机DOM（可以预先通过javaScripe对数据进行计算，把最终的DOM操作计算出来并且优化），由于这个DOM操作属于预处理技术，并没有真实地操作DOM，∴叫虚拟DOM。

3.双向数据绑定。开发者将更多的精力投入到业务中。

4.生态丰富。大量开源项目基于vue进行开发，成熟稳定。

2.案例

2.1 ES6新规范

定义变量方式1：

var 弊端：没有作用域的概念，如果变量的名称重复可能发生问题。

定义变量方式2：

let 有作用域的概念。

定义常量方式：

const 全局唯一，不可改变。

2.2案例1

2.3 v-cloak属性

说明：该指令可以保持有效直至程序编译结束。

例：和以下规则一起使用时可以隐藏未编译的Mustache标签，直到实例准备完毕。

<head>
		<meta charset="utf-8">
		<title></title>
		<!-- html样式 -->
		<style>
		/* 为属性定义样式 */
			[v-cloak]{
				/* 定义样式不显示 */
				display: none;
			}
		</style>
	</head>
     <body>
		<!-- v-cloak说明：当程序编译结束时该属性不起作用 【编译没有结束时隐藏有效】-->
		<div id="app" v-cloak>
			{{hello}}
		</div>
		<script src="../js/vue.js"></script>
		
		<script type="text/javascript">
			const app = new Vue({
				el:"#app",
				data: {
					hello:"hello VUE"
				}
			})
		</script>
	</body>

2.4 数据绑定指令

2.4.1 v-text

说明：v-text数据展现，当数据没有解析成功时，页面没有任何数据【没有闪动】，是v-cloak的升级版。

作用：直接展现解析数据

<body>
       <div id="app" >
           
           <h3>{{hello}}</h3>
           
           <h3 v-text="hello"></h3>
       </div>

       <script src="../js/vue.js"></script>
       <script type="text/javascript">
           const app = new Vue({
               el:"#app",
               data: {
                   hello:"hh",
               }
           })
       </script>
   </body>

2.4.2 v-html

说明：解析html的数据，显示html效果。