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表达式的返回值,决定一个标签是否在页面上展 ...
随机推荐
- ZOJ Problem Set - 3820 Building Fire Stations 【树的直径 + 操作 】
题目:problemId=5374" target="_blank">ZOJ Problem Set - 3820 Building Fire Stations 题 ...
- JavaSE入门学习24:Java面向对象补充
一Java中的Object类 Object类是全部Java类的父类.假设一个类没有使用extendskeyword明白标识继承另外一个类,那么这个类默认 继承Object类. public class ...
- iOS:简单使用UIAlertVIew和UIActionSheet
做iOS开发的同学想必都用过UIAlertVIew或者UIActionSheet.UIAlertVIew 可以弹出一个出现在屏幕中间的提示视图,给用户展示信息,并让用户自己选择操作,UIActionS ...
- zzulioj--1790-- 弹珠游戏(数学水题!)
弹珠游戏 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 14 Solved: 10 SubmitStatusWeb Board Descriptio ...
- TCP、HTTP协议的RPC
TCP.HTTP协议的RPC 1.1 基于TCP协议的RPC 1.1.1 RPC名词解释 RPC的全称是Remote Process Call,即远程过程调用,RPC的实现包括客户端和服务端,即服务调 ...
- VC 下加载 JPG / JPEG / GIF / PNG 图片最简单的方法
VC MFC 提供的 API LoadBitmap / LoadImage 类 CBitmap 等都只能操作 BMP 位图,图标.对于其他常用的 JPG / JPEG / GIF / PNG 格式,它 ...
- xBIM 基础09 WeXplorer 基本应用
系列目录 [已更新最新开发文章,点击查看详细] 在本教程中,将学习如何创建最基本和最直接的查看器. 除了展示建筑模型外,不做其他任何操作.它将只使用内置导航,但是不会对按钮做出事件响应. &l ...
- jQuery学习(七)——使用JQ完成下拉列表左右选择
1.需求:实现以下功能 2.步骤分析: 第一步:确定事件(鼠标单击事件click) 第二步:获取左侧下拉列表被选中的option($(“#left option:selected”)) [假设左侧se ...
- js正则学习小计
//元字符 {} () ^ $ . ? + //预定义字符 \d \D \w \W \s \S //量词 {n,m} {n} {n,} + ? * //贪婪和惰性 //反向引用 //分组 //候选 / ...
- CSS3———linear-gradient() 线性渐变
线性渐变linear-gradient() 遇到了这样的css样式 body { height: 100%; background-color: #ffffff; background-image: ...