Vue:渐进式JavaScript框架 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建
易用：熟悉HTML、CSS、JavaScript后可快速上手Vue灵活：在一个库和一套完整框架之间自如伸缩高效：20kB运行大小，超快虚拟DOM参数分析
el:元素的挂载位置(值可以是CSS选择器或者DOM元素)data:模型数据(值是一个对象)插值表达式用法
将数据填充到HTML标签中插值表达式支持基本的计算操作Vue代码运行原理
概述编译过程的概念(Vue语法→原生语法)模板语法概述 1.如何理解前段渲染？ 把数据填充到HTML标签中 2.前段渲染方式
原生js拼接字符串使用前段模板引擎使用vue特有的模板语法3.模板语法概述
插值表达式指令事件绑定属性绑定样式绑定分支循环结构指令 1.什么是指令？
什么是自定义属性指令的本质就是自定义属性指令的格式：以v-开始(比如：v-cloak)2.v-cloak指令
插值表达式存在的问题：闪动如何解决该问题：使用v-clock指令解决该问题的原理：先通过隐藏，在内存中完成值替换，替换好值之后再显示最终的值 <style type="text/css"> [v-cloak]{ display: none; } </style> div id="app"> <div v-cloak>{{msg}}</div> </div>3.数据绑定指令
v-text填充纯文本 ①相比插值表达式更加简洁 ②没有闪动问题v-html填充HTML片段 ①存在安全问题 ②本网站内部数据可以使用，来自第三方的数据不可以用v-pre填充原始信息 ①显示原始信息，跳过编译过程(分析编译过程） <div id="app"> <div>{{msg}}</div> <div v-text='msg'></div> <div v-html='msg1'></div> <div v-pre>{{msg}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 1、v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题 2、v-html指令用于将HTML片段填充到标签中，但是可能有安全问题 3、v-pre用于显示原始信息 */ var vm = new Vue({ el: '#app', data: { msg: 'Hello Vue', msg1: '<h1>HTML</h1>' } }); </script>4.数据响应式
如何理解响应式 ①html5中的响应式(屏幕尺寸的变化导致样式的变化) ②数据的响应式（数据的变化导致页面内容的变化）什么是数据绑定 ①数据绑定︰将数据填充到标签中v-once只编译一次 ①显示内容之后不再具有响应式功能 (如果现实的信息后续不需要再更改，可以使用v-once,提高性能)双向数据绑定 1.双向数据绑定分析
v-model指令用法 <input type='text' v-model='uname'/>2.MVVM设计思想
M(model)--------数据(data)V(view)---------模板(DOM)VM(View-Model)----------控制逻辑 事件→数据 -------事件监听 数据→事件--------数据绑定事件绑定 1.Vue如何处理事件
v-on指令用法 <input type='button' v-on:click='num++'/> v-on简写形式 <input type='button' @click='num++'/>2.事件函数的调用方式
直接绑定函数名称 <button v-on:click='say'>Hello</button> 调用函数 <button v-on:click='say()'>Say hi</button> <div id="app"> <div>{{num}}</div> <div> <button v-on:click='num++'>点击</button> <button @click='num++'>点击1</button> <button @click='handle'>点击2</button> <button @click='handle()'>点击3</button> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { num: 0 }, // 注意点： 这里不要忘记加逗号 // methods 中 主要是定义一些函数 methods: { handle: function() { // 这里的this是Vue的实例对象+ console.log(this === vm) // 在函数中 想要使用data里面的数据 一定要加this this.num++; } } }); </script>3.事件函数传递参数
普通参数和事件对象 <button v-on:click='say("hi",$event)'>Say hi</button> <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 --> <button v-on:click='handle1'>点击1</button> <!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递， 并且事件对象的名称必须是$event --> <button v-on:click='handle2(123, 456, $event)'>点击2</button>4.事件修饰符
.stop阻止冒泡 <a v-on:click.stop="handle">跳转</a> .prevent阻止默认行为 <a v-on:click.prevent="handle">跳转</a> <div id="app"> <div>{{num}}</div> <div v-on:click='handle0'> <button v-on:click.stop='handle1'>点击1</button> </div> <div> <a href="http://www.baidu.com" v-on:click.prevent='handle2'>百度</a> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 事件绑定-事件修饰符 */ var vm = new Vue({ el: '#app', data: { num: 0 }, methods: { handle0: function(){ this.num++; }, handle1: function(event){ // 阻止冒泡 // event.stopPropagation(); }, handle2: function(event){ // 阻止默认行为 // event.preventDefault(); } } }); </script>5.按键修饰符
.enter回车键 <input v-on:keyup.enter='submit'> .delete删除键 <input v-on:keyup.enter='handle'>6.自定义按键修饰符
全局config.keyCodes对象 Vue.config.keyCodes.f1 = 112; //ascii码 <div id="app"> <input type="text" v-on:keyup.aaa='handle' v-model='info'> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 事件绑定-自定义按键修饰符 规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值 或者直接@keyup.65 = handle;表示绑定在a键上 */ Vue.config.keyCodes.aaa = 65 var vm = new Vue({ el: '#app', data: { info: '' }, methods: { handle: function(event){ console.log(event.keyCode) } } }); </script>