从零开始的vue学习笔记(三)
事件处理
v-on
指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码,示例:
<div id="example-2">
<!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>
<!-- 点击按钮会依次显示'Hello Vue.js!'和Button>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // => 这种调用只会弹窗一次,显示'Hello Vue.js!'
- 事件修饰符
Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的,包括:- .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>
注意:使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。
- 其他修饰符(基本用不到,用到了再查文档就行)
- 按键修饰符
- 系统修饰符
- .exact 修饰符
- 鼠标按钮修饰符
组件基础篇
Vue示例中的data类型:Object | Function;限制:组件
的定义只接受 function,这一点尤其需要注意,data详情用法见链接api
例子:
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })
同一个组件可以任意次的复用,正是由于data
返回的是函数,所以每个实例可以维护一份被返回对象的独立的拷贝,否则,返回的是对象的话,所有的实例将共享引用同一个数据对象,这样显然不合适
组件注册
- 全局注册
全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例,也包括其组件树中的所有子组件的模板中。 - 局部注册
- 全局注册
prop
Prop 是你可以在组件上注册的一些自定义特性,用来传递数据给组件,组件默认可以有任意数量的 prop ,可以用一个props
选项将其包含在该组件可接受的 prop 列表中,其中v-for
迭代数据,v-bind
绑定数据,key
作为唯一标示区别等用法跟前面基本语法保持一致。
例子:<div id="blog-post-demo" class="demo">
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
></blog-post>
</div>
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
}) new Vue({
el: '#blog-post-demo',
data: {
posts: []
},
created: function () {
// Alias the component instance as `vm`, so that we
// can access it inside the promise function
var vm = this
// Fetch our array of posts from an API
fetch('https://jsonplaceholder.typicode.com/posts')
.then(function (response) {
return response.json()
})
.then(function (data) {
vm.posts = data
})
}
})
fetch请求的返回数据格式为:
[
{
userId: 1,
id: 1,
title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
body: "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto"
},
{
userId: 1,
id: 2,
title: "qui est esse",
body: "est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non debitis possimus qui neque nisi nulla"
},
]
单个根元素
组件template部分不能写多个单独的元素,必须用父元素包裹起来。
错误例子:template: '<h3>{{ title }}</h3><h1>abc</h1>'
正确例子:
template: '<div class="test"><h3>{{ title }}</h3><h1>abc</h1></div>'
属性传递多个值示例:
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
></blog-post>
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
</div>
`
})
这样传递的post对象的所有属性都可以迭代出来,上面例子中template用到了``这个JavaScript 的模板字符串来写,对于多行书写更优雅一些。
监听子组件事件
这部分初看很难理解,需要结合实际代码效果多看几遍,也可以参考这个文章
父级组件可以像处理 native DOM 事件一样通过v-on
监听子组件实例的任意事件<blog-post
...
v-on:enlarge-text="postFontSize += 0.1"
></blog-post>
同时子组件可以通过调用内建的
$emit
方法 并传入事件名称来触发一个事件<button v-on:click="$emit('enlarge-text')">
Enlarge text
</button>
有了这个
v-on:enlarge-text="postFontSize += 0.1"
监听器,父级组件就会接收该事件并更新 postFontSize 的值。emit的用法参考api。
可以使用 $emit 的第二个参数来抛出一个特定的值<button v-on:click="$emit('enlarge-text', 0.1)">
Enlarge text
</button>
然后当在父级组件监听这个事件的时候,我们可以通过 $event 访问到被抛出的这个值
<blog-post
...
v-on:enlarge-text="postFontSize += $event"
></blog-post>
或者,如果这个事件处理函数是一个方法:
<blog-post
...
v-on:enlarge-text="onEnlargeText"
></blog-post>
那么这个值将会作为第一个参数传入这个方法:
methods: {
onEnlargeText: function (enlargeAmount) {
this.postFontSize += enlargeAmount
}
}
解释一下:
button v-on:click="$emit('enlarge-text', 0.1)"
这里的button相对于blog-post来说是子组件,所以它的click事件可以抛出让blog-post父组件接收,回调方法可以写在blog-post组件的methods里面定义一个方法名,例如:
button v-on:click="clickfun"
methods: {
clickfun:function () {
console.log('abc');
this.$emit('enlarge-text', 0.1);
}
}
通过$emit方法抛出新的自定义的监控方法
enlarge-text
,然后vue的根实例,即blog-post的父组件通过监听器去接收和回调处理这个方法,emit传出来的0.1被方法的第一个参数接收:<blog-post
...
v-on:enlarge-text="sizeLarge"
></blog-post>
methods: {
sizeLarge:function (value) {
this.postFontSize += enlargeAmount
}
}
组件上使用
v-model
(难以理解就后面再看)Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
<custom-input v-model="searchText"></custom-input>
过插槽分发内容
和 HTML 元素一样,我们经常需要向一个组件传递内容
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
解析 DOM 模板时的注意事项
有些 HTML 元素,诸如<ul>
、<ol>
、<table>
和<select>
,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如<li>
、<tr>
和<option>
,只能出现在其它某些特定的元素内部。错误示例:<table>
<blog-post-row></blog-post-row>
</table>
这个自定义组件 会被作为无效的内容提升到外部,并导致最终渲染结果出错
正确示例:<table>
<tr is="blog-post-row"></tr>
</table>
需要注意的是如果我们从以下来源使用模板的话,这条限制是不存在的:
- 字符串 (例如:template: '...')
- 单文件组件 (.vue)
<script type="text/x-template">
从零开始的vue学习笔记(三)的更多相关文章
- vue学习笔记(三)class和style绑定
前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...
- Vue学习笔记三:v-bind,v-on的使用
目录 v-bind:绑定属性值,内容相当于js,缩写: v-on:绑定方法,缩写@ 总结 v-bind:绑定属性值,内容相当于js,缩写: 我添加了一个input标签,如下 <input typ ...
- 从零开始的vue学习笔记(五)
单文件组件 Vue.component 来定义全局组件的缺点: 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复 字符串模板 (String te ...
- 从零开始的vue学习笔记(一)
前言 项目要用vue.js,今天开始自学vue.js官方教程,记录下自己的学习摘要,方便后面查阅(此笔记按照学习天数,每天一篇) Vue.js是什么 Vue是一套用于构建用户界面的渐进式框架,Vue ...
- 从零开始的vue学习笔记(七)
前言 今天花一天时间阅读完vuex的官方文档,简单的做一下总结和记录 Vuex是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,以前的符合"单向数据流"理念的 ...
- 从零开始的vue学习笔记(八)
前言 今天花一天时间阅读完Vue Router的官方文档的基础部分,简单的做一下总结和记录 Vue Router是什么 Vue Router 是 Vue.js 官方的路由管理器,用于构建单页应用(SP ...
- VUE 学习笔记 三 模板语法
1.插值 a.文本 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 <span>Message: {{ msg }}</span> v-once ...
- vue学习笔记(三):vue-cli脚手架搭建
一:安装vue-cli脚手架: 1:为了确保你的node版本在4.*以上,输入 node -v 查看本机node版本,低于4请更新. 2:输入: npm install -g vue-cli ...
- 从零开始的vue学习笔记(二)
数据与方法 当一个 Vue 实例被创建时,它将 data 对象中的所有的属性加入到 Vue 的响应式系统中.data的数据和视图同步更新. 实例创建后添加一个新的属性,对这个属性的的改动将不会触发任何 ...
随机推荐
- springboot打印SQL及多环境配置
1-在控制台打印sql语句 在springBoot+Mybatis中,要想在控制台日志显示SQL的执行情况,简单设置即可:在properties新增: logging.level.com.anson. ...
- 2019-2020-9 20199317 《Linux内核原理与分析》第九周作业
第8章 进程的切换和系统的一般执行过程 1 进程调度的时机 1.1 硬终端与软中断 进程调度的时机都与中断相关,中断有很多种,都是程序执行过程中的强制性转移,转移到操作系统内核相应的处理程序.中 ...
- OC循环方法推荐-块循环遍历(比for循环好用)
最近在看一本书<Effective OC 2.0>,今天看到有个tip是OC适中循环各自优劣性,作者最终推荐此块循环. 阅读时思考了下块循环是否方便实现内部循环终止外部循环的问题. 于是做 ...
- JQuery基础之获取和设置标签内容
JQuery基础之获取和设置标签内容方法,如下图: 代码实现: <script src="JS/jquery-1.12.4.min.js"></script> ...
- luogu P3939 数颜色 |vector
题目描述 小 C 的兔子不是雪白的,而是五彩缤纷的.每只兔子都有一种颜色,不同的兔子可能有 相同的颜色.小 C 把她标号从 1 到 n 的 n 只兔子排成长长的一排,来给他们喂胡萝卜吃. 排列完成后, ...
- 【权限管理系统】Spring security(三)---认证过程(原理解析,demo)
在前面两节Spring security (一)架构框架-Component.Service.Filter分析和Spring Security(二)--WebSecurityConfigurer配 ...
- react-native Android release打包失败
npm run build报错(android) react-native 0.5x在安卓环境 gradle 3.x版本下编译release版本的时候提示编译失败,但是debug模式下是没有问题的. ...
- Spring Boot Validation,既有注解不满足,我是怎么暴力扩展validation注解的
前言 昨天,我开发的代码,又收获了一个bug,说是界面上列表查询时,正常情况下,可以根据某个关键字keyword模糊查询,后台会去数据库 %keyword%查询(非互联网项目,没有使用es,只能这样了 ...
- 2019CCPC秦皇岛 E题 Escape(网络流)
Escape Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total Su ...
- Pandas里面常用的一些数据分析函数总结
import pandas as pdimport numpy as np pandas 有两个主要的数据结构:Series 和 DataFrame:Series 是一个一维数组对象 ,它包含一组索引 ...