概述
第一个Vue程序
引入Js
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
渲染数据
数据渲染
不支持单标签、html、body标签
<div id="app">
{{ message }}
<p> {{ date }}</p>
</div>
Vue 数据渲染支持同步刷新
渲染数据
data对象，支持选择的标签及后代标签
<script>
var vue = new Vue({
el:"#app", // 挂载点 选择器都支持(建议使用 ID选择器 )
data:{
message: "Hello Bigdataboy",
date: "2020.9.27 5.20"
}
})
</script>
data 对象 渲染复杂类型数据
<body>
<div id="app">
{{ message }}
<h2>{{ infor.name }}</h2>
<ul>
<li>{{ advantage[0] }}</li>
<li>{{ advantage[1] }}</li>
<li>{{ advantage[2] }}</li>
</ul>
</div>
</body>
<script>
var vue = new Vue({
el:"#app",
data:{
message: "Hello Bigdataboy", // 普通类型
infor:{ // Json 对象
name:"bigdataboy",
age:"18"
},
advantage:["帅气","幽默","有内涵"] // 数组
}
})
</script>
上一篇
【Vue】Vue 指令
【Vue】Vue 指令
下一篇
【C语言】指针与二维数组
【C语言】指针与二维数组