一、Hello World
1-1、示例1
把容器中变化的数据,交给Vue实例去保管:
1-2、示例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--VUEde 引入 cdn方式-->
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- view层 模板 视图层 -->
<div class="app">
{{message}}
</div>
<script>
// 创建一个Vue的实例
var vm = new Vue({
el: ".app",
// model层:数据模型
data:{
message: "hello world!"
}
});
</script>
</body>
</html>
浏览器展示:
双向绑定:ViewModel层
1-3、小结
二、Hello 案例分析
2-1、一个Vue实例,不能同时接管两个实例
页面展示:
2-2、多个实例不能对应一个容器
2-3、一个Vue实例对应一个容器
三、注意
3-1、Vue的组件简介
3-2、JS表达式 VS JS代码
HTML容器中,并不是Vue实例有什么,容器才能放什么。
页面展示:
页面展示: