vue-属性
1.计算属性computed (有缓存,直接当变量用。)
<body>
<div id=" app">
<!-- {{data | fi1}} -->
{{add}}
<br>
{{adc()}}
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" >
var app = new Vue({
el: "#app',
data: {
date:3
}:
methods :{
adc(){
return this 。add*9
//计算属性
}
},
//计算属性
computed:{
//里面的( add)可以当成变量
add(){
return this.date+1
},
</script>
</body>
计算属性computed (有缓存,直接当变量用。)
<body>
<div id="app">
<!-- {{data| fi1}} -->
{{add}}
<br>
{{adc()}}
</div>
<script src="js/vue .js" type="text/javascript" charset="utf-8" ></script>
<script type-"text/javascript">
var app = new Vue({
e1: ' #app',
data: {
date:3
}.
methods:{
adc(){
return this . add*9
},
//计算属性
computed:{
//里面的(add)可以当成变量
add(){
return this .date+1
}
}
// 顷听属性,检测变量的变化,(新旧两种属性)
watch:{
data(news,olds){
console.1og("改变了")
}
}
</script>
</body>
组件components(引入 注册 使用)
过滤器
<div class="asd">{{data|fil}}</div>
<template>
<div class="he1lo">
<btn></btn>
{{msg|fil}}
</div>
</template>
<script >
import btn from ' . /new_ file. vue’
export default {
name:'HelloWorld ' ,
data() {
return {
msg: ' Welcome to Your Vue .js App'
}
},
//计算属性
components : (
//.里面的( 变量)可以当成变量
btn
},
//过滤器?(运算, 转换)
filters : {
fil(res ){
console. log(res) ;
}
}
}
</ script>