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表达式的返回值,决定一个标签是否在页面上展 ...
随机推荐
- windows模式编译
//预编译,linker链接,Windows模式#pragma comment(linker,"/subsystem:\"windows\" /entry:\" ...
- Ubuntu下使用Deepin-wine的移植版安装qq微信等
title: Ubuntu下使用Deepin-wine的移植版安装qq微信等 toc: false date: 2018-09-18 16:12:49 categories: methods tags ...
- HD-ACM算法专攻系列（4）——A == B ?
题目描述: 源码: /**/ #include"iostream" #include"string" using namespace std; string S ...
- IEEE Access的模板的问题
这个模板果然问题还是有一些,比如caption换行得自己改class文件.首先感谢一下CSDN的一位网友的经验https://blog.csdn.net/baidu_21381705/article/ ...
- hiho 1590 - 紧张的会议室。区间问题
题目链接 小Hi的公司最近员工增长迅速,同时大大小小的会议也越来越多:导致公司内的M间会议室非常紧张. 现在小Hi知道公司目前有N个会议,其中第i个会议的时间区间是(Si, Ei). 注意这里时间区间 ...
- 优动漫PAINT-樱花教程
很雅致清新的樱花教程~在很多地方都可以运用到哟~原文转载自优动漫官网. 想要Get到更多有关优动漫的信息包括软件下载,可关注http://www.dongmansoft.com.
- Mojo C++ Bindings API
This document is a subset of the Mojo documentation. Contents Overview Getting Started Interfaces Ba ...
- java开发过程中几种常用算法
排序算法 排序算法中包括:简单排序.高级排序 简单排序 简单排序常用的有:冒泡排序.选择排序.插入排序 冒泡排序代码如下: private static void bubbleSrot(int[] a ...
- Valgrind的安装及简单使用
1.获取源码 wget http://www.valgrind.org/downloads/valgrind-3.14.0.tar.bz2 2.解压缩 tar -jxvf valgrind-3.14. ...
- python常见操作的模板
1.生成要求稀疏度的随机矩阵 import scipy import scipy.sparse import numpy n=10 m=10 density=0.5 matrixformat='coo ...