computed
模板内虽然也可以进行计算,但函数用多了看起来就会很麻烦,所以我们使用computed属性
computed具有缓存属性,计算属性必须是一个函数
<div id="app">
{{msg}}
<div v-for="i in new Array(10)"> {{msg2}}</div>
<input type="button" value="btn" @click="btn()">
<div v-for="i in new Array(10)">{{btn()}}</div>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:"hello"
} ,
computed:{
//这是利用计算属性进行输出
msg2:function () {
console.log("computed") //只会输出一次
return this.msg+'world'
}
} ,
methods:{
//这是利用vue在模板中的逻辑进行输出
btn(){
console.log('function') //输出10次
return this.msg+"btn"
}
}
})
</script>
Directive
(自定义指令)
下面是利用这个指令来完成一个用鼠标拖拽小方块的实例
<div id="app" >
<div class="class" v-mystyle></div>
</div>
<script>
Vue.directive('mystyle',function (el) {
el.onmousedown = function (e) {
let disX=e.clientX-el.offsetLeft
let disY=e.clientY-el.offsetTop
console.log(disY)
console.log(disX)
el.onmousemove=function (e) {
let left =e.clientX - disX
let right =e.clientY - disY
el.style.left=left+'px'
el.style.top=right+'px'
}
el.onmouseup=function (e) {
document.onmousemove = "" ;
el.onmouseup="";
}
}
})
new Vue({
el:'#app',
data:{
}
})
</script>
mount
挂载DOM
<div id="app">
{{msg}}
<input type="button" value="btn" onclick="btn()">
</div>
<script>
let vm = new Vue({
data:{
msg:'hello'
}
})
function btn() {
vm.$mount("#app")
}
</script>
refs
可以对某个元素进行绑定
<div id="app">
<p v-html="msg"></p>
<div ref="div1">div1</div>
<div></div>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
} ,
})
let mydiv1=vm.$refs.div1
mydiv1.style.color='red'
console.log(vm.$refs.div1)
</script>
nexttick
利用这个方法可以在msg还没有进行数据更改的时候,进行抢先一步的更改,如下,使用了nexttick方法以后,就可以和原生js的输出结果一样了
<div id="app">
<div ref="div1" id="div1"> {{msg}}</div>
<input type="button" value="btn" @click="btn()">
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
msg:'hello'
} ,
methods:{
btn(){
this.msg='nkbh'
console.log(this.$refs.div1)
console.log(this.$refs.div1.innerText) //输出hello而不是nkbh
console.log(document.getElementById('div1').innerText) //输出hello
//一个方法
this.$nextTick(function () {
console.log(this.$refs.div1)
console.log(this.$refs.div1.innerText) //输出nkbh
console.log(document.getElementById('div1').innerText) //输出nkbh
})
}
}
})
</script>