一、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>
295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
