Vue.js初级教程：从入门到精通
发表时间: 2019-10-11 11:08
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
适合人群：了解HTML，CSS，JavaScript
一、第一个 Vue 应用
<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})运行结果：Hello Vue!
我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。
二、事件和属性
1、事件
1.1 事件简写
v-on:click="" 简写方式@click
1.2 事件对象$event
包含事件相关信息、如事件源、事件类型、偏移量 target、type、offset
1.3 事件冒泡
阻止事件冒泡：
a)原生js方式，依赖于事件对象（e.stopPropagation()）
<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../css/mui.min.css" rel="stylesheet" /> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">事件冒泡</h1> </header> <div class="mui-content" id="content"> <div @click="printf()"> <div @click="print()"> <div @click="show($event)">click me</div> </div> </div> </div> <script type="text/javascript" src="../js/vue.js"> </script> <script src="../js/mui.min.js"></script> <script type="text/javascript"> var vm=new Vue({ el:"#content", data:{ },methods:{ printf:function(){ console.log("printf") }, print:function(){ console.log("print") }, show:function(e){ console.log("show"); console.log(e.target.innerHTML);//DOM对象 e.stopPropagation();//阻止事件冒泡(原生js方式) } } }) mui.init() </script> </body></html>b)Vue方式，不依赖于事件对象 @click.stop
<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../css/mui.min.css" rel="stylesheet" /> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">事件冒泡</h1> </header> <div class="mui-content" id="content"> <div @click="printf()"> <div @click="print()"> <div @click.stop="show()">click me</div> </div> </div> </div> <script type="text/javascript" src="../js/vue.js"> </script> <script src="../js/mui.min.js"></script> <script type="text/javascript"> var vm=new Vue({ el:"#content", data:{ },methods:{ printf:function(){ console.log("printf") }, print:function(){ console.log("print") }, show:function(){ console.log("show") } } }) mui.init() </script> </body></html>1.4 事件默认行为
a)原生js方式（e.preventDefault()）
<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../css/mui.min.css" rel="stylesheet" /> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">阻止默认事件</h1> </header> <div class="mui-content" id="content"> <a href="#" @click="lianjie($event)">我是一个链接，点我</a> </div> <script type="text/javascript" src="../js/vue.js"> </script> <script src="../js/mui.min.js"></script> <script type="text/javascript"> var vm=new Vue({ el:"#content", data:{ },methods:{ lianjie:function(e){ console.log("lianjie"); e.preventDefault();//阻止默认事件(原生js方式) } } }) mui.init() </script> </body></html>b)Vue方式 @click.prevent
<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../css/mui.min.css" rel="stylesheet" /> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">阻止默认事件</h1> </header> <div class="mui-content" id="content"> <a href="#" @click.prevent="lianjie()">我是一个链接，点我</a> </div> <script type="text/javascript" src="../js/vue.js"> </script> <script src="../js/mui.min.js"></script> <script type="text/javascript"> var vm=new Vue({ el:"#content", data:{ },methods:{ lianjie:function(e){ console.log("lianjie"); } } }) mui.init() </script> </body></html>1.5 键盘事件
- 回车：@keydown.13 或 @keydown.enter
- 上：@keydown.38 或 @keydown.up
1.6 事件修饰符
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 --><!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 --><div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 --><!-- 即事件不是从内部元素触发的 --><div v-on:click.self="doThat">...</div><!-- 点击事件将只会触发一次 --><a v-on:click.once="doThis"></a><!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --><!-- 而不会等待 `onScroll` 完成 --><!-- 这其中包含 `event.preventDefault()` 的情况 --><div v-on:scroll.passive="onScroll">...</div>
2. 属性
2.1 属性绑定和属性简写
v-bind 用于属性绑定， v-bind:属性=""
属性的简写： v-bind:属性=""简写为 :属性=""
2.2 class和style属性
如下：
<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="../css/mui.min.css" rel="stylesheet" /> <style> .aa{ color: red; } .bb{ background: #007AFF; } .cc{ font-size: 20px; } </style> </head> <body> <div class="mui-content" id="content"> <!-- class属性 --> <!-- <div :class="aa">hello vue</div> --><!-- 这种方式不可以，Vue的属性绑定不能直接使用css样式 --> <!-- 方式1：变量形式 --> <div :class="class1">hello vue</div> <!-- 方式2：数组形式，同时引用多个 --> <div :class="[class1,class2]">hello vue</div> <!-- 方式3：json形式，常用！！！ --> <div :class="{aa:false,bb:true,cc:num>4}">hello vue</div> <!-- style属性 --> <div :style="style1">hello vue</div> <div :style="[style1,style2]">hello vue</div> </div> <script src="../js/mui.min.js"></script> <script src="../js/vue.js"></script> <script type="text/javascript"> mui.init(); var vm=new Vue({ el:"#content", data:{ class1:"aa", class2:"bb", num:5, style1:{color:'green',fontSize:'30px'}, style2:{backgroundColor:'gray'} } }) </script> </body></html>
鲁公网安备37020202000738号