您的位置：首页 > Web前端 > Vue.js

vue 指令实例

2018-08-03 10:12 489 查看

<!DOCTYPE html>
<html>

<head>
<meta charset='utf-8' />
<title>自定义指令</title>

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>

</style>
</head>

<body>
<div id='app'>
       <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#c23531;"></span>
<h1 v-hello>{{msg}}</h1>
<button @click='change'>改变msg内容</button>

       <button @click="handleClick">clickMe</button>
       <h1 v-if="count < 6" v-change="count">it is a custom directive</h1>

<el-row>
<el-col :span="24" v-for="(item, index) in 2" :key="item">
<div><label>自定义文件</label></div>
<el-card :body-style="{ padding: '0px' }" v-for="(o, index) in 5" :key="o" style="width:200px;display:inline-block;float:left;margin:20px;">

<img src="http://h.hiphotos.baidu.com/image/pic/item/730e0cf3d7ca7bcba51475b9b2096b63f624a83d.jpg" class="image" width="200" height="200">
<div style="padding: 14px;">
<span>好吃的汉堡</span>
<div class="bottom clearfix">
<time class="time">{{ currentDate }}</time>
<el-button type="text" class="button">操作按钮</el-button>
</div>
</div>
</el-card>
<el-card :body-style="{ padding: '0px' }" v-if="item == 2" style="width:200px;display:inline-block;float:left;margin:20px;">

<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=655586665,2158258541&fm=27&gp=0.jpg" class="image" width="200" height="200">

</el-card>
</el-col>
</el-row>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

Vue.directive('hello',{
bind(el , binging){ // 指令第一次绑定到元素的时候执行,且只执行一次,一般用于执行初始化操作
console.log('bind',el , binging)
},
inserted(el , binging){ // 当被绑定的元素插入到DOM中时执行
console.log('inserted',el , binging)
},
update(el , binging){ // 当被绑定的元素所在模版更新时执行
console.log('update',el , binging)
},
componentUpdated(el , binging){ // 一般不怎么用,表示被绑定元素所在模板完成一次更新周期时调用,个人感觉效果与update有点重合
console.log('componentUpdated',el , binging)
},
unbind(el , binging){ // 指令与被绑定的元素解绑时使用,只调用一次
console.log('unbind',el , binging)
}
})

var vm = new Vue({
el:'#app',
data:{
msg:'hello world',
currentDate: new Date(),
count:0
},
methods:{
change(){

this.msg = this.msg.split('').reverse().join('')
},
               handleClick: function () {
                   //按钮单击，count自增
                   this.count++;
               }
},
           directives:{
               change:{
                   bind: function (el,bindings) {
                       console.log('指令已经绑定到元素了');
                       console.log(el);
                       console.log(bindings);
                       //准备将传递来的参数
                       // 显示在调用该指令的元素的innerHTML
                       el.innerHTML = bindings.value;
                   },
                   update: function (el,bindings) {
                       console.log('指令的数据有所变化');
                       console.log(el);
                       console.log(bindings);
                       el.innerHTML = bindings.value;
                       if(bindings.value == 5)
                       {
                           console.log(' it is a test');
                       }
                   },
                   unbind: function () {
                       console.log('解除绑定了');
                   }
               }
           }
})
</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航