第二章 建议学习时间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): 指令、自定义指令、组件的更多相关文章

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

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

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

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

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

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

  4. Vue基础（环境配置、内部指令、全局API、选项、内置组件）

    1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...

  5. WPF进阶教程 - 使用Decorator自定义带三角形的边框

    原文:WPF进阶教程 - 使用Decorator自定义带三角形的边框 写下来,备忘. Decorator,有装饰器.装饰品的意思,很容易让人联想到设计模式里面的装饰器模式.Decorator类负责包装 ...

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

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

  7. Vue.js学习 Item13 – 指令系统与自定义指令

    基础 除了内置指令,Vue.js 也允许注册自定义指令.自定义指令提供一种机制将数据的变化映射为 DOM 行为. 可以用 Vue.directive(id, definition) 方法注册一个全局自 ...

  8. [vue]vue条件渲染v-if(template)和自定义指令directives

    条件渲染: v-if/template <div id="app"> <h1>v-show: display: none</h1> <di ...

  9. (尚016)Vue指令(11个自带指令+自定义指令)

    1.Vue常用指令 1)v:text:更新元素的 textContent 2)v-html:更新元素的 innerHTML 3)v-if:如果为true,当前标签才会输出到页面 4)v-else:如果 ...

随机推荐

  1. bzoj 4428: [Nwerc2015]Debugging调试

    4428: [Nwerc2015]Debugging调试 Description Your fancy debugger will not help you in this matter. There ...

  2. rman catalog配置简要笔记

    服务端配置: SQL> create tablespace tbs_rman datafile 'H:\oradata\test\tbs_rman.dbf' size 20m autoexten ...

  3. Java8新语言特性

    Java8简明指南 欢迎来到Java8简明指南.本教程将一步一步指导你通过所有新语言特性.由短而简单的代码示例,带你了解如何使用默认接口方法,lambda表达式,方法引用和可重复注解.本文的最后你会熟 ...

  4. express结合EJS模板渲染HTML

    注意:以下是在Windwo环境下 运行: npm install ejs 然后你的目录node_modules下将增加ejs文件夹 app.js var express = require(" ...

  5. (获取选中的光标起始位置)EditText常用属性【三】:EditText选取操作

    转自:http://blog.csdn.net/wirelessqa/article/details/8567702 话不多说,直接上码: activity_main.xml <ScrollVi ...

  6. CSS -- 绝对相对定位

    relative相对于自己原来的位置进行相对定位absolute相对于最近的父级元素进行定位fixed始终相对于浏览器窗口进行对位 顺便说一下,fixed就是特殊的absolute.

  7. requests.exceptions.SSLError: hostname '127.0.0.1' doesn't match None

    http://stackoverflow.com/questions/33429453/python-requests-ssl-hostname-doesnt-match-error http://w ...

  8. 基于CentOS与VmwareStation10搭建hadoop环境

    基于CentOS与VmwareStation10搭建hadoop环境     目 录 1. 概述.... 1 1.1. 软件准备.... 1 1.2. 硬件准备.... 1 2. 安装与配置虚拟机.. ...

  9. RenderMonkey 练习 第四天 【OpenGL Texture Bump】

    BumpTexture 1. 新建一个OpenGL 空effect; 2. 添加相关变量 右击Effect节点选择Add Variable->float->float / float3 添 ...

  10. thinkphp5.0 中使用第三方无命名空间的类库

    ThinkPHP5建议所有的扩展类库都使用命名空间定义,如果你的类库没有使用命名空间,则不支持自动加载,必须使用Loader::import方法先导入文件后才能使用. 首先要在文件头部使用loader ...