77 lines
1.6 KiB
HTML
77 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="app">
|
|
|
|
<h2 ref="test">我是h2</h2>
|
|
<h1>{{ msg | shenglh }}</h1>
|
|
<h3>{{ test }}</h3>
|
|
</div>
|
|
</body>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
|
<script>
|
|
// 计算属性 computed
|
|
// 侦听器 watch
|
|
// 混入 mixins 封装相同代码，减少冗余
|
|
|
|
var mix = {
|
|
data () {
|
|
return {
|
|
page: 0,
|
|
totalPage: 10
|
|
}
|
|
},
|
|
methods: {
|
|
bottom () {
|
|
|
|
}
|
|
}
|
|
};
|
|
|
|
var vm = new Vue({
|
|
el: '.app',
|
|
mixins: [ mix ],
|
|
data: {
|
|
msg: '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈'
|
|
},
|
|
watch: {
|
|
msg (newVal, oldVal) {
|
|
console.log(newVal, oldVal);
|
|
}
|
|
},
|
|
created () {
|
|
console.log(this.page);
|
|
console.log("created");
|
|
},
|
|
mounted () {
|
|
console.log("mounted");
|
|
console.log(this.$refs.test);
|
|
},
|
|
filters: {
|
|
shenglh(val) {
|
|
return val.substring(0,3)+"..."
|
|
}
|
|
},
|
|
methods: {
|
|
test2() {
|
|
return "test2"
|
|
}
|
|
},
|
|
computed: {
|
|
test () {
|
|
return "test"
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
</html> |