前言

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效果。