引入 Vue:引入开发环境版本有自带的提示和警告适合新手
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
差值表达式{{}}; (也可称模板语法)
<!--HTML部分-->
<div id="app">
{{ message }}
</div>
<!--JS部分-->
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
输出 Hello Vue!
'#':id选择器
'.':class选择器
步骤:
1.导入开发版本的vue.js
2.创建vue实例对象,设置el属性和data属性;vue用到的数据定义在data中,data中可以写复杂类型的数据
3.使用简洁的模板语法把数据渲染到页面上,渲染复杂类型数据时,遵守JS的语法即可