vue 基础-->进阶 教程(2): 指令、组件
第二章 建议学习时间4小时 课程共3章
前面的nodejs教程并没有停止更新，因为node项目需要用vue来实现界面部分，所以先插入一个vue教程，以免不会的同学不能很好的完成项目。
本教程，将从零开始，教给大家vue的基础、高级操作、组件封装等，再配合前面的Nodejs后台，实现一个完整的项目。
指令
上一章我们讲的 以v开头的属性都是vue的指令， 比如 v-bind
除了上一章的指令，大家再掌握以下指令
v-on绑定事件 基本格式 v-on:事件名="方法名"
下面案例中，使用v-on绑定了click事件，当点击的时候，改变value的值。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
line-height: 30px;
padding: 10px;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body> <div id="box">
<button v-on:click="clickFn">{{value}}</button> </div> <script>
var vm = new Vue({
el:"#box",
data:{
value:"按钮"
},
methods:{
clickFn:function(){
this.value = "点击了按钮"; //这里的this.value，可以直接调用或修改 data中的value的值。
}
}
})
</script> </body>
</html>
绑定事件的简写方式，
上面案例中的 v-on: 可以使用 @替换，作用一样
其他事件，一般只需要将原生的事件的on去掉即可，比如 onkeyup --> keyup
v-html 绑定html内容 下面的代码就会将 data中的value作为 html显示
<div id="box">
<p v-html="value"></p>
</div> <script> var vm = new Vue({
el:"#box",
data:{
value:"<h3>按钮</h3>"
}
})
</script>
v-text 绑定html内容 下面的代码就会将 data中的value作为文本显示
<div id="box">
<p v-text="value"></p>
</div> <script> var vm = new Vue({
el:"#box",
data:{
value:"<h3>按钮</h3>"
}
})
</script>
自定义指令
定义一般指令，使用 Vue.directive()定义指令，然后在标签中使用 v-指令 调用
在定义指令中 el 就代表 标签 dom ，可以直接执行js操作。
<div id="box">
<p v-test>测试：红色</p>
<p v-test-blue>测试：蓝色</p> </div> <script>
/*自定义指令*/
Vue.directive("test",function(el){ /* el就是页面的dom */
el.style.color = "red";
});
/* 如果使用了驼峰命名指令，那么页面使用的时候需要改成横杠链接 */
Vue.directive("testBlue",function(el){
el.style.color = "blue";
}); var vm = new Vue({
el:"#box",
data:{
}
})
</script>
指令传参数
在标签中调用 指令=“json格式参数” ，然后在指令定义的回调函数的第二个参数中，就可以接受到这参数，如下代码：
<div id="box">
<p v-test-orange="{'color':'orange'}">测试：橘色</p>
</div> <script>
/*自定义指令*/
Vue.directive("test-orange",function(el,args){ /*传过来的json格式参数，存在参数 args.value 中*/
el.style.color = args.value.color;
}); var vm = new Vue({
el:"#box",
data:{
}
})
</script>
局部指令
上面定义的是全局指令，如果要定义局部指令，只需要在 new Vue实例的时候，传的json参数中写入 directives即可，如下：
<div id="box">
<p v-test-orange="{'color':'orange'}">测试：橘色</p>
</div> <script> var vm = new Vue({
el:"#box",
data:{
},
directives:{ /* 在new Vue内部，可以使用 directives定义多个指令，和前面直接通过 Vue.dirctive一样的写法。 */
"test-orange":function(el,args){ /*传过来的json格式参数，存在 args.value中*/
el.style.color = args.value.color;
},
"test-other":function(){ }
}
})
</script>
组件
上面的指令只是实现了操作dom的功能，而组件可以将具备特定功能的html代码块进行封装，以实现组件化，重用的功能。
基本使用如下，具体代码的意义在注释中。
<div id="box">
<who></who><!-- 使用和组件名称相同的html标签调用 -->
</div> <script> var item = Vue.extend({ /*使用extend添加一个对象*/
data:function(){ /*在data中返回的对象，就是组件具备的数据源 和实例中的 data作用一致*/
return {
msg:"他是小明" /*数据包含一个数据msg*/
}
},
template:'<h1>{{msg}}</h1>' /* template（模板）是用于显示在页面中的内容，模板的值，就是一个html字符串，内部可以自由使用值或指令 */
}); Vue.component("who",item); /*使用 Vue.componet 将上面的对象定义为组件*/ var vm = new Vue({
el:"#box",
data:{
}
})
</script>
浏览器运行结果：
我们可以看到，我们定义的 h1中包含msg值的代码被显示在了页面中
练习：一个带有事件操作的组件
当点击文字的时候，文字会改变。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
line-height: 30px;
padding: 10px;
}
</style>
<script src="vue.js"></script>
</head>
<body> <div id="box">
<who></who>
</div> <script> var item = Vue.extend({
data:function(){
return {
msg:"他是小明"
}
},
template:'<h1 @click="change">{{msg}}</h1>',
methods:{
change:function(){
this.msg = "谁说他是小明的"
}
}
});
Vue.component("who",item); var vm = new Vue({
el:"#box",
data:{
}
})
</script> </body>
</html>
开始显示
点击之后显示
局部组件
写法和全局组件基本一致，只是将声明组件放在了 vue实例的配置项中，使用 components可以配置多个组件。由于组件内容不较多，可以先使用变量声明好，再负值到组件中，如下代码的做法
具体的代码解释在注释中 注：如果申明的组件名是驼峰是命名的，那么在标签中，需要转化成 横杠 链接的小写名称
<div id="box">
<who-haha></who-haha> <!-- 驼峰式命名的变量，在html中使用的时候，要转化成横杠的方式 -->
</div> <script> var item = Vue.extend({
data:function(){
return {
msg:"哈哈"
}
},
template:'<h1 @click="change">{{msg}}</h1>',
methods:{
change:function(){
this.msg = "呵呵"
}
}
}); var vm = new Vue({
el:"#box",
data:{},
components:{ //可以配置多个内部组件
"whoHaha":item //组件命名的名字，最好都用引号引起来（当然，单个单词的时候不用引号也不报错）
}
}) </script>
开始显示
点击之后显示
将模板独立编写
有的时候我们模板的html代码很多，字符串形式写在js中不好写，可以将它独立写在html中，然后调用。
使用 template 标签定义模板 ，将模板内容写在 template标签内，指定 一个 id，这样再定义组件的时候，只需要传入模板id，就可以关联起来了。
如下代码：将上一步的代码中的模板提取了出来。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
line-height: 30px;
padding: 10px;
}
</style>
<script src="vue.js"></script>
</head>
<body> <div id="box">
<who-h></who-h>
</div> <template id="temp01"> <!-- template 用来定义模板，需要指定一个id -->
<div> <!-- 模板中的内容，只能保护在唯一一个标签中 （最外层不能有多个标签） -->
<h1 @click="change">{{msg}}</h1>
<p>模板示例，示例，示例</p>
</div> </template> <script> var item = Vue.extend({
data:function(){
return {
msg:"哈哈"
}
},
template:'#temp01', //传入id调用模板
methods:{
change:function(){
this.msg = "呵呵"
}
}
}); var vm = new Vue({
el:"#box",
data:{},
components:{ //可以配置多个内部组件
"who-h":item //组件命名的时候，最好都用引号引起来（当然，单个单词的时候不用也不报错）
}
}) </script> </body>
</html>
今天就讲到这里，明天我们讲解：组件嵌套，父子组件、兄弟组件之间的通讯
关注公众号，博客更新即可收到推送
vue 基础-->进阶 教程(2): 指令、组件的更多相关文章
- vue 基础-->进阶 教程(2): 指令、自定义指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制
前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...
- vue 基础-->进阶 教程(1): 基础（数据绑定）
第一章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- Vue基础进阶 之 自定义指令
自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: in ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- Vue.js 系列教程 2：组件，Props，Slots
原文:intro-to-vue-2-components-props-slots 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第二部分.在这一部分,我们将学习组件, ...
- Vue基础进阶 之 列表过渡
在前面的博客我们一直在操作单个元素的过渡,如果是对多个元素过渡,例如列表,这时就要用到<transition-group>这个组件了: 如何使用:将要操作的列表元素放在<transi ...
- Vue基础进阶 之 过渡效果
进入/离开过渡效果:Vue在插入.更新或移除DOM时,可以设置一些动画效果: 如何使用过渡效果:利用<transition></transition>组件将需要应用的过渡效果的 ...
- Vue基础进阶 之 实例方法--生命周期
在上一篇博客中我们知道生命周期的方法: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destroy:销毁Vue实例,清理数据绑定,移除事件监听: vm.$nextTick:将方法中的 ...
随机推荐
- Redis开启远程登录连接。
今天使用jedis客户端api连接远程连接redis的时候,一直报错,如下: redis.clients.jedis.exceptions.JedisConnectionException: java ...
- Day5模块-time和datetime模块
模块是封装一段代码来实现某种功能. 分为三类: 1.自定义模块 2.标准库,内置模块 3.开源模块 -------------------------------------------------- ...
- 几张图带你轻轻松松了解小程序和APP的区别
微信"小程序"的公测一开放,立即在朋友圈刷屏无数,仿佛人人都在互联网圈.但是因为微信限制,程序还不能发布使用,所以也极少人看到真正的小程序是怎么样的. 小程序驿站专注微信小程序的开 ...
- The dplyr package has been updated with new data manipulation commands for filters, joins and set operations.（转）
dplyr 0.4.0 January 9, 2015 in Uncategorized I’m very pleased to announce that dplyr 0.4.0 is now av ...
- TCP--telnet为何在127s后返回？
背景 近期编写了监控业务服务器的脚本,主要原理是用shell脚本(运行shell的机器称之为监控机)调用项目组专用的接口测试工具,对指定的业务服务器进行业务操作,根据接口测试工具的返回结果判断业务服务 ...
- JDFS:一款分布式文件管理实用程序第二篇(更新升级、解决一些bug)
一 前言 本文是<JDFS:一款分布式文件管理实用程序>系列博客的第二篇,在上一篇博客中,笔者向读者展示了JDFS的核心功能部分,包括:服务端与客户端部分的上传.下载功能的实现,epoll ...
- 最近用django做了个在线数据分析小网站
用最近做的理赔申请人测试数据集做了个在线分析小网站. 数据结构,算法等设置都保存在json文件里.将来对这个小破站扩充算法,只修改一下json文件就行. 当然,结果分析还是要加代码的.页面代码不贴了, ...
- 【java8】慎用java8的foreach循环
虽然java8出来很久了,但是之前用的一直也不多,最近正好学习了java8,推荐一本书还是不错的<写给大忙人看的javase8>.因为学习了Java8,所以只要能用到的地方都会去用,尤其是 ...
- 【Netty】WebSocket
一.前言 前面学习了codec和ChannelHandler之间的关系,接着学习WebSocket. 二.WebSocket 2.1. WebSocket介绍 WebSocket协议允许客户端和服务器 ...
- c++概括
c++到底是什么样的语言 在过去的几十年,计算机技术的发展令人吃惊,当前的笔记本电脑的计算速度和存储信息的能力超过了20世纪60年代的大型机.20世纪七十年代,C和Pascal语言引领人们进入结构化编 ...