vue click事件_vue学习记录一

今天在自隔离的房间里好无聊，决定开始学习并且立即使用这个前端框架来做个页面，https://www.dx.com/ , 为什么选择这个页面呢，因为这个是我的老东家，并且感觉这个页还还挺复杂的，有一定的挑战性。

一、vue,关于这个前端框架，需要以下的简单说明一下，以下的内容如果有错误，请网友们指正。

1、干嘛用的：vue 提供了自动的数据结构与dom自绑定功能，说明白一些，就是相对于传统的jQuery开发，vue免掉了对dom节点的操作，直接对数据结构进行处理即可立即反映到dom节点，并且渲染出来。一句话,jQuery 对页面的处理不仅仅需要处理内存中的数据，还需要进行append或者remove 等操作处理dom元素，而vue只需要处理内存中的数据。所以vue开发可以花更多的时间精力处理数据结构。

2、vue 提供了什么，vue是js框架，但是也可以当做一门独立的语言来看待，作为一种开发语言，它给我们提供了什么呢？

1、一门独立语言需要什么？肯定是语法呀，独一无二的让别人认识的东东，vue 当然得使用v- 来显摆啦。

1）逻辑判断：if...else if...else ,vue 当然得写成 v-if.....v-else if....v-else ;

2）循环：for while ,vue 当然得写成 v-for ;

2、vue是处理html的dom的语言，它得给我们提供什么呢？

1）模板 template,当然得提供这个，难道让我们什么都写死好了在dom吗，有些节点有时候有，有时候没有，写在template再加上js 处理，多快活自在。

2）事件，dom元素需要事件的，人家需要表现性的。vue得给，v-on ，就如jQuery的$.on() 并且还可以更加简单写呢，例如：v-on:click="clickFunction" 可以写成 @click="clickFunction",牛吧，又省掉几个字。当然事件有各种牛逼的功能，例如有事无事与爸爸妈妈说一下，那就是冒泡罗。如果有一天我无意找到了好几个女朋友了，不想告诉他们怎么办呢，那就乖乖保密吧，哈哈。使用

<!-- 阻止单击事件继续传播 -->

<av-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->

<formv-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 --><av-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 --><formv-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->

<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --><divv-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->

<!-- 即事件不是从内部元素触发的 --><divv-on:click.self="doThat">...</div>

3）属性,dom元素都爱美的，需要花枝招展。vue得给，v-bind ,如同jQuery的$.attr(),例如：

v-bind:class，还可以写成 :class 呢，哇，少写几个字，拿时间来画眉，泡仔去。

4）dom元素与数据爱的浓浓，你变我也变，你好我也好，咋办？v-model,双向绑定还不行吗？

3、很多事情都是会有连锁的，例如，女朋友发工资了，会给我10%的当零花钱，心情好呢会快一些给，心情不好会慢一些给，怎么办？那就使用 computed 罗。我很帅，女朋友一发工资就得给我钱，一秒都不能延迟，那就watch ，监控着。

var vm = new Vue({

el: '#example',

data: { message: 'Hello' },

computed: {

// 计算属性的 getter

reversedMessage: function () {

// `this` 指向 vm 实例

returnthis.message.split('').reverse().join('')

} },

watch: {

// 如果 `question` 发生改变，这个函数就会运行

question: function (newQuestion, oldQuestion) {

this.answer = '如果发工资立马给钱'

this.debouncedGetAnswer()

} }

})

4、一个页面好复杂，有很多功能模块，有的模块有很多页面需要使用，人懒，怎么办？哇，

component 来啦，component 可以提供大家独立开发，再组装，大家都可以干自己的事啦。

5、组件的数据需要过滤，前面怎么传到条件来组件逻辑中呢，那就是组件通话（通讯）啦。组件中的props 可以获取到传来的值。

第一次笔记差不多啦，都是一些概念，明天开始搭项目，写页面，先写好http://dx.com的静态页面，写好css，这个也是一个很重的工作呢，哇，加油啦，火烈高，病毒不入侵，最后强调一下此次学习的任务。