第二章 建议学习时间4小时  课程共3章

前面的nodejs教程并没有停止更新，因为node项目需要用vue来实现界面部分，所以先插入一个vue教程，以免不会的同学不能很好的完成项目。

本教程，将从零开始，教给大家vue的基础、高级操作、组件封装等，再配合前面的Nodejs后台，实现一个完整的项目。

指令

上一章我们讲的 以v开头的属性都是vue的指令， 比如 v-bind

除了上一章的指令，大家再掌握以下指令

 v-on绑定事件   基本格式       v-on:事件名="方法名"

下面案例中，使用v-on绑定了click事件，当点击的时候，改变value的值。

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         body{
  12.             line-height: 30px;
  13.             padding: 10px;
  14.         }
  15.     </style>
  16.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  17. </head>
  18. <body>
  19.  
  20. <div id="box">
  21.     <button v-on:click="clickFn">{{value}}</button>
  22.  
  23. </div>
  24.  
  25. <script>
  26.     var vm = new Vue({
  27.         el:"#box",
  28.         data:{
  29.             value:"按钮"
  30.         },
  31.         methods:{
  32.             clickFn:function(){
  33.                 this.value = "点击了按钮";  //这里的this.value，可以直接调用或修改 data中的value的值。
  34.             }
  35.         }
  36.     })
  37. </script>
  38.  
  39. </body>
  40. </html>

绑定事件的简写方式，

上面案例中的 v-on:  可以使用 @替换，作用一样

其他事件，一般只需要将原生的事件的on去掉即可，比如  onkeyup -->  keyup

v-html 绑定html内容  下面的代码就会将 data中的value作为 html显示

  1. <div id="box">
  2.     <p v-html="value"></p>
  3. </div>
  4.  
  5. <script>
  6.  
  7.     var vm = new Vue({
  8.         el:"#box",
  9.         data:{
  10.             value:"<h3>按钮</h3>"
  11.         }
  12.     })
  13. </script>

v-text 绑定html内容  下面的代码就会将 data中的value作为文本显示

  1. <div id="box">
  2.     <p v-text="value"></p>
  3. </div>
  4.  
  5. <script>
  6.  
  7.     var vm = new Vue({
  8.         el:"#box",
  9.         data:{
  10.             value:"<h3>按钮</h3>"
  11.         }
  12.     })
  13. </script>

自定义指令

定义一般指令，使用 Vue.directive()定义指令，然后在标签中使用  v-指令 调用

在定义指令中  el 就代表 标签 dom ，可以直接执行js操作。

  1. <div id="box">
  2.     <p v-test>测试：红色</p>
  3.     <p v-test-blue>测试：蓝色</p>
  4.  
  5. </div>
  6.  
  7. <script>
  8.     /*自定义指令*/
  9.     Vue.directive("test",function(el){  /* el就是页面的dom */
  10.         el.style.color = "red";
  11.     });
  12.     /*  如果使用了驼峰命名指令，那么页面使用的时候需要改成横杠链接 */
  13.     Vue.directive("testBlue",function(el){
  14.         el.style.color = "blue";
  15.     });
  16.  
  17.     var vm = new Vue({
  18.         el:"#box",
  19.         data:{
  20.         }
  21.     })
  22. </script>

指令传参数

在标签中调用   指令=“json格式参数” ，然后在指令定义的回调函数的第二个参数中，就可以接受到这参数，如下代码：

  1. <div id="box">
  2.     <p v-test-orange="{'color':'orange'}">测试：橘色</p>
  3. </div>
  4.  
  5. <script>
  6.     /*自定义指令*/
  7.     Vue.directive("test-orange",function(el,args){  /*传过来的json格式参数，存在参数 args.value 中*/
  8.         el.style.color = args.value.color;
  9.     });
  10.  
  11.     var vm = new Vue({
  12.         el:"#box",
  13.         data:{
  14.         }
  15.     })
  16. </script>

局部指令

上面定义的是全局指令，如果要定义局部指令，只需要在 new Vue实例的时候，传的json参数中写入 directives即可，如下：

  1. <div id="box">
  2.     <p v-test-orange="{'color':'orange'}">测试：橘色</p>
  3. </div>
  4.  
  5. <script>
  6.  
  7.     var vm = new Vue({
  8.         el:"#box",
  9.         data:{
  10.         },
  11.         directives:{  /* 在new Vue内部，可以使用 directives定义多个指令，和前面直接通过 Vue.dirctive一样的写法。 */
  12.             "test-orange":function(el,args){  /*传过来的json格式参数，存在 args.value中*/
  13.                 el.style.color = args.value.color;
  14.             },
  15.             "test-other":function(){
  16.  
  17.             }
  18.         }
  19.     })
  20. </script>

 组件

