vue中指令写了一个demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>指令</title> <link rel="stylesheet" href="vlib/css/index.css"> <style> *{margin:;padding:;box-sizing:border-box;} a{text-decoration:none;} </style> </head> <body> <script src="vlib/vue.js"></script> <script src="vlib/index.js"></script> <div id="app"> <component-child v-if="list" :mess="list"></component-child> <div> <button @click="myupdate">更新</button> <button @click="mydel">卸载</button> <button @click="myinstall">安装</button> </div> </div> <script> Vue.directive('limitStr',{ bind:function(el,binding,vcode){ console.log(); }, inserted:function(el,binding,vcode){ console.log(); }, update:function(el,binding,vcode){ console.log(); }, componentUpdated:function(el,binding,vcode){ console.log(); }, unbind:function(el,binding,vcode){ console.log(); } }) var componentChild = { template:'<div>\ {{messval}}\ <input type="text" :value="mess" v-limit-str>\ </div>', data: function(){ return { messval:this.mess } }, props:{ mess:{ type:String, default:'' } }, methods:{ getVal:function(e){ this.messval = e.target.value } } } new Vue({ el:'#app', data:{ list:'hello word!!!' }, components:{ componentChild:componentChild }, methods:{ myupdate:function(){//更新 this.list = '更新了!!123' }, mydel:function(){//卸载 this.list = ''; }, myinstall:function(){//安装 this.list = 'china!!!'; } } }) </script> </body> </html>
vue中指令写了一个demo的更多相关文章
- 在VS中实现webService的一个demo(图解)
在VS中实现webService的一个demo(图解) 先创建一个web项目,创建好web项目后,添加新建项——web服务 在新建好的web服务文件中写如下代码: 生成当前解决方案. 新建一个winf ...
- NDK中使用pthread多线程中自己写的一个BUG
在使用pthread进行NDK中的多线程开发时,自己写了一个BUG, void *darkGrayThread(void *args) { ThreadParam *param = (ThreadPa ...
- vue中data必须是一个函数
前端面试时经常被问到:“组建中data为什么是函数”? 答案就是:在组件中data必须是一个函数,这样的话,每个实例可以维护一份被返回对象的独立拷贝.
- vue中,写在methods里的B方法去调A方法的数据,访问不到?
今天在写项目的时候,发现了一个京城性忽略的问题,在vue的methods的方法里面定义了两个方法,如下: getTaskList() { api.growthDetails.taskList({ ap ...
- opencv debug版本在linux下编译,并写了一个DEMO
用如下方法编译opencv: git clone "https://github.com/opencv/opencv.git" mkdir opencv_debug cd open ...
- vue中指令绑定的v-if逻辑结构
<!-- if判断 --> <div id="app2"> <p v-if="seen"> <!-- 给p标签绑定指令 ...
- vue中路由返回上一个页面,恢复到上一个页面的滚动位置
第一步:路由文件的配置(对你所需要的vue文件进行保存缓存标志的添加) import Vue from 'vue' import Router from 'vue-router' import Hel ...
- vue中使用router打开一个新的窗口
一个单页应用打开一个新的窗口不是很好控制,比如权限的处理,因为原先的页面不会自动刷新,方法很简单: let routeData = this.$router.resolve({ name: " ...
- 3-6 Vue中的条件渲染
本次案例讲解:v-if,v-show,v-else,v-else-if和key值的相关用法!!! v-if指令: //通过一个(v-if)指令 ,可以结合js表达式的返回值,决定一个标签是否在页面上展 ...
随机推荐
- AutoCompleteTextView和Spinner的使用方法
首先说明AutoCompleteTextView的使用方法.主要是起到自己主动填充的作用.输入keyword,假设存在该字便能够自己主动填充.代码例如以下 activity_main.xml < ...
- Linux操作系统是如何工作的
<实验五——Linux操作系统是如何工作的?破解操作系统的奥秘> 姓名:方超 学号:SA12**6201 Linux操作系统工作的基础 存储程序计算机.堆栈(函数调用堆栈)机制和中断机制是 ...
- bzoj3436: 小K的农场(差分约束)
3436: 小K的农场 题目:传送门 题解: 查分基础: t==1 a>=b+c t==2 b>=a-c t==3 a>=b+0 b>=a+0 跑最长路一A 代码: #i ...
- 问题集锦 ~ jQuery
#addClass失败 $target.addClass('show'); show 这个单词可能和内部某处起冲突了吧,有时成功有时失败,只能换个class名了,难受……
- 【原创】Apache服务器500错误失去响应的问题解决
某生产网站部署在Apache上,使用tomcat集群,偶尔网站失去响应,查看首页发现无法打开,页面假死,出现过多次,查看apache的日志,发现经常出现以下提示: [Fri Dec :: ] [war ...
- Caffe 激励层(Activation)分析
Caffe_Activation 一般来说,激励层的输入输出尺寸一致,为非线性函数,完成非线性映射,从而能够拟合更为复杂的函数表达式激励层都派生于NeuronLayer: class XXXlayer ...
- POJ 2739 Sum of Consecutive Prime Numbers【素数打表】
解题思路:给定一个数,判定它由几个连续的素数构成,输出这样的种数 用的筛法素数打表 Sum of Consecutive Prime Numbers Time Limit: 1000MS Memo ...
- Visual Studio中C++工程的环境配置方法
在Visual Studio的C++工程设置 1.添加工程的头文件目录:工程---属性---配置属性---c/c++---常规---附加包含目录. 2.添加文件引用的lib静态库路径:工程---属性- ...
- How Javascript works (Javascript工作原理) (二) 引擎,运行时,如何在 V8 引擎中书写最优代码的 5 条小技巧
个人总结: 一个Javascript引擎由一个标准解释程序,或者即时编译器来实现. 解释器(Interpreter): 解释一行,执行一行. 编译器(Compiler): 全部编译成机器码,统一执行. ...
- How Javascript works (Javascript工作原理) (一) 引擎,运行时,函数调用栈
个人总结:该系列文章对JS底层的工作原理进行了介绍. 这篇文章讲了 运行时:js其实是和AJAX.DOM.Settimeout等WebAPI独立分离开的 调用栈:JavaScript的堆内存管理 和 ...