0
点赞
收藏
分享

微信扫一扫

2022年8月19日——vue的使用(1)

描述:

使用vue(1),vue文件的解析,说明,首先,演示一个示例,然后进行一步步的说明。

效果演示:

2022年8月19日——vue的使用(1)_应用实例

代码演示:

<!DOCTYPE html>
<html>
<head>
<title>vue test</title>
</head>
<body>

<script src="https://unpkg.com/vue@3"></script>
<div id="app">{{ message }}</div>

<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue Test!'
}
}
}).mount('#app')
</script>
</body>
</html>

内容说明:

应用实例的开始:

2022年8月19日——vue的使用(1)_vue_02

每个vue应用都是通过createApp函数创建一个新的应用实例。

如以上示例中的:

2022年8月19日——vue的使用(1)_html_03

应用实例的渲染:

从.mount()方法开始

2022年8月19日——vue的使用(1)_vue_04

具体如以上代码中的:

2022年8月19日——vue的使用(1)_应用实例_05

模板设置:

在没有template的时候,会使用innerHTML作为模板。

2022年8月19日——vue的使用(1)_应用实例_06

举报

相关推荐

0 条评论