Vue.js教程（一）–入门- Starterknow

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

适合人X了解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:functiоn(){ console.log(“printf”) }, print:functiоn(){ console.log(“print”) }, show:functiоn(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:functiоn(){ console.log(“printf”) }, print:functiоn(){ console.log(“print”) }, show:functiоn(){ 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:functiоn(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:functiоn(e){ console.log(“lianjie”); } } }) mui.init() </script> </body></html>

1.5 键盘事件

1.6 事件修饰符

<!– 阻止单击事件继续传播 –><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>

原创文章，作者：starterknow，如若转载，请注明出处：https://www.starterknow.com/126554.html

Vue.js教程（一）–入门

相关文章：

相关推荐

请登录

联系我们