<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js测试父子之间通信</title>
<script type="text/javascript" src="lib/boot.js"></script>
<style>
.box{
width:100%;
max-width:640px;
margin:40px auto;
border:1px solid #ccc;
padding:20px;
}
.box li{
height:20px;
background:#abcdef;
margin-bottom:1px;
}
</style>
</head>
<body>
<div id="app" v-cloak >
<div v-my-directive="[1,2,3,4,5,6,7]"></div>
<div v-red-text = "'color:#abcdef;'">welecome</div>
<div v-example :a="'hellow word'" :b="{name:'zhangsan',age:2342}"></div>
</div>
<script>
var tx = function(){
//定义一个指令 可以操作原生事件
Vue.directive('my-directive', function (value) {
var ul = "<ul class='box'>";
var li = '';
for(var i=0; i<value.length; i++){
li += "<li onclick='get1("+i+")'>"+value[i]+"</li>"
}
ul = ul + li + "</ul>";
this.el.innerHTML = ul;
window.get1 = function(val){
alert(val)
}
})
// 定义一个指令 可以设置颜色
Vue.directive('red-text',function(value){
this.el.style = value || 'color:#f00'
})
//定义一个指令 高级定义 具体参考官网
Vue.directive('example',{
params: ['a','b'],
bind: function () {
//console.log(this.params.a) // 执行一次
},
update: function () {
//console.log(this.params.a);
// console.log(this.params.b);
var o = this.params.b
for(var i = 0; i<Object.keys(o).length; i++){
console.log(Object.keys(o)[i] +"----"+o[Object.keys(o)[i]])
}
}
})
return new Vue({
el:'#app',
data:{
msg:[]
}
})
}()
</script>
</body>
</html>
vue 指令的用法的更多相关文章
-
Vue.js自定义指令的用法与实例
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...
-
vue指令用法
vue指令 指令式带有 v- 前缀的特殊特性v-text和v-html都属于指令将数据和dom做关联,当表达式的值改变时,响应式地作用在视图 解决大胡子语法闪烁案例 [v-cloak] { dispa ...
-
Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
-
Vue指令总结---小白同学必看
今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪 ...
-
一个能拖动，能调整大小，能更新bind值的vue指令-vuedragx
一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...
-
Vue学习笔记之Vue指令系统介绍
所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...
-
[Vue] : Vue指令
Vue指令之 v-cloak v-cloak是解决解决插值表达式的闪烁问题 . 给插值表达式的元素加上v-cloak <p v-cloak>{{ msg }}</p> 为v-c ...
-
Vue slot 插槽用法：自定义列表组件
Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...
-
checkbox在vue中的用法小结
关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...
随机推荐
-
自定义类似MessageBox小窗体操作
1.实际小窗体界面如下 2.代码如下 private void InputBox(string caption,string orderNo) { Form InputForm = new Form( ...
-
速战速决 (2) - PHP: 数据类型 bool, int, float, string, object, array
[源码下载] 速战速决 (2) - PHP: 数据类型 bool, int, float, string, object, array 作者:webabcd 介绍速战速决 之 PHP 数据类型 boo ...
-
wxpython 树形控件全选和取消全选
#encoding:utf-8 import wx import wx.lib.agw.customtreectrl as CT class MyFrame(wx.Frame): def __init ...
-
在纯C工程的main函数之前跑代码（手工找到程序入口点, 替换为我们自己的函数）
在main函数之前跑代码的方法 方法: 手工找到程序入口点, 替换为我们自己的函数 写测试程序 // test.cpp : Defines the entry point for the consol ...
-
HTML下标签之应用
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...
-
MySQL 数据库索引
数据库索引 在数据库中.索引使数据库程序无须对整个表进行全表扫描就可以在其中找到所需的数据: 数据库中的索引是某个表中一列或者若干列值的集合.以及物理标识这些值的数据页的逻辑指针清单: MySQL 索 ...
-
mybatis.xml和mapper.xml的配置
mybatis.xml和mapper.xml的配置 1.创建一个Source Folder 2.完成分包mapper和mybatis 3.创建mybatis.xml文档 4xml文档名 5.名字规范 ...
-
ajaxfileupload.js上传文件兼容IE7及以上版本
要兼容IE789,要修改ajaxfileupload.js;要将此处的代码替换掉 if(window.ActiveXObject) { var io = document.createElement( ...
-
timeSetEvent
Header: Declared in Mmsystem.h; include Windows.h.Library: Use Winmm.lib. MSDN里定义的函数原型如下: MMRESULT t ...
-
使用JS实现俄罗斯方块游戏
简单的JS俄罗斯方块游戏源码 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&q ...