vue学习笔记1：el 与 data
一、vue介绍
vue是目前三大主流框架之一（React、Angular、Vue）
vue特点：
- 易用
- 灵活
- 高效
vue官网：官网链接
二，知识点
vue实例选项： el
注：不能 让el直接管理html或者body，会报错
-
作用：指定当前vue实例所管理的视图
-
值：可以是id选择器，其他选择器，DOM元素（#div1，.div1等）
vue实例选项：data
-
作用：指定当前vue实例所管理的视图中要使用的数据
-
值：可以是一个对象
-
访问方法：实例对象.属性名
-
特点：响应式数据（数据改变时，视图层中的数据会自动发生变化）
三、用js中的数据渲染视图层
- 引入vue.js
<script src="../js/vue.js"></script>
- 在视图中建立一个div
<div id="div1"> <p></p> </div>
- js代码
new Vue({ el:'#div1', //绑定视图层的id data:{ msg:'Hello，vue' //渲染视图层的数据 } })
- 绑定数据
<p>{{msg}}</p><!-- 绑定js中msg的数据 -->
- 运行截图
- 完整代码
<body> <div id="div1"><!-- 视图层新建一个div --> <p>{{msg}}</p><!-- 绑定数据 --> </div> <script> new Vue({ el:'#div1', //绑定视图层的id data:{ msg:'Hello，vue' //渲染视图层的数据 } }) </script> </body>
