第二章 建议学习时间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. [刷题]算法竞赛入门经典 3-10/UVa1587 3-11/UVa1588

    书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 题目:算法竞赛入门经典 3-10/UVa1587:Box 代码: //UVa1587 - Box #include&l ...

  2. 深入理解IOC

    1. IoC理论的背景 我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 图1:软件系统中耦合的对象 如果我们打开机 ...

  3. [原创]MySQL数据库忘记root密码解决办法

    MySQL数据库忘记root密码解决办法 1.在运行输入services.msc打开服务窗体,找到MYSQL服务.右键停止将其关闭.如图:

  4. Apache许可翻译

    https://www.apache.org/licenses/LICENSE-2.0 Apache许可 2.0 2004.1 使用.复制和发行的术语和条件. 1 定义 "License&q ...

  5. ubuntu16.04 英文环境安装中文输入法

    1. 安装语言包 System Settings–>Language Support–>Install/Remove Languages 选中chinese,点击Apply应用即可,等待下 ...

  6. javaSE_Java第一周总结：有难度题目集合

    第一周练习总结 说明:尽量采用多种做法解决 1.使用三种方法实现变量交换 public class Test1Change{ public static void main(String[] args ...

  7. 【MyBatis源码分析】insert方法、update方法、delete方法处理流程（下篇）

    Configuration的newStatementHandler分析 SimpleExecutor的doUpdate方法上文有分析过: public int doUpdate(MappedState ...

  8. Python使用PyMysql操作数据库

    安装 pip install -U pymysql 连接数据库 连接数据库有两种不同的格式 直接使用参数 代码如下 import pymysql.cursors connection = pymysq ...

  9. 前端css要加的一些

    编码格式 @charset "utf-8"; body的外边距设置 margin:0; 标签设置 form,ul,ol,li设置为padding:0; ul,ol,li设置为lis ...

  10. mysql之 mysql 5.6不停机主从搭建（一主一从基于GTID复制）

    环境说明:版本 version 5.6.25-log 主库ip: 10.219.24.25从库ip:10.219.24.22os 版本: centos 6.7已安装热备软件:xtrabackup 防火 ...