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:将方法中的 ...
随机推荐
- 精准准确的统一社会信用代码正则(js)
参照标准: <GB_32100-2015_法人和其他组织统一社会信用代码编码规则.> 按照编码规则: 统一代码为18位,统一代码由十八位的数字或大写英文字母(不适用I.O.Z.S.V)组成 ...
- 港交所OMD-C对接笔记
工作中需要对接港交所OMD-C的Standard版行情,现在把一些知识点做个笔记,供以后查阅. 「香港交易所领航星」巿场数据平台-证券市场(HKEX Orion Market Data Platfor ...
- UICollection无法下拉刷新的问题
当UICollectonView加载的内容不够多的时候会出现无法上下拉刷新的问题,折腾了半天,原来是有一个属性没有打开 设置 : self.collectionView.alwaysBounceVer ...
- javaWeb学习总结（8）- JSP标签(6)
一.JSP标签介绍 JSP标签也称之为Jsp Action(JSP动作)元素,它用于在Jsp页面中提供业务逻辑功能,避免在JSP页面中直接编写java代码,造成jsp页面难以维护. 二.JSP常用标签 ...
- 开涛spring3(3.1) - DI的配置使用
3.1.1 依赖和依赖注入 传统应用程序设计中所说的依赖一般指“类之间的关系”,那先让我们复习一下类之间的关系: 泛化:表示类与类之间的继承关系.接口与接口之间的继承关系: 实现:表示类对接口的实现 ...
- Java 多线程详解（五）------线程的声明周期
Java 多线程详解(一)------概念的引入:http://www.cnblogs.com/ysocean/p/6882988.html Java 多线程详解(二)------如何创建进程和线程: ...
- 根据源码用HttpServletRequest获取MultipartFile的问题
问题 由于某些原因,现在需要这样的一个文件上传接口,这个接口type(String)是必传参数,photoFile(MultipartFile)是非必传参数,即一般情况下需要接受两个参数,分别为pho ...
- 几大排序思想（由javascript编写）
Hello!我是super喵二~~~今天练了几道面试题,突然觉得好久没有好好归纳 过排序算法了.以前都是用C/java编写排序,这次用js来总结下五大排序算法吧: 1.冒泡排序(常用及常考排序算法): ...
- 在附件管理模块中增加对FTP 上传和预览的支持
在之前介绍的附件管理模块里面<Winform开发框架之通用附件管理模块>以及<Winform开发框架之附件管理应用>,介绍了附件的管理功能,通过对数据库记录的处理和文件的管理, ...
- WPF界面XAML中的if……else……
xaml本身并不支持if--else--,要用Converter替代if--else--来实现我们想要的效果,知者请速离开,不要浪费时间 需求:按照Window的WindowState来决定Gri ...