1.第一个vue项目
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> {{msg}} </div> <script type="text/javascript"> #实例化 let vm=new Vue({ el:'#app', data:{ msg:'Hello Vue!!!' } }); </script> </body> </html>2.vue特有的模板语法
1)、插值表达式 2)、指令 双向绑定: 3)、事件绑定（处理） 4)、属性绑定 5)、样式绑定 6)、分支循环结构3.指令
v-textv-oncev-htmlv-cloakv-prev-model v-model使用方法双向绑定数据 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <style type="text/css"> </style> <body> <div id="app"> <input type="text" placeholder="请输入用户名:" v-model="username"/> <h4>把用户名输入到了这里:{{username}}</h4> </div> <script type="text/javascript"> let vm=new Vue({ el:'#app', data:{ username:'' } }); </script> </body> </html>MVC：后台分层的开发概念。 MVVM：是前端视图分层的概念，model，view，viewmodel三部分
事件绑定
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <style type="text/css"> </style> <body> <div id="app"> <h4>{{num}}</h4> <button @click="btnHandle" type="button">按钮1</button><br> <button @click="num++" type="button">按钮2</button><br> <button @click="btnHandle()" type="button">按钮3</button> <button v-on:click="tran(123,$event)" type="button">按钮4</button> </div> <script type="text/javascript"> let vm=new Vue({ el:'#app', data:{ num:1 }, methods:{ btnHandle:function(){ this.num++ }, tran:function(val,event){ console.log(val) console.log(event.target.innerHTML) } } }); </script> </body> </html>事件修饰符
.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡 .prevent： 等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播） .capture： 与事件冒泡的方向相反，事件捕获由外到内 .self： 只会触发自己范围内的事件，不包含子元素 .once： 只会触发一次
键盘监听事件
属性动态赋值 v-bind
<body> <div id="app"> <a v-bind:href="hunan">湖南农业大学</a><br> <a :href="hunan">湖南农业大学</a> </div> <script type="text/javascript"> let vm=new Vue({ el:'#app', data:{ hunan:'http://www.hunau.edu.cn' } }); </script>