上面的指令只是实现了操作dom的功能，而组件可以将具备特定功能的html代码块进行封装，以实现组件化，重用的功能。

基本使用如下，具体代码的意义在注释中。

  1. <div id="box">
  2.     <who></who><!-- 使用和组件名称相同的html标签调用 -->
  3. </div>
  4.  
  5. <script>
  6.  
  7.     var item = Vue.extend({  /*使用extend添加一个对象*/
  8.         data:function(){    /*在data中返回的对象，就是组件具备的数据源  和实例中的 data作用一致*/
  9.             return {
  10.                 msg:"他是小明"        /*数据包含一个数据msg*/
  11.             }
  12.         },
  13.         template:'<h1>{{msg}}</h1>'  /* template（模板）是用于显示在页面中的内容，模板的值，就是一个html字符串，内部可以自由使用值或指令 */
  14.     });
  15.  
  16.     Vue.component("who",item);   /*使用 Vue.componet 将上面的对象定义为组件*/
  17.  
  18.     var vm = new Vue({
  19.         el:"#box",
  20.         data:{
  21.         }
  22.     })
  23. </script>

浏览器运行结果：

我们可以看到，我们定义的 h1中包含msg值的代码被显示在了页面中

练习：一个带有事件操作的组件

当点击文字的时候，文字会改变。

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         body{
  12.             line-height: 30px;
  13.             padding: 10px;
  14.         }
  15.     </style>
  16.     <script src="vue.js"></script>
  17. </head>
  18. <body>
  19.  
  20.     <div id="box">
  21.         <who></who>
  22.     </div>
  23.  
  24.     <script>
  25.  
  26.         var item = Vue.extend({
  27.             data:function(){
  28.                 return {
  29.                     msg:"他是小明"
  30.                 }
  31.             },
  32.             template:'<h1 @click="change">{{msg}}</h1>',
  33.             methods:{
  34.                 change:function(){
  35.                     this.msg = "谁说他是小明的"
  36.                 }
  37.             }
  38.         });
  39.         Vue.component("who",item);
  40.  
  41.         var vm = new Vue({
  42.             el:"#box",
  43.             data:{
  44.             }
  45.         })
  46.     </script>
  47.  
  48. </body>
  49. </html>

开始显示

点击之后显示

局部组件

写法和全局组件基本一致，只是将声明组件放在了 vue实例的配置项中，使用 components可以配置多个组件。由于组件内容不较多，可以先使用变量声明好，再负值到组件中，如下代码的做法

具体的代码解释在注释中   注：如果申明的组件名是驼峰是命名的，那么在标签中，需要转化成 横杠 链接的小写名称

  1. <div id="box">
  2.     <who-haha></who-haha> <!-- 驼峰式命名的变量，在html中使用的时候，要转化成横杠的方式 -->
  3. </div>
  4.  
  5. <script>
  6.  
  7.     var item = Vue.extend({
  8.         data:function(){
  9.             return {
  10.                 msg:"哈哈"
  11.             }
  12.         },
  13.         template:'<h1 @click="change">{{msg}}</h1>',
  14.         methods:{
  15.             change:function(){
  16.                 this.msg = "呵呵"
  17.             }
  18.         }
  19.     });
  20.  
  21.     var vm = new Vue({
  22.         el:"#box",
  23.         data:{},
  24.         components:{  //可以配置多个内部组件
  25.             "whoHaha":item    //组件命名的名字，最好都用引号引起来（当然，单个单词的时候不用引号也不报错）
  26.         }
  27.     })
  28.  
  29. </script>

开始显示

点击之后显示

　

　

将模板独立编写

有的时候我们模板的html代码很多，字符串形式写在js中不好写，可以将它独立写在html中，然后调用。

使用 template 标签定义模板 ，将模板内容写在 template标签内，指定 一个 id，这样再定义组件的时候，只需要传入模板id，就可以关联起来了。

如下代码：将上一步的代码中的模板提取了出来。

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         body{
  12.             line-height: 30px;
  13.             padding: 10px;
  14.         }
  15.     </style>
  16.     <script src="vue.js"></script>
  17. </head>
  18. <body>
  19.  
  20. <div id="box">
  21.     <who-h></who-h>
  22. </div>
  23.  
  24. <template id="temp01">  <!-- template 用来定义模板，需要指定一个id -->
  25.     <div>               <!--  模板中的内容，只能保护在唯一一个标签中  （最外层不能有多个标签） -->
  26.         <h1 @click="change">{{msg}}</h1>
  27.         <p>模板示例，示例，示例</p>
  28.     </div>
  29.  
  30. </template>
  31.  
  32. <script>
  33.  
  34.     var item = Vue.extend({
  35.         data:function(){
  36.             return {
  37.                 msg:"哈哈"
  38.             }
  39.         },
  40.         template:'#temp01',  //传入id调用模板
  41.         methods:{
  42.             change:function(){
  43.                 this.msg = "呵呵"
  44.             }
  45.         }
  46.     });
  47.  
  48.     var vm = new Vue({
  49.         el:"#box",
  50.         data:{},
  51.         components:{  //可以配置多个内部组件
  52.             "who-h":item    //组件命名的时候，最好都用引号引起来（当然，单个单词的时候不用也不报错）
  53.         }
  54.     })
  55.  
  56. </script>
  57.  
  58. </body>
  59. </html>

