84 lines
1.6 KiB
HTML
84 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>Vue 基础学习</title>
|
||
<style>
|
||
.fade-enter-active,
|
||
.fade-leave-active {
|
||
transition: opacity 2s;
|
||
}
|
||
|
||
.fade-enter,
|
||
.fade-leave-to
|
||
|
||
{
|
||
opacity: 0;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="app">
|
||
<h2>{{ test | sl }}</h2>
|
||
|
||
<transition name="fade">
|
||
<div v-if="isShow">true</div>
|
||
</transition>
|
||
|
||
|
||
<button @click="isShow = !isShow ">点我</button>
|
||
</div>
|
||
</body>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
||
<script>
|
||
|
||
|
||
var a = {
|
||
data() {
|
||
return {
|
||
page: 1,
|
||
totalpage: 1
|
||
}
|
||
},
|
||
methods: {
|
||
more() {
|
||
console.log("加载更多");
|
||
}
|
||
}
|
||
}
|
||
|
||
// 混入
|
||
// 作用：用一种不会影响this指向的方式去封装代码
|
||
var vm = new Vue({
|
||
el: '.app',
|
||
mixins: [a],
|
||
data: {
|
||
test: '自定义指令学习',
|
||
isShow: true
|
||
},
|
||
created() {
|
||
console.log(this.more());
|
||
},
|
||
methods: {
|
||
|
||
},
|
||
computed: {
|
||
|
||
},
|
||
filters: {
|
||
sl(val) {
|
||
return val.substring(0, 3) + '..'
|
||
},
|
||
},
|
||
watch: {
|
||
|
||
}
|
||
})
|
||
|
||
</script>
|
||
|
||
</html> |