Vue: 渐进式JavaScript框架
渐进式：声明式渲染 --> 组件系统 --> 客户端路由 --> 集中式状态管理 --> 项目构建
易用 ：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue
灵活：在一个库和一个完整框架之间自如伸缩
高效：20kb运行大小，超快虚拟DOM
原生JS ：
<div id="msg"></div> <script> var msg = ‘Hello Word‘; var div = document.getElementById(‘msg‘); div.innerHtml = msg; </script>
jQuery：
<div id="msg"></div> <script type="text/javascript" src = "js/jQuery.js"></script> <script> var msg = ‘Hello Word‘; $(‘#msg‘).html(msg); div.innerHtml = msg;
</script>
Vue：
<div id="app"> <div>{{msg}}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script> var vm = new Vue({ el: ‘#app‘, data:{ msg:‘Hellow Word!‘ } }) </script>
需要提供标签用于填充数据
引入vue.js 库文件
可以使用vue的语法做功能了
把vue提供的数据填充到标签里面
el ：元素的挂载位置（值可以是CSS选择器或者DOM元素）
data：模型数据（值是一个对象）
将数据填充到
HTMl中插值表达式支持基本的计算操作
概述编译过程的概念（Vue语法 --> 原生语法）
Vue代码 --> Vue框架 --> 原生js代码
原生js拼接字符串：就是将数据以字符串的方式拼接到HTMl标签中
缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期维护变得逐渐困难起来
使用前端模板引擎
优点：有了代码规则，代码的可读性提高了，方便后期的维护
缺点：没有专门提供事件机制
使用Vue特有的模板语法
前端渲染 就是将数据填充到HTMl页面中
差值表达式
指令
事件绑定
属性绑定
样式绑定
分支循环结构
指令的本质就是自定义属性，指令的格式：以v-开始（比如：v-cloak）
用来隐藏未编译的 Mustache 标签直到实例准备完毕，编译完成后在显示
提供样式
[v-cloak]{ display:none; }
在插值表达式所在的标签中添加v-cloak指令
<div v-cloak>{{msg}}</div>
v-text：填充纯文本
相比插值表达式更加简洁
<span v-text="msg"></span>
v-html ：填充HTML片段
存在安全问题
本网站内部数据可以使用，来自第三方的数据不可以使用
<div v-html="html"></div>
v-pre：填充原始信息
显示原始信息，跳过编译过程
<span v-pre>{{ this will not be compiled }}</span>
什么是响应式：
html5 中的响应式（屏幕尺寸的变化导致样式的变化）
数据的响应式（数据的变化导致页面内容的变化）
什么是数据绑定：
数据绑定：将数据填充到标签中
v-once只编译一次
显示内容后不在具有响应式功能
应用场景：如果显示的信息后续不需要在修改，就可以使用 v-once ,这样可以提高性能
v-model：指令用法
<input type=‘text‘ v-model=‘uname‘/>
MVVM设计思想
M(model)
V(view)
VM(View-Model)
v-on ：指令
<inpunt type="button" v-on:click=‘num++‘/>
v-on 简写形式：
<inpunt type=‘button‘@click=‘num++‘/>
直接绑定函数名称
<button v-on:click=‘say‘> 点击 </button>
调用函数
<button v-on:click=‘say()‘> 点击 </button>
普通参数和事件对象
<button v-on:click=‘say("hi,$event")‘> 点击 </button>
事件绑定-参数传递
如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是
$event
.stop ：阻止冒泡，调用 event.stopPropagation()
<a v-on:click.stop="handle">跳转</a>
.prevent：阻止默认行为，调用 event.preventDefault()
<a v-on:click.prevent="handle">跳转</a>
.left ：只当点击鼠标左键时触发(2.2.0版本可用)。
<a v-on:click.left="handle">跳转</a>
.right ： 只当点击鼠标右键时触发(2.2.0版本可用)。
<a v-on:click.right="handle">跳转</a>
.middle ：只当点击鼠标中键时触发(2.2.0版本可用)。
<a v-on:click.middle="handle">跳转</a>
.enter： 回车键
<input v-on:keyup.enter=‘submit‘/>
.delete：删除键
<input v-on:keyup.delete=‘submit‘/>
全局 config.keyCodes 对象
//f1 :自定义按键名字
//112：按键的标识
Vue.config.keyCodes.f1 = 112
可以使用下面代码得到按键的唯一标识：
<div id="app"> <input type="text" v-on:keyup="hander" v-model="info"> </div> <script type="text/javascript" src="js/vue.js"></script> <script> var vm = new Vue({ el: ‘#app‘, data:{ info:‘‘ }, methods: { hander: function(event){ //在控制台打印出按键的唯一标识 console.log(event.keyCode) } } }) </script>
自定义按键修饰符的规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应 event.keyCode 的值。
v-bind指令语法
<a v-bind:href=‘url‘>跳转</a>
缩写形式
<a :href=‘url‘>跳转</a>
对象处理
<div v-bind:class=" active: isActive "></div>
数组语法
<div v-bind:class= "[activeClass, errorClass]"></div>
样式绑定相关语法细节
对象绑定和数组绑定可以集合使用
<div v-bind:class= "[activeClass, errorClass,{text:‘isText‘}]"></div>
class绑定的值可以简化操作
默认的class如何处理？默认的class会保留
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .active{ border: 1px solid #000000; width: 100px; height: 100px; } .error{ background-color: #004444; } .text{ color: #ffff00; } </style> </head> <body> <div id="app"> <div v-bind:class="{active:‘isActive‘,error:‘isError‘}">哈哈哈哈</div> <div v-bind:class="[activeClass,errorClass,{text:‘isText‘}]">哈哈哈哈</div> <div v-bind:class="mainClass">哈哈哈哈</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script> var vm = new Vue({ el: ‘#app‘, data:{ isActive:‘true‘, isError:‘true‘, activeClass:‘active‘, errorClass:‘error‘, isText:‘text‘, mainClass:[‘active‘,‘error‘] } }) </script> </body> </html> ?
对象语法
<div v-binf:style="{color:activeColor,fontSize:fonSize}"></div>
数组语法
<div v-bind:style="[baseStyles,overridingStyles]"></div>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <div v-bind:style="{border:borderStyle,color:colorStyle,width:widthStyle,height:heightStyle}">哈哈哈哈</div> <div v-bind:style="objectStyle"></div> <div v-bind:style="[baseStyles,objectStyle]">哈哈哈哈</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script> var vm = new Vue({ el: ‘#app‘, data:{ colorStyle:‘#fff‘, widthStyle:‘100px‘, heightStyle:‘120px‘, borderStyle:‘1px solid red‘, objectStyle:{ border:‘1px solid blue‘, width:‘120px‘, height:‘100px‘ }, baseStyles:{ backgroundColor:‘#f4f444‘ } } }) </script> </body> </html> ?
v-if：根据表达式的值来有条件地渲染元素。
v-else：为 v-if 或者 v-else-if 添加“else 块”。
<div v-if=" max > 0.5"> Now you see me </div> <div v-else> Now you don‘t </div>
v-else-if :表示 v-if 的“else if 块”。可以链式调用.
<div v-if="tapy === ‘A‘"> A </div> <div v-else-if="tapy === ‘B‘"> B </div> <div v-else-if="tapy === ‘C‘"> C </div> <div v-else> Not A/B/C </div>
v-show：根据表达式之真假值，切换元素的 display控制元素样式是否显示
v-if 控制元素是否渲染到页面
v-show 控制元素是否显示（已经渲染到了页面）
v-for 遍历数组
<li v-for=‘item in list‘>{{item}}</li> <li v-for=‘(item,index) in list‘> {{item}}+ ‘---‘{{index}} </li>
key的作用：帮助Vue区分不同的元素，从而提高性能
<li :key=‘item.id‘ v-for=‘(item,index) in list‘>{{item}} + ‘---‘ + {{index}}</li>
v-for 遍历对象
<div v-for=‘(value, key, index) in object‘> </div>
使用原生js遍历对象
var obj = { uname : ‘Laity‘, age : 12, gender : ‘male‘ } for (var key in obj){ console.log(key,obj[key]); }
使用Vue遍历对象
<div id="app"> <div v-for="(value, key, index) in obj"> {{ value + ‘---‘ + key + ‘---‘ + index}} </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script> var vm = new Vue({ el: ‘#app‘, data:{ obj:{ uname : ‘Laity‘, age : 16, gender : ‘male‘ } } }) </script>
v-if和 v-for 结合使用
<div v-if=‘value==12‘ v-for=‘(value, key, index) in object‘></div>
原文：https://www.cnblogs.com/laity0117/p/14820905.html