computed
<body>
<div id="div">
<input type="text" name="" id="" v-model="hello">
<input type="text" v-model="world">
<!-- 计算属性 -->
<input type="text" name="" id="" v-model="test">
</div>
</body>
<script>
var vue = new Vue({
el: "#div",
data: {
hello: "helloworld vue!",
world: "limakilo"
},
computed: {
test() {
//hello或者world改变都会触发
return this.hello + this.world;
}
}
})
</script>
watch
<body>
<div id="div">
<input type="text" name="" id="" v-model="hello">
<input type="text" v-model="world">
<input type="text" name="" id="" v-model="helloworld">
</div>
</body>
<script>
var vue = new Vue({
el: "#div",
data: {
hello: "helloworld vue!",
world: "limakilo",
helloworld: "hello world"
},
//属性监视，hello改变会触发函数
watch: {
hello: function (newvalue, oldvalue) {
this.helloworld = newvalue + this.world
}
}
})
</script>
get set
computed: {
helloworld: {
get() {
return this.hello;
}, set(value) {
console.log(value);
}
}
}
v-if v-show
<body>
<div id="div">
<input type="text" name="" id="" v-model="hello" v-if="ok">
<input type="text" name="" id="" v-model="hello" v-if="ok">
<input type="button" value="隐藏" @click="okchange" v-show="!ok">
<input type="button" value="显示" @click="okchange">
</div>
</body>
<script>
var vue = new Vue({
el: "#div",
data: {
hello: "",
world: "",
ok: true
}
,
methods: {
okchange: function () {
this.ok = !this.ok
}
}
})
</script>
v-for
<body>
<div id="div">
<ul><li v-for="(el,index) in person" :key="index" >
{{el.age}}-------{{el.name}}----{{index}}
</li></ul>
</div>
</body>
<script>
var vue = new Vue({
el: "#div",
data: {
hello: "",
world: "",
ok: true,
person:[{age:11,name:"lee"},{age:12,name:"zhou"}]
}
mounted页面加载完执行一次
mounted() {
setInterval(() => {
this.ok = !this.ok
}, 1000);
}
beforeDestroy
调用this.$destroy()触发
methods: {
okchange: function () {
this.ok = !this.ok
},
des:function(){
clearInterval(this.time)
console.log("dest");
this.$destroy();
}
},
mounted() {
this.time= setInterval(() => {
this.ok = !this.ok
}, 1000);
},
beforeDestroy(){
console.log("befored");
}
filter
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
{{date | date2str("YYYY")}}
vue对象外部指定
Vue.filter("date2str",function(value,format){
return moment(value).format(format||"YYYY-MM-DD")
})
ref=u
this.$refs.u
render生成html标签
<script type="text/javascript">
var app = new Vue({
el: '#app', // 提供一个在页面上已经存在的 DOM 元素作为 Vue 实例挂载目标
render: function (createElement) {
return createElement('h2', 'Hello Vue!');
}
});
</script>
