Vue

国产框架。
Vue:渐进式javascript框架
库： 以提供API为主（jQuery）
框架：以提供基础性的服务为主
声明式渲染-》组件系统-》客户端路由-》集中式状态管理-》项目构建

Vue基本使用步骤

1. 需要提供标签用于填充数据
2. 引入vue.js库文件
3. 可以使用vue的语法做功能了
4. 把vue提供的数据填充到标签里面
   
   
   

Vue模板语法

1. 如何理解前端渲染
   把数据填充到HTML标签中
   

2. 模板语法
   

3. 指令：
   什么是指令？
   指令的本质是自定义属性
   指令的格式：以v-开始（比如：v-cloak）

4. v-cloak指令用法
   插值表达式存在的问题：‘闪动’
   如何解决该问题： 使用v-cloak指令
   解决该问题的原理：先隐藏，替换好值之后再显示最终的值。
   [1] v-cloak指令的用法：

   1. 提供样式
      [v-cloak]{
      display:none;
      }
   2. 在插值表达式所在的标签中添加v-cloak指令
      背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果

5. 数据绑定指令：
   用于把数据填充到页面中的标签里面
   
   v-text不存在闪动问题，推荐使用。

6. 数据响应式
   html5中的响应式：屏幕尺寸的变化导致样式的变化
   数据的响应式：数据的变化导致页面内容的变化
   数据绑定：将数据填充到标签中
   v-once只编译一次
   显示内容之后不再具有响应式功能
   应用场景：如果显示的信息后续不需要再修改，可以使用v-once，这样可以提高性能

7. 双向数据绑定
   v-modle指令用法

8. MVVM设计思想
   M model
   V view
   VM View-Model
   

9. 事件绑定

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200422111319580.png)

<div id="app">
		<div>{{num}}</div>
		<div>
			<button v-on:click='num++'>点击</button>
		</div>
	</div>
	<script src="js/vue.js"></script>
	<script>
		// 事件绑定
		var vm = new Vue({
			el: '#app',
			data: {
				num: 0
			}
		});
	</script>

事件函数的调用方式
两者的区别：是否可以传递参数

事件函数参数传递

事件修饰符：

v-on:click.prevent.self:会阻止所有的点击，而
v-on:click.self.prevent 只会阻止对元素自身的点击

按键修饰符：
用在键盘事件中，用来过滤哪个按键按下去的时候执对应的函数


自定义按键修饰符
自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值

<div id="app">
		<input type="text" v-on:keyup.aaa='handle' v-model='info'>
	</div>	
	<script src="js/vue.js"></script>
	<script>
		Vue.config.keyCodes.aaa = 65
		var vm = new Vue({
			el: '#app',
			data: {
				info: ''
			},
			methods: {
				handle: function (event) {
					console.log(event.keyCode)
				}
			}
		});
	</script>