vue之hello world起步
vue cdn链接:
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
vue 基本使用步骤
1、提供标签用于填充数据
<div id="app">
<div></div>
</div>
2、引入vue.js库文件
<script type="text/javascript" src="../script/vue.min.js"></script>
3、使用vue的语法写功能
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'hello world'
}
})
</script>
4、将vue提供的数据填充到标签里
<!-- 1、提供标签用于填充数据 -->
<div id="app">
<!-- 4、将vue提供的数据填充到标签里 -->
<div>{{msg}}</div>
<div>{{1 + 1}}</div>
</div>
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- vue 基本使用步骤 -->
<!-- 1、提供标签用于填充数据 -->
<div id="app">
<!-- 4、将vue提供的数据填充到标签里 -->
<div>{{msg}}</div>
<div>{{1 + 1}}</div>
</div>
<!-- 2、引入vue.js库文件 -->
<script type="text/javascript" src="../script/vue.min.js"></script>
<!-- 3、使用vue的语法写功能 -->
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'hello world'
}
})
</script>
</body>
</html>