今天就讲到这里，明天我们讲解：组件嵌套，父子组件、兄弟组件之间的通讯

关注公众号，博客更新即可收到推送

vue 基础-->进阶 教程(2): 指令、组件的更多相关文章

  1. vue 基础-->进阶 教程(2): 指令、自定义指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  2. vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制

    前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...

  3. vue 基础-->进阶 教程(1): 基础（数据绑定）

    第一章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  4. Vue基础进阶 之 自定义指令

    自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: in ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  6. Vue.js 系列教程 2：组件，Props，Slots

    原文:intro-to-vue-2-components-props-slots 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第二部分.在这一部分,我们将学习组件, ...

  7. Vue基础进阶 之 列表过渡

    在前面的博客我们一直在操作单个元素的过渡,如果是对多个元素过渡,例如列表,这时就要用到<transition-group>这个组件了: 如何使用:将要操作的列表元素放在<transi ...

  8. Vue基础进阶 之 过渡效果

    进入/离开过渡效果:Vue在插入.更新或移除DOM时,可以设置一些动画效果: 如何使用过渡效果:利用<transition></transition>组件将需要应用的过渡效果的 ...

  9. Vue基础进阶 之 实例方法--生命周期

    在上一篇博客中我们知道生命周期的方法: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destroy:销毁Vue实例,清理数据绑定,移除事件监听: vm.$nextTick:将方法中的 ...

随机推荐

  1. poj 1321 棋盘问题 简单DFS

    题目链接:http://poj.org/problem?id=1321 很久没有敲搜索了啊,今天敲了个水题练练手,哈哈.... 题目大意: 就是求在n*n的方格上放置k个棋子的方案数 代码: #inc ...

  2. .NET面试题系列[16] - 多线程概念（1）

    .NET面试题系列目录 这篇文章主要是各个百科中的一些摘抄,简述了进程和线程的来源,为什么出现了进程和线程. 操作系统层面中进程和线程的实现 操作系统发展史 直到20世纪50年代中期,还没出现操作系统 ...

  3. JVM调优总结：分代垃圾回收详述

    为什么要分代 分代的垃圾回收策略,是基于这样一个事实:不同的对象的生命周期是不一样的.因此,不同生命周期的对象可以采取不同的收集方式,以便提高回收效率. 在Java程序运行的过程中,会产生大量的对象, ...

  4. 高性能网站架构设计之缓存篇（1）- Redis C#客户端

    一.什么 RedisREmote DIctionary Server,简称 Redis,是一个类似于Memcached的Key-Value存储系统.相比Memcached,它支持更丰富的数据结构,包括 ...

  5. mongodb新手扫盲

    前言 数据库基本命令 集合(表)命令 增加数据 删除数据 更新数据 查询数据 mongoose的使用 前言 mongodb是什么?, 需fq 如何安装mongodb? 数据库基本命令 显示所有数据库: ...

  6. NIO原理剖析与Netty初步----浅谈高性能服务器开发（一）

    除特别注明外,本站所有文章均为原创,转载请注明地址 在博主不长的工作经历中,NIO用的并不多,由于使用原生的Java NIO编程的复杂性,大多数时候我们会选择Netty,mina等开源框架,但理解NI ...

  7. 在已经部署svn 服务器上，搭建svn项目 成功版

    1.进入svn目录,建立版本库 svnadmin create svntest svntest为svn项目名称 2. hooks/ 目录下新建 post-commit 文件 [钩子脚本] #!/bin ...

  8. PHP 关于timezone问题

    Warning: date(): It is not safe to rely on the system's timezone settings. You are *required* to use ...

  9. 虚拟机kali找不到无线网卡、搜不到无线网络

    VitualBox虚拟机下刚装好kali系统后,使用无线网卡,在主机上插一块usb无线网卡,然后进入虚拟机系统会发现无线网卡刚开始还能扫描出周围的无线网路, 过一会就搜不到了,显示无网络,输入命令iw ...

  10. RabbitMQ 应用学习随笔

    1．安装 Rabbit MQ 是建立在强大的Erlang OTP平台上,因此安装RabbitMQ之前要先安装Erlang. erlang:http://www.erlang.org/download. ...