v-html的使用
<div id="app">
<div v-html="msg"></div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
msg:'<strong>vue.js</strong>'
},
methods:{
}
});
</script>
</body>```
这里说的是1.0版本有三花括号写法“{{{}}}”,2.0后没有了。
获取vue实例中的元素和数据：
```<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
var vm=new Vue({
data:{
msg:'vue.js'
},
methods:{
}
}).$mount('#app');
//vm.$mount('#app');
alert(vm.$data.msg);
vm.$el.style.background='gray';
</script>
</body>```
自定义属性的获取：
```<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
var vm=new Vue({
aa:11,
data:{
msg:'vue.js'
},
methods:{
}
}).$mount('#app');
//vm.$mount('#app');
alert(vm.$options.aa);
</script>
</body>```
计算属性的使用(computed)：
```<body>
<div id="app">
{{msg}}<br/>
{{a}}
</div>
<script type="text/javascript">
var vm=new Vue({
aa:11,
data:{
msg:'vue.js'
},
computed:{
a:function(){
return 1
}
}
}).$mount('#app');
</script>
</body>```
```<body>
<div id="app">
{{a}}<br/>
{{b}}
</div>
<script type="text/javascript">
var vm=new Vue({
data:{
a:1
},
computed:{
b:{
get:function(){
return this.a+1;
},
set:function(v){
return this.a=v-1;
}
}
}
}).$mount('#app');//挂载元素
document.onclick=function(){
vm.b=10;
}
</script>
</body>```
监听数据变化（$watch）:
```<body>
<div id="app">
{{a}}<br/>
{{b}}
</div>
<script type="text/javascript">
var vm=new Vue({
data:{
a:1,
b:100
},
}).$mount('#app');//挂载元素
vm.$watch('a',function(){
this.b=this.a+10;
})
document.onclick=function(){
vm.a=10;
}
</script>
</body>```
深度监听(主要监听对象object)：
```<body>
<div id="app">
{{a}}<br/>
{{b}}<br/>
{{json}}
</div>
<script type="text/javascript">
var vm=new Vue({
data:{
json:{aa:11,bb:22},
a:1,
b:100
},
}).$mount('#app');//挂载元素
vm.$watch('json',function(){
alert(1);},{deep:true})
document.onclick=function(){
vm.$data.json.aa=33;
}
</script>
</body>```
自定义过滤器filter：
```<body>
<div id="app">
{{a|toDou(1,2)}}
</div>
<script type="text/javascript">
Vue.filter('toDou',function(value,a,b){
alert(a+','+b);
return value<10?'0'+value:''+value;
})
var vm=new Vue({
data:{
a:1,
},
}).$mount('#app');//挂载元素
</script>
</body>```
自定义指令：
```<body>
<div id="box">
<span v-gray>发送到解放军</span>
</div>
<script>
Vue.directive('gray',function(el){
el.style.background='gray';
})
var vm=new Vue({
data:{
msg:'vue.js'
},
methods:{
}
}).$mount('#box');
</script>
</body>```
```<body>
<div id="box">
<span v-demo-directive:gray="msg">发送到解放军</span>
</div>
<script>
Vue.directive('demoDirective',{
bind:function(el,binding,vnode){
el.style.color='#fff';
el.style.background=binding.arg;
el.innerHTML=
'指令名：' +binding.name+'<br>'+
'指令内容value：' +binding.value+'<br>'+
'指令绑定表达式expression：' +binding.expression+'<br>'+
'传入指令的参数argument：' +binding.arg+'<br>'
console.log(binding)
}})
var vm=new Vue({
data:{
msg:'vue.js'
},
methods:{
}
}).$mount('#box');
</script>
</body>```
这里所说的有个钩子函数：
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted： 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update： 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
componentUpdated： 被绑定元素所在模板完成一次更新周期时调用
unbind 只调用一次，指令与元素解绑时使用。
钩子函数参数：
定义对象的钩子函数参数如下
el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
name: 指令名，不包括 v- 前缀。
value: 指令的绑定值， 例如： v-my-directive="1 + 1"，value 的值是 2。
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
```Vue.directive('my-directive', {
bind: function(){
//做绑定的准备工作
//比如添加事件监听器，或是其他只需要执行一次的复杂操作
},
inserted: function(){
//...
},
update: function(){
//根据获得的新值执行对应的更新
//对于初始值也会调用一次
},
componentUpdated: function(){
//...
},
unbind: function(){
//做清理操作
//比如移除bind时绑定的事件监听器
}
})```
自定义拖拽div：
```<body>
<div id="box">
<span v-drag :style="{'width':'100px','height':'100px','background':'gray','position':'absolute','left':0,'top':0}"></span>
</div>
<script>
Vue.directive('drag',{
bind:function(el){
el.onmousedown=function(ev){
var disX=ev.clientX-el.offsetLeft;
var disY=ev.clientY-el.offsetTop;
document.onmousemove=function(ev){
var l=ev.clientX-disX;
var t=ev.clientY-disY;
el.style.left=l+'px';
el.style.top=t+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
}
}})
var vm=new Vue({
data:{
msg:'vue.js'
},
methods:{
}
}).$mount('#box');
</script>
</body>```
网友评论