道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过首。

青史几行名姓，北茫无数荒丘，前人撒种后人收，无非是龙争虎斗！

事件修饰符

1、使用 .stop 阻止冒泡

<div class="inner" @click="div1Handler"><input type="button" value="戳他" @click.stop="btnHandler">
</div>

2、使用 .prevent 阻止默认行为

<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>

3、使用 .capture 实现捕获触发事件的机制

<div class="inner" @click.capture="div1Handler"><input type="button" value="戳他" @click="btnHandler">
</div>

4、使用 .self 实现只有点击当前元素时候，才会触发事件处理函数

<div class="inner" @click="div1Handler"><input type="button" value="戳他" @click="btnHandler">
</div>

5、使用 .once 只触发一次事件处理函数

<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>

6、.stop 和 .self 的区别

<div class="outer" @click="div2Handler"><div class="inner" @click="div1Handler"><input type="button" value="戳他" @click.stop="btnHandler"></div>
</div><div class="outer" @click="div2Handler"><div class="inner" @click.self="div1Handler"><input type="button" value="戳他" @click="btnHandler"></div>
</div>

.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为

Vue实例

<script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {},methods: {div1Handler() {console.log('这是触发了 inner div 的点击事件')},btnHandler() {console.log('这是触发了 btn 按钮 的点击事件')},linkClick() {console.log('触发了连接的点击事件')},div2Handler() {console.log('这是触发了 outer div 的点击事件')}}});
</script>

V-model和数据双向绑定

<body><div id="app"><h4>{{ msg }}</h4><input type="text" style="width:100%;" v-model="msg"></div><script>// 创建 Vue 实例，得到 ViewModelvar vm = new Vue({el: '#app',data: {msg: '大家都是好学生，爱敲代码，爱学习，爱思考，简直是完美，没瑕疵！'},methods: {}});</script>
</body>

v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V，无法实现数据的双向绑定
<input type="text" v-bind:value="msg" style="width:100%;">
使用 v-model 指令，可以实现表单元素和 Model 中数据的双向数据绑定
注意： v-model 只能运用在表单元素中

Vue中使用样式

1、数组

<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>

2、数组中使用三元表达式

<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>

数组中嵌套对象

<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>

2、直接使用对象

<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>

3、使用内联样式

直接在元素上通过 :style 的形式，书写样式对象

h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>

将样式对象，定义到 data 中，并直接引用到 :style 中

在data上定义样式：

data: {h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}

在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="h1StyleObj">这是一个善良的H1</h1>

在data上定义样式：

data: {h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },h1StyleObj2: { fontStyle: 'italic' }
}

在元素中，通过属性绑定的形式，将样式对象应用到元素中：

<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>

今天人在外面，作业来不及看了，明天一起放OVO

琪露诺学习Vue.js的第二天相关推荐

vue.js视频课程_在此免费课程中学习Vue.js！ ✨
vue.js视频课程 by ZAYDEK 由ZAYDEK 在此免费课程中学习Vue.js! ✨ (Learn Vue.js in this free course! ?✨) 让我们做点Vueseful ...
UESTC 1808 琪露诺的算术教室打表＋特判(找规律)
题目琪露诺是个聪明的精灵,她非常擅长和数字有关的游戏 . 直到有一天灵梦进入了迷雾深林,她遇见了琪露诺,并向她提出了一个问题. 统计n个一位数字a组成的数乘以一位数b的结果中有多少个一位数字d.不超 ...
eclipsevue代码怎么运行_[Java教程]使用eclipse初步学习vue.js操作
[Java教程]使用eclipse初步学习vue.js操作 0 2017-11-26 19:00:06 一.vue.js的初步认识 https://unpkg.com/vue ">vu ...
【洛谷】【动态规划+单调队列】P1725 琪露诺
[题目描述:] 在幻想乡,琪露诺是以笨蛋闻名的冰之妖精. 某一天,琪露诺又在玩速冻青蛙,就是用冰把青蛙瞬间冻起来.但是这只青蛙比以往的要聪明许多,在琪露诺来之前就已经跑到了河的对岸.于是琪露诺决定到河 ...
洛谷P1725琪露诺【单调队列+dp】
题目描述在幻想乡,琪露诺是以笨蛋闻名的冰之妖精. 某一天,琪露诺又在玩速冻青蛙,就是用冰把青蛙瞬间冻起来.但是这只青蛙比以往的要聪明许多,在琪露诺来之前就已经跑到了河的对岸.于是琪露诺决定到河岸去追 ...
vue.js 天气插件_天气检查我的项目以学习Vue.js
vue.js 天气插件天气 (vue-weather) Weather checking me project for learning Vue.js. 天气检查我的项目以学习Vue.js. Vie ...
东方幻想乡系列模拟赛T2琪露诺题解
题目地址: http://fzoj.xndxfz.com/JudgeOnline/problem.php?id=2146&csrf=17peCLMJM49glhqlg9KaD7Agf5o5QY ...
学习vue.js 第一天
最近听到很多人都在用Vue.js ,我也想凑凑热闹,来个入门啥的 ,要不以后人家说,啥都不知道,多low 看到官网是这样介绍Vue.js Vue.js(读音 /vjuː/, 类似于 view) 是 ...
学习Vue.js实战（一）
Vue.js是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. (所谓Progressive,就是可以一步一步的有阶段性的使用vue.js.其简单小巧,压 ...

琪露诺学习Vue.js的第二天

道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过首。

青史几行名姓，北茫无数荒丘，前人撒种后人收，无非是龙争虎斗！

事件修饰符

1、使用 .stop 阻止冒泡

2、使用 .prevent 阻止默认行为

3、使用 .capture 实现捕获触发事件的机制

4、使用 .self 实现只有点击当前元素时候，才会触发事件处理函数

5、使用 .once 只触发一次事件处理函数

6、.stop 和 .self 的区别

Vue实例

V-model和数据双向绑定

Vue中使用样式

1、数组

2、数组中使用三元表达式

3、使用内联样式

琪露诺学习Vue.js的第二天相关推荐

最新文章

热门文章

琪露诺学习Vue.js的第二天

道德三皇五帝， 功名夏后商周， 五霸七雄闹春秋， 顷刻兴亡过首。

青史几行名姓， 北茫无数荒丘， 前人撒种后人收， 无非是龙争虎斗！

事件修饰符

1、使用 .stop 阻止冒泡

2、使用 .prevent 阻止默认行为

3、 使用 .capture 实现捕获触发事件的机制

4、使用 .self 实现只有点击当前元素时候，才会触发事件处理函数

5、使用 .once 只触发一次事件处理函数

6、.stop 和 .self 的区别

Vue实例

V-model和数据双向绑定

Vue中使用样式

1、数组

2、数组中使用三元表达式

3、使用内联样式

琪露诺学习Vue.js的第二天相关推荐

最新文章

热门文章

道德三皇五帝，功名夏后商周，五霸七雄闹春秋，顷刻兴亡过首。

青史几行名姓，北茫无数荒丘，前人撒种后人收，无非是龙争虎斗！

3、使用 .capture 实现捕获触发事件的机制