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:将方法中的 ...
随机推荐
- [刷题]算法竞赛入门经典 3-10/UVa1587 3-11/UVa1588
书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 题目:算法竞赛入门经典 3-10/UVa1587:Box 代码: //UVa1587 - Box #include&l ...
- 深入理解IOC
1. IoC理论的背景 我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 图1:软件系统中耦合的对象 如果我们打开机 ...
- [原创]MySQL数据库忘记root密码解决办法
MySQL数据库忘记root密码解决办法 1.在运行输入services.msc打开服务窗体,找到MYSQL服务.右键停止将其关闭.如图:
- Apache许可翻译
https://www.apache.org/licenses/LICENSE-2.0 Apache许可 2.0 2004.1 使用.复制和发行的术语和条件. 1 定义 "License&q ...
- ubuntu16.04 英文环境安装中文输入法
1. 安装语言包 System Settings–>Language Support–>Install/Remove Languages 选中chinese,点击Apply应用即可,等待下 ...
- javaSE_Java第一周总结:有难度题目集合
第一周练习总结 说明:尽量采用多种做法解决 1.使用三种方法实现变量交换 public class Test1Change{ public static void main(String[] args ...
- 【MyBatis源码分析】insert方法、update方法、delete方法处理流程(下篇)
Configuration的newStatementHandler分析 SimpleExecutor的doUpdate方法上文有分析过: public int doUpdate(MappedState ...
- Python使用PyMysql操作数据库
安装 pip install -U pymysql 连接数据库 连接数据库有两种不同的格式 直接使用参数 代码如下 import pymysql.cursors connection = pymysq ...
- 前端css要加的一些
编码格式 @charset "utf-8"; body的外边距设置 margin:0; 标签设置 form,ul,ol,li设置为padding:0; ul,ol,li设置为lis ...
- mysql之 mysql 5.6不停机主从搭建(一主一从基于GTID复制)
环境说明:版本 version 5.6.25-log 主库ip: 10.219.24.25从库ip:10.219.24.22os 版本: centos 6.7已安装热备软件:xtrabackup 防火 ...