Skip to content

M
my-vue-app

火狐Jeff / my-vue-app

通知 1
Star 0
Fork 0
M
my-vue-app

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 4eeca8c2 编写于 作者: J Jeff Fox
浏览文件
操作

混入 mixin

上级 0efbbcae
隐藏空白更改
内联 并排
Showing with 97 addition and 0 deletion
runoob.com/mixin1.html 0 → 100644
浏览文件 @ 4eeca8c2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
// 定义混入对象
const myMixin = {
created() {
this.hello()
},
methods: {
hello() {
document.write('欢迎来到混入实例-RUNOOB!')
}
}
}
// 定义一个应用，使用混入
const app = Vue.createApp({
mixins: [myMixin]
})
app.mount('#app') // => "欢迎来到混入实例-RUNOOB!"
</script>
</body>
</html>
runoob.com/mixin2.html 0 → 100644
浏览文件 @ 4eeca8c2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
const myMixin = {
data() {
return {
message: 'hello',
foo: 'runoob'
}
}
}
const app = Vue.createApp({
mixins: [myMixin],
data() {
return {
message: 'goodbye',
bar: 'def'
}
},
created() {
document.write(JSON.stringify(this.$data))
}
})
app.mount('#app')
</script>
</body>
</html>
runoob.com/mixin4.html 0 → 100644
浏览文件 @ 4eeca8c2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
const app = Vue.createApp({
myOption: 'hello!'
})
// 为自定义的选项 'myOption' 注入一个处理器。
app.mixin({
created() {
const myOption = this.$options.myOption
if (myOption) {
document.write(myOption)
}
}
})
app.mount('#app') // => "hello!"
</script>